How to Customize the Expand and Collapse Icons in JavaScript TreeView?

7 mins read

The JavaScript TreeView control allows for a hierarchical representation of data and customizing the expand and collapse icons can enhance the user experience. This article outlines the steps to customize these icons effectively.

Steps to Customize Icons

Render Treeview: Create a HTML page (index.html) and add the Essentials JS 2 script and style references. For example,

<!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="https://cdn.syncfusion.com/ej2/bootstrap4.css" rel="stylesheet" />
   <script src="https://cdn.syncfusion.com/ej2/27.1.48/dist/ej2.min.js" type="text/javascript"></script>
   <script src="index.js" type="text/javascript"></script>

 </head>
 
 <body>
   <div id="container">
     <div id="tree"></div>
   </div>
 </body>
</html>

JavaScript Configuration: Create the JavaScript page (index.js) and add the data source and field mapping for TreeView control. To customize expand and collapse icons add the cssClass property of TreeView. Here’s an example:

var treeObj = new ej.navigations.TreeView({
    fields: {
        dataSource: hierarchicalData,
        id: 'id',
        text: 'name',
        child: 'subChild',
  },
  cssClass: 'custom',
});
treeObj.appendTo('#tree');

Identify the Icons: The default icons used for expanding and collapsing nodes in the TreeView can be replaced with custom icons. You can use font icons (like Font Awesome) or image icons.
CSS Customization: To change the icons, you will need to override the default CSS styles. You can define your custom styles. For example:

<style>
     .custom .e-list-item .e-icons {
       font-family: 'Customize-icon';
     }

     .custom.e-treeview .e-list-item .e-icon-expandable::before,
     .custom.e-treeview .e-list-item .e-icon-collapsible:before {
       content: '\e700';
       font-size: 12px;
     }

     @font-face {
       font-family: 'Customize-icon';
       src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAAKAIAAAwAgT1MvMj0gSRcAAAEoAAAAVmNtYXDnEOdaAAABjAAAADhnbHlmcYqIngAAAcwAAAD8aGVhZBWT124AAADQAAAANmhoZWEHmANtAAAArAAAACRobXR4C9AAAAAAAYAAAAAMbG9jYQBAAH4AAAHEAAAACG1heHABEAAxAAABCAAAACBuYW1l/qscPAAAAsgAAAJ5cG9zdIPGFvoAAAVEAAAAVgABAAADUv9qAFoEAAAA//8D6QABAAAAAAAAAAAAAAAAAAAAAwABAAAAAQAAIKcGUl8PPPUACwPoAAAAANlGSVAAAAAA2UZJUAAAAAAD6QPpAAAACAACAAAAAAAAAAEAAAADACUAAwAAAAAAAgAAAAoACgAAAP8AAAAAAAAAAQPwAZAABQAAAnoCvAAAAIwCegK8AAAB4AAxAQIAAAIABQMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAUGZFZABA5wDnAQNS/2oAWgPpAJYAAAABAAAAAAAABAAAAAPoAAAD6AAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAAkAAAABAAEAAEAAOcB//8AAOcA//8AAAABAAQAAAABAAIAAAAAAEAAfgADAAAAAAPpA+kACAAWACQAAAEhFSEHMzcnIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYCMf6kAWqUqMK8rgF+goKK/qCEfn5Coquf/amRkZoBkpqRkUq3xLcCKmSTybt4if6ghYKChQFgiUJBQRma/m6akZGaAZKaSElJAAMAAAAAA+gD6QAGABQAIgAAASMXNyMRIyUWEAcGICcmEDc+ATIWBQYQFxYgNzYQJy4BIgYBvrLp6JmGAW6BgYf+oYiBgUGhqqH9qZOTmgGOmpOTSrbCtgGy6ekBbwuI/qGHgYGIAV6IQEFBFpr+cZmTk5oBj5lKSUkAAAAAABIA3gABAAAAAAAAAAEAAAABAAAAAAABAA4AAQABAAAAAAACAAcADwABAAAAAAADAA4AFgABAAAAAAAEAA4AJAABAAAAAAAFAAsAMgABAAAAAAAGAA4APQABAAAAAAAKACwASwABAAAAAAALABIAdwADAAEECQAAAAIAiQADAAEECQABABwAiwADAAEECQACAA4ApwADAAEECQADABwAtQADAAEECQAEABwA0QADAAEECQAFABYA7QADAAEECQAGABwBAwADAAEECQAKAFgBHwADAAEECQALACQBdyBDdXN0b21pemUtaWNvblJlZ3VsYXJDdXN0b21pemUtaWNvbkN1c3RvbWl6ZS1pY29uVmVyc2lvbiAxLjBDdXN0b21pemUtaWNvbkZvbnQgZ2VuZXJhdGVkIHVzaW5nIFN5bmNmdXNpb24gTWV0cm8gU3R1ZGlvd3d3LnN5bmNmdXNpb24uY29tACAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAFIAZQBnAHUAbABhAHIAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEMAdQBzAHQAbwBtAGkAegBlAC0AaQBjAG8AbgBWAGUAcgBzAGkAbwBuACAAMQAuADAAQwB1AHMAdABvAG0AaQB6AGUALQBpAGMAbwBuAEYAbwBuAHQAIABnAGUAbgBlAHIAYQB0AGUAZAAgAHUAcwBpAG4AZwAgAFMAeQBuAGMAZgB1AHMAaQBvAG4AIABNAGUAdAByAG8AIABTAHQAdQBkAGkAbwB3AHcAdwAuAHMAeQBuAGMAZgB1AHMAaQBvAG4ALgBjAG8AbQAAAAACAAAAAAAAAAoAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAMBAgEDAQQAFy1hcnJvdy1jaXJjbGUtcmlnaHQtXzAxEi1hcnJvdy1jaXJjbGUtZG93bgAAAAA=)
         format('truetype');
       font-weight: normal;
       font-style: normal;
     }
   </style>

Testing: After implementing the changes, ensure to test the TreeView control to verify that the icons appear as expected during the expand and collapse actions.

Sample: https://stackblitz.com/edit/nrymjv-ihh5gj?file=index.html,index.js

Customization output

Conclusion

I hope you found it helpful to learn how to customize the expand and collapse icons in JavaScript TreeView control.

You can refer to our JavaScript TreeView feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our JavaScript TreeView example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments (0)

How to Customize the Expand and Collapse Icons in JavaScript TreeView?

Steps to Customize Icons

Conclusion

Access denied