Get dynamic icon in React TreeView component

28 Feb 202510 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.

import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { TreeViewComponent } from '@syncfusion/ej2-react-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);
function App() {
    // Data source for TreeView component
    let 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" }
            ]
        }
    ];
    let field = { dataSource: treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', expanded: 'expanded' };
    let showCheckBox = true;
    let autoCheck = false;
    let treeObj;
    function onNodeCheck(args) {
        let nodeId = args.data[0].id.toString();
        // To get the iconCss
        let iconClass = treeObj.getTreeData(nodeId)[0].icon;
        alert('Icon class is ' + iconClass);
    }
    return (<div className='control-pane'>
        <div className='control-section'>
          <div className='control_wrapper'>
            {/* Render TreeView */}
            <TreeViewComponent fields={field} nodeChecking={onNodeCheck.bind(this)} showCheckBox={showCheckBox} autoCheck={autoCheck} ref={(treeview) => { treeObj = treeview; }}/>
          </div>
        </div>
      </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import {TreeViewComponent, NodeCheckEventArgs } from '@syncfusion/ej2-react-navigations';
import {enableRipple} from '@syncfusion/ej2-base';
enableRipple(true);

function App() {

   // Data source for TreeView component
   let treeData: 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 field:Object ={  dataSource: treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', expanded: 'expanded' };
    let showCheckBox: boolean = true;
    let autoCheck: boolean = false;
    let treeObj: TreeViewComponent;

    function onNodeCheck(args: NodeCheckEventArgs): void {
      let nodeId = args.data[0].id.toString();
      // To get the iconCss
      let iconClass: any = treeObj.getTreeData(nodeId)[0].icon;
      alert('Icon class is ' + iconClass);
    }

    return (
      <div className = 'control-pane'>
        <div className='control-section'>
          <div className='control_wrapper'>
            {/* Render TreeView */}
            <TreeViewComponent fields={field} nodeChecking={onNodeCheck.bind(this)} showCheckBox={showCheckBox} autoCheck={autoCheck} ref={(treeview) => { treeObj = treeview as TreeViewComponent; }}/>
          </div>
        </div>
      </div>
    )
}
export default App;
ReactDOM.render(<App />, document.getElementById('sample'));
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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 React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="style.css" rel="stylesheet"/>
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-inputs/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-react-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='treeparent'>
        <div id='sample'>
            <div id='loader'>Loading....</div>
        </div>
    </div>
</body>

</html>
#loader {
  color: #008cff;
  height: 40px;
  left: 45%;
  position: absolute;
  top: 45%;
  width: 30%;
}

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