Search results

Sort tree nodes based on levels in JavaScript (ES5) TreeView control

You can sort the TreeView nodes based on their level. When using the sortOrder property, the whole TreeView is sorted. When you sort a particular level, you can use the following code sample. The following code sample demonstrates how to sort the parent node alone in TreeView.

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

// Hierarchical data source for TreeView component
 var countries = [
    { id: 1, name: 'India', hasChild: true },
    { id: 2, pid: 1, name: 'Assam' },
    { id: 3, pid: 1, name: 'Bihar' },
    { id: 4, pid: 1, name: 'Tamil Nadu' },
    { id: 6, pid: 1, name: 'Punjab' },
    { id: 7, name: 'Brazil', hasChild: true },
    { id: 8, pid: 7, name: 'Paraná' },
    { id: 9, pid: 7, name: 'Ceará' },
    { id: 10, pid: 7, name: 'Acre' },
    { id: 11, name: 'France', hasChild: true },
    { id: 12, pid: 11, name: 'Pays de la Loire' },
    { id: 13, pid: 11, name: 'Aquitaine' },
    { id: 14, pid: 11, name: 'Brittany' },
    { id: 15, pid: 11, name: 'Lorraine' },
    { id: 16, name: 'Australia', hasChild: true },
    { id: 17, pid: 16, name: 'New South Wales' },
    { id: 18, pid: 16, name: 'Victoria' },
    { id: 19, pid: 16, name: 'South Australia' },
    { id: 20, pid: 16, name: 'Western Australia' },
    { id: 21, name: 'China', hasChild: true },
    { id: 22, pid: 21, name: 'Guangzhou' },
    { id: 23, pid: 21, name: 'Shanghai' },
    { id: 24, pid: 21, name: 'Beijing' },
    { id: 25, pid: 21, name: 'Shantou' }
    
];
var tree1 = new ej.navigations.TreeView({
    fields: { dataSource: countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' },
    created: onCreate,
    nodeExpanding: onNodeExpand
});
tree1.appendTo('#tree');

function changeDataSource(data) {
   tree1.fields = {
        dataSource: data, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild'
    }
}

var newData;
function onCreate(){
    newData = this.fields.dataSource;
     // Selects the first level nodes alone
    var resultData= new ej.data.DataManager(this.getTreeData()).executeLocal(new ej.data.Query().where(this.fields.parentID, 'equal', undefined, false));
    var name= [];
    for (var i = 0; i < resultData.length; i++){
        name.push(resultData[i][this.fields.text]);
    }
    name.sort();
    var arr = [];
    for (var j = 0; j < name.length; j++) {
        var sortedData = new ej.data.DataManager(this.getTreeData()).executeLocal(new ej.data.Query().where(this.fields.text, 'equal', name[j], false));
        var childData =  new ej.data.DataManager(newData).executeLocal(new ej.data.Query().where(this.fields.parentID, 'equal', parseInt(sortedData[0][this.fields.id]), false));
        arr.push(sortedData[0]);
    }
    // Renders treeview with sorted Nodes
    changeDataSource(arr);
    tree1.dataBind();
}
function onNodeExpand(args){
    if (args.isInteracted && args.node.querySelector('li') === null){
        var childData =  new ej.data.DataManager(newData).executeLocal(new ej.data.Query().where(this.fields.parentID, 'equal', parseInt(args.nodeData.id), false));
        tree1.addNodes(childData, args.node,null)
    }
}
<!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>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</body></html>
#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;
}