Sorting TreeView level wise in EJ2 JavaScript TreeView control

28 Jan 20259 minutes to read

You can sort the TreeView nodes based on their level. When using the sortOrder property, the entire TreeView is sorted. If you want to sort a particular level, refer to the following code sample, which demonstrates how to sort only the parent node in the TreeView.

// Hierarchical data source for TreeView control
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 newData;

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'
    }
}

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', null, 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="https://cdn.syncfusion.com/ej2/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-inputs/styles/material.css" rel="stylesheet">
  <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
  <script src="https://cdn.syncfusion.com/ej2/29.1.33/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.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>
  <style>
    #treeparent {
      display: block;
      max-width: 350px;
      max-height: 350px;
      margin: auto;
      overflow: auto;
      border: 1px solid #dddddd;
      border-radius: 3px;
    }
  </style>
</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%;
}