Get dynamic icon in EJ2 JavaScript TreeView control

28 Jan 20256 minutes to read

In the TreeView control, you can obtain the original bound data using the getTreeData method. If you pass the ID of a tree node to this method, it returns the corresponding node information. Otherwise, the information of all tree nodes will be returned. You can use this method to get the bound iconCss class in the nodeChecking event. Please refer to the following sample for implementation details.

/**
* TreeView icon css sample
*/

// Hierarchical data source for TreeView control
var treeData = [
  {
    "nodeId": "01", "nodeText": "Music", "icon": "folder", "expanded": true,
    "nodeChild": [
      { "nodeId": "01-01", "nodeText": "Gouttes.mp3", "icon": "audio" }
    ]
  },
  {
    "nodeId": "02", "nodeText": "Videos", "icon": "folder", "expanded": true,
    "nodeChild": [
      { "nodeId": "02-01", "nodeText": "Naturals.mp4", "icon": "video" },
      { "nodeId": "02-02", "nodeText": "Wild.mpeg", "icon": "video" }
    ]
  }
]

// Render the TreeView with icons
var treeObj = new ej.navigations.TreeView({
  fields: { dataSource: treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', expanded: 'expanded' },
  showCheckBox: true,
  nodeChecking: onNodeChecking,
  autoCheck: false
});
treeObj.appendTo('#tree');

function onNodeChecking(args) {
  var nodeId = args.data[0].id;
  // To get the iconCss
  var iconClass = this.getTreeData(nodeId)[0].icon;
  alert('Icon class is ' + iconClass);
}
<!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-buttons/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;
        }

        .e-treeview .e-list-img {
            width: 25px;
            height: 25px;
        }

        .e-treeview .e-list-icon {
            background-repeat: no-repeat;
            background-image: url(https://ej2.syncfusion.com/javascript/documentation/treeview/images/file_icons.png);
            height: 20px;
        }

        .e-treeview .e-list-icon.folder {
            background-position: -10px -552px
        }

        .e-treeview .e-list-icon.audio {
            background-position: -10px -244px
        }

        .e-treeview .e-list-icon.video {
            background-position: -10px -272px
        }
    </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%;
}