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

Get iconCss dynamically in treeview in JavaScript TreeView control

08 May 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.ts
index.html
index.css
Copied to clipboard
import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView } from '@syncfusion/ej2-navigations';
enableRipple(true);

/**
 * TreeView dynamic iconCss sample
 */

    // List data source for TreeView component
   let treeData: { [key: string]: Object }[] = [
    {
    "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" }
    ]
  }
];

let tree1: TreeView = new TreeView({
     fields: { dataSource: treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', expanded: 'expanded' },
     showCheckBox: true,
     nodeChecking: onNodeChecking,
     autoCheck: false
});
tree1.appendTo('#tree');

function onNodeChecking(args) {
  let nodeId = args.data[0].id;
  // To get the iconCss
  let 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.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-navigations/styles/material.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>Loading....</div>
    <div id='container'>
        <div id='treeparent'>
            <div id="tree"></div>
        </div>
    </div>
</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