Search results

Get all child nodes through parentID in treeview in JavaScript (ES5) TreeView control

22 Sep 2021 / 2 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.

Source
Preview
index.js
index.html
index.css
Copied to clipboard
/**
 * Accordion tree sample
 */

// Hierarchical data source for TreeView component
 var data = [
     {
        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" }
        ]
    },
    
];
var tree1 = new ej.navigations.TreeView({
    fields: { dataSource: data, id: 'code', text: 'name', child: 'countries' },
    loadOnDemand: false,
    created: onCreate
});
tree1.appendTo('#tree');
function onCreate() {
    var proxy = this;
     document.getElementById("btn").addEventListener("click",function(){
          var id = document.getElementById('Nodes').value;
          var element= proxy.element.querySelector('[data-uid="' + id + '"]');
          // Gets the child Element
          var liElements = element.querySelectorAll('ul li');
          var arr= [];
              for (var i = 0; i < liElements.length; i++) {
                var nodeData= proxy.getNode(liElements[i]);
                arr.push(nodeData);
                } 
                alert(JSON.stringify(arr));
        })
}
Copied to clipboard
<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet">
      <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head>

<body>
    
    <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>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  font-family: 'Helvetica Neue','calibiri';
  font-size: 14px;
  top: 45%;
  left: 45%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}