Get dynamic icon in EJ2 TypeScript 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.

import { enableRipple } from '@syncfusion/ej2-base';
import { TreeView } from '@syncfusion/ej2-navigations';
enableRipple(true);

/**
 * TreeView dynamic iconCss sample
 */

// List data source for TreeView control
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);
}
<!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://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

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