Get all child nodes in EJ2 TypeScript Treeview control

2 May 20237 minutes to read

This section demonstrates how to get the child nodes from corresponding parent ID. Using the getNode method, you can get the node details of TreeView. Please refer to the following sample.

import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView } from '@syncfusion/ej2-navigations';
enableRipple(true);

/**
 * TreeeView get child nodes from parent id sample
 */

    // List data source for TreeView component
   let data: { [key: string]: Object }[] = [
   {
        code: "AF", name: "Africa", countries: [
            { code: "NGA", name: "Nigeria" },
            { code: "EGY", name: "Egypt" },
            { code: "ZAF", name: "South Africa" }
        ]
    },
    {
        code: "AS", name: "Asia", countries: [
            { code: "CHN", name: "China" },
            { code: "IND", name: "India" , countries: [
              {code: "TN", name: "TamilNadu" }
            ]},
            { code: "JPN", name: "Japan" }
        ]
    },
    {
        code: "EU", name: "Europe", countries: [
            { code: "DNK", name: "Denmark" },
            { code: "FIN", name: "Finland" },
            { code: "AUT", name: "Austria" }
        ]
    },
    {
        code: "NA", name: "North America", countries: [
            { code: "USA", name: "United States of America" },
            { code: "CUB", name: "Cuba" },
            { code: "MEX", name: "Mexico" }
        ]
    },
    {
        code: "SA", name: "South America", countries: [
            { code: "BR", name: "Brazil" },
            { code: "COL", name: "Colombia" },
            { code: "ARG", name: "Argentina" }
        ]
    },
];

let tree1: TreeView = new TreeView({
    fields: { dataSource: data, id: 'code', text: 'name', child: 'countries' },
    loadOnDemand: false,
    created: onCreate
});
tree1.appendTo('#tree');

function onCreate() {
    let proxy = this;
     document.getElementById("btn").addEventListener("click",(event)=>{
          let id = document.getElementById('Nodes').value
          let element= proxy.element.querySelector('[data-uid="' + id + '"]');
          // Gets the child Element
          let liElements = element.querySelectorAll('ul li');
          let arr= [];
              for (let i = 0; i < liElements.length; i++) {
                let nodeData= proxy.getNode(liElements[i]);
                arr.push(nodeData);
                }
                alert(JSON.stringify(arr));
        })
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Essential JS 2 for TreeView </title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for TreeView UI Control" />
    <meta name="author" content="Syncfusion" />
    <link href="index.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-base/styles/material.css" rel="stylesheet" />
      <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/23.1.36/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
        </div>
        <br/>
        <input type="text" class="e-input" id="Nodes" style="margin-left: 300px; width: 175px;" placeholder="Enter the parent ID( Ex: AS)" />
        <input type="button" class="btn btn-primary" value="Submit"id="btn" />
         <br/>
    </div>
</body>

</html>