JavaScript (ES5)
EditEdit This Document
Demos
Support
Forum
Upgrade Guide
FREE TRIAL
Search results

Get iconCss dynamically in treeview in JavaScript (ES5) TreeView control

30 Mar 2023 / 2 minutes to read

In TreeView component, you can get the original bound data using the getTreeData method. For this method, if you pass the id of the tree node, it returns the corresponding node information, or otherwise the overall tree nodes information will be returned. You can use this method to get the bound iconCss class in the nodeChecking event. Please refer to the following sample.

Source
Preview
index.js
index.html
index.css
Copied to clipboard
/**
 * TreeView icon css sample
 */

// Hierarchical data source for TreeView component
  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);
}
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/21.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/21.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/21.1.35/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>
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;
}

.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/demos/src/treeview/images/icons/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 }
Previous
Next