Customize the tree nodes based on levels in EJ2 JavaScript TreeView control
28 Jan 202515 minutes to read
You can customize the tree node levels by adding a custom cssClass to the control and applying styles accordingly.
ej.base.enableRipple(true); /** * TreeView node editing sample with validation */ // Hierarchical data source for TreeView control var hierarchicalData = [ { id: '01', name: 'Local Disk (C:)', expanded: true, subChild: [ { id: '01-01', name: 'Program Files', subChild: [ { id: '01-01-01', name: 'Windows NT' }, { id: '01-01-02', name: 'Windows Mail' }, { id: '01-01-03', name: 'Windows Photo Viewer' }, ] }, { id: '01-02', name: 'Users', expanded: true, subChild: [ { id: '01-02-01', name: 'Smith' }, { id: '01-02-02', name: 'Public' }, { id: '01-02-03', name: 'Admin' }, ] }, { id: '01-03', name: 'Windows', subChild: [ { id: '01-03-01', name: 'Boot' }, { id: '01-03-02', name: 'FileManager' }, { id: '01-03-03', name: 'System32' }, ] }, ] }, { id: '02', name: 'Local Disk (D:)', subChild: [ { id: '02-01', name: 'Personals', subChild: [ { id: '02-01-01', name: 'My photo.png' }, { id: '02-01-02', name: 'Rental document.docx' }, { id: '02-01-03', name: 'Pay slip.pdf' }, ] }, { id: '02-02', name: 'Projects', subChild: [ { id: '02-02-01', name: 'ASP Application' }, { id: '02-02-02', name: 'TypeScript Application' }, { id: '02-02-03', name: 'React Application' }, ] }, { id: '02-03', name: 'Office', subChild: [ { id: '02-03-01', name: 'Work details.docx' }, { id: '02-03-02', name: 'Weekly report.docx' }, { id: '02-03-03', name: 'Wish list.csv' }, ] }, ] }, { id: '03', name: 'Local Disk (E:)', icon: 'folder', subChild: [ { id: '03-01', name: 'Pictures', subChild: [ { id: '03-01-01', name: 'Wind.jpg' }, { id: '03-01-02', name: 'Stone.jpg' }, { id: '03-01-03', name: 'Home.jpg' }, ] }, { id: '03-02', name: 'Documents', subChild: [ { id: '03-02-01', name: 'Environment Pollution.docx' }, { id: '03-02-02', name: 'Global Warming.ppt' }, { id: '03-02-03', name: 'Social Network.pdf' }, ] }, { id: '03-03', name: 'Study Materials', subChild: [ { id: '03-03-01', name: 'UI-Guide.pdf' }, { id: '03-03-02', name: 'Tutorials.zip' }, { id: '03-03-03', name: 'TypeScript.7z' }, ] }, ] } ]; var treeObj = new ej.navigations.TreeView({ fields: { dataSource: hierarchicalData, id: 'id', text: 'name', child: 'subChild' }, cssClass: ("mytree") }); treeObj.appendTo('#tree');<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/31.2.12/ej2-base/styles/material.css" rel="stylesheet"> <link href="https://cdn.syncfusion.com/ej2/31.2.12/ej2-navigations/styles/material.css" rel="stylesheet"> <script src="https://cdn.syncfusion.com/ej2/31.2.12/dist/ej2.min.js" type="text/javascript"></script> <script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script> </head> <body> <div id="container"> <div id="treeparent"> <div id="tree"></div> </div> <div class="details"> <label>Note:</label> <div><b>1. The font-weight "Bold" is applied for all the leaf nodes</b></div> <div><i>2. The font-weight "Italic" is applied for first level nodes</i></div> <div style="color: darkmagenta">3. The color "darkmagenta" is applied for second level nodes</div> </div> </div> <script> var ele = document.getElementById('container'); if (ele) { ele.style.visibility = "visible"; } </script> <script src="index.js" type="text/javascript"></script> <style> #container { display: flex; } #treeparent, .details { width: 300px; display: block; max-width: 350px; max-height: 350px; margin: auto; overflow: auto; border: 1px solid #dddddd; border-radius: 3px; } .details { padding-left: 10px; } /*apply custom css to first level*/ .mytree .e-level-1>.e-text-content .e-list-text { font-style: italic; } /*apply custom css to second level*/ .mytree .e-level-2>.e-text-content .e-list-text { color: darkmagenta; } /*apply custom css to all the leaf nodes*/ .mytree .e-level-3>.e-text-content .e-list-text { font-weight: bold; } </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%; }