Search results

How To

Customize expand and collapse icons

You can customize TreeView expand and collapse icons by using the cssClass property of TreeView. Refer to the sample to customize expand/collapse icons.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);

var hierarchicalData = [
    { id: '01', name: 'Local Disk (C:)', expanded: true,
        subChild: [
            {
                id: '01-01', name: 'Program Files',
                subChild: [
                    { id: '01-01-01', name: '7-Zip' },
                    { id: '01-01-02', name: 'Git' },
                    { id: '01-01-03', name: 'IIS Express' },
                ]
            },
            {
                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: 'custom'
});
treeObj.appendTo('#tree');
<html lang="en"><head><script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head><body>&#xFEFF;



    <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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    



    
    <div id="container">
        <div id="treeparent">
            <div id="tree"></div>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

#treeparent {
    display: block;
    max-width: 450px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

.custom .e-list-item .e-icons {
	background-image: url(http://jsplayground.syncfusion.com/13.3.0.7/themes/web/images/ui-icons/ui-icons-default.png);
	background-repeat: no-repeat;
}

.custom .e-list-item .e-icon-expandable {
	background-position: -76px -40px;
}

.custom .e-list-item .e-icon-collapsible {
	background-position: -76px -40px;
}

.custom .e-list-item .e-text-content .e-icon-expandable:before,
.custom .e-list-item .e-text-content .e-icon-collapsible:before {
	content: '';
}

How to process the node operation in tree view using context menu

You can intergrade the context menu with ‘TreeView’ component in order to perform the tree view related operations like add, remove and renaming node.

Following is an example which demonstrates the above cases which are used to manipulate tree view operations in the ‘select ’ event of context menu.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);

/**
 * The node operation in tree view using context menu
 */
 
//define the data source for TreeView
var data = [
    { id: '1', name: 'Local Disk (C:)', hasAttribute:{class:'remove rename'}, hasChild: true, expanded: true, },
    { id: '2', name: 'Program Files', pid: '1', hasChild: true },
    { id: '3', name: 'Windows NT', pid: '2' }, 
    { id: '4', name: 'Windows Mail', pid: '2' },
    { id: '5', name: 'Windows Photo Viewer', pid: '2' },
    { id: '6', name: 'Users', pid: '1', hasChild: true, expanded: true },
    { id: '7', name: 'Smith', pid: '6' },
    { id: '8', name: 'Public', pid: '6' },
    { id: '9', name: 'Admin', pid: '6' },
    { id: '10', name: 'Windows', pid: '1', hasChild: true },
    { id: '11', name: 'Boot', pid: '10' },
    { id: '12', name: 'FileManager', pid: '10' },
    { id: '13', name: 'System32', pid: '10' },
    { id: '14', name: 'Local Disk (D:)', hasAttribute:{class:'remove'} , hasChild: true},
    { id: '15', name: 'Personals', pid: '14', hasChild: true },
    { id: '16', name: 'My photo.png', pid: '15' },
    { id: '17', name: 'Rental document.docx', pid: '15' },
    { id: '18', name: 'Pay slip.pdf', pid: '15' },
    { id: '19', name: 'Projects', pid: '14', hasChild: true },
    { id: '20', name: 'ASP Application', pid: '19' },
    { id: '21', name: 'TypeScript Application', pid: '19' },
    { id: '22', name: 'React Application', pid: '19' },
    { id: '23', name: 'Office', pid: '14', hasChild: true },
    { id: '24', name: 'Work details.docx', pid: '23' },
    { id: '25', name: 'Weekly report.docx', pid: '23' },
    { id: '26', name: 'Wish list.csv', pid: '23' },
    { id: '27', name: 'Local Disk (E:)', hasAttribute:{class:'remove'} , hasChild: true },
    { id: '28', name: 'Pictures', pid: '27', hasChild: true }, 
    { id: '29', name: 'Wind.jpg', pid: '28' }, 
    { id: '30', name: 'Stone.jpg', pid: '28' },
    { id: '31', name: 'Home.jpg', pid: '28' },
    { id: '32', name: 'Documents', pid: '27', hasChild: true },
    { id: '33', name: 'Environment Pollution.docx', pid: '32' },
    { id: '34', name: 'Global Warming.ppt', pid: '32' },
    { id: '35', name: 'Social Network.pdf', pid: '32' },
    { id: '36', name: 'Study Materials', pid: '27', hasChild: true },
    { id: '37', name: 'UI-Guide.pdf', pid: '36' },
    { id: '38', name: 'Tutorials.zip', pid: '36' },
    { id: '39', name: 'TypeScript.7z', pid: '36' } 
];

// Render the TreeView by mapping its fields property with data source properties
var treeObj = new ej.navigations.TreeView({
    fields: { dataSource: data, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild', htmlAttributes:'hasAttribute'},

});
treeObj.appendTo('#tree');

//Render the context menu with target as Treeview
var menuItems = [
    { text: 'Add New Item' },
    { text: 'Rename Item' },
    { text: 'Remove Item' }
];
var menuOptions = {
    target: '#tree',
    items: menuItems,
    select: menuclick,
    beforeOpen: beforeopen
};
var menuObj = new ej.navigations.ContextMenu(menuOptions, '#contextmenu');

var index = 1;
function menuclick(args) {
    var targetNodeId = treeObj.selectedNodes[0];
    if (args.item.text == "Add New Item") {
    var nodeId = "tree_" + index;
    var item = { id: nodeId, name: "New Folder" };
        treeObj.addNodes([item], targetNodeId, null);
        index++;
        data.push(item);
        treeObj.beginEdit(nodeId);
    }
    else if (args.item.text == "Remove Item") {
        treeObj.removeNodes([targetNodeId]);
    }
    else if (args.item.text == "Rename Item") {
        treeObj.beginEdit(targetNodeId);
    }
}

function beforeopen(args) {
  var targetNodeId = treeObj.selectedNodes[0];
  var targetNode = document.querySelector('[data-uid="' + targetNodeId + '"]');
    if (targetNode.classList.contains('remove')) {
        menuObj.enableItems(['Remove Item'], false);
    }
    else {
        menuObj.enableItems(['Remove Item'], true);
    }
    if (targetNode.classList.contains('rename')) {
        menuObj.enableItems(['Rename Item'], false);
    }
    else {
        menuObj.enableItems(['Rename Item'], true);
    }
}
<html lang="en"><head><script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head><body>&#xFEFF;



    <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/ej2-base/styles/material.css" rel="stylesheet">
      <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    



    
    <div id="container">
        <div id="treeparent">
            <div id="tree"></div>
            <ul id="contextmenu"></ul>
        </div>
    </div>



<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

 #contextmenu {
            padding: 0;
            font-size: inherit;
 }

Check/uncheck the check box on clicking the tree node text

You can check and uncheck the checkboxes of tree view by clicking the tree node using the nodeClicked event of TreeView.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);

/**
 * TreeView check/uncheck the check box, while clicking on the tree node text sample
 */

    // Data source for TreeView component
    var countries = [
    { id: 1, name: 'Australia', hasChild: true, expanded: true },
    { id: 2, pid: 1, name: 'New South Wales' },
    { id: 3, pid: 1, name: 'Victoria' },
    { id: 4, pid: 1, name: 'South Australia' },
    { id: 6, pid: 1, name: 'Western Australia' },
    { id: 7, name: 'Brazil', hasChild: true },
    { id: 8, pid: 7, name: 'Paraná' },
    { id: 9, pid: 7, name: 'Ceará' },
    { id: 10, pid: 7, name: 'Acre' },
    { id: 11, name: 'China', hasChild: true },
    { id: 12, pid: 11, name: 'Guangzhou' },
    { id: 13, pid: 11, name: 'Shanghai' },
    { id: 14, pid: 11, name: 'Beijing' },
    { id: 15, pid: 11, name: 'Shantou' },
    { id: 16, name: 'France', hasChild: true },
    { id: 17, pid: 16, name: 'Pays de la Loire' },
    { id: 18, pid: 16, name: 'Aquitaine' },
    { id: 19, pid: 16, name: 'Brittany' },
    { id: 20, pid: 16, name: 'Lorraine' },
    { id: 21, name: 'India', hasChild: true },
    { id: 22, pid: 21, name: 'Assam' },
    { id: 23, pid: 21, name: 'Bihar' },
    { id: 24, pid: 21, name: 'Tamil Nadu' },
    { id: 25, pid: 21, name: 'Punjab' }
];

    // Render the TreeView with checkboxes
    var treeObj = new ej.navigations.TreeView({
    fields: { dataSource: countries, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild' },
    showCheckBox: true,
    nodeClicked: nodeCheck,
    keyPress: nodeCheck
});
treeObj.appendTo('#tree');

function nodeCheck(args) {
    var checkedNode = [args.node];
    if (args.event.target.classList.contains('e-fullrow') || args.event.key == "Enter") {
       var getNodeDetails = treeObj.getNodeData(args.node);
        if (getNodeDetails.isChecked == 'true') {
            treeObj.uncheckAll(checkedNode);
        } else {
            treeObj.checkAll(checkedNode);
        }
    }
}
<html lang="en"><head><script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head><body>&#xFEFF;



    <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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    



    
    <div id="container">
        <div id="treeparent">
            <div id="tree"></div>
        </div>
    </div>




<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

Validate the text while renaming the tree node

You can validate the tree node text while editing using nodeEdited event of the TreeView. Following is an example that shows how to validate and prevent empty values in tree node.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);

/**
 * TreeView node editing sample with validation
 */

    // Hierarchical data source for TreeView component
    var treeData = [
    {
        id: 1, name: 'Discover Music', expanded: true,
        child: [
            { id: 2, name: 'Hot Singles' },
            { id: 3, name: 'Rising Artists' },
            { id: 4, name: 'Live Music' }
        ]
    },
    {
        id: 7, name: 'Sales and Events',
        child: [
            { id: 8, name: '100 Albums - $5 Each' },
            { id: 9, name: 'Hip-Hop and R&B Sale' },
            { id: 10, name: 'CD Deals' }
        ]
    },
    {
        id: 11, name: 'Categories',
        child: [
            { id: 12, name: 'Songs' },
            { id: 13, name: 'Bestselling Albums' },
            { id: 14, name: 'New Releases' },
            { id: 15, name: 'Bestselling Songs' }
        ]
    },
    {
        id: 16, name: 'MP3 Albums',
        child: [
            { id: 17, name: 'Rock' },
            { id: 18, name: 'Gospel' },
            { id: 19, name: 'Latin Music' },
            { id: 20, name: 'Jazz' }
        ]
    },
    {
        id: 21, name: 'More in Music',
        child: [
            { id: 22, name: 'Music Trade-In' },
            { id: 23, name: 'Redeem a Gift Card' },
            { id: 24, name: 'Band T-Shirts' }
        ]
    }
];

    // Render the TreeView with editing option
    var treeObj = new ej.navigations.TreeView({
    fields: { dataSource: treeData, id: 'id', text: 'name', child: 'child' },
    allowEditing: true,
    nodeEdited: onNodeEdited
});
treeObj.appendTo('#tree');

function onNodeEdited(args) {
    var displayContent = "";
    if (args.newText.trim() == "") {
        args.cancel=true;
        displayContent = "TreeView item text should not be empty";
    }
    else if (args.newText != args.oldText) {
        displayContent = "TreeView item text edited successfully";
    } else {
        displayContent = "";
    }
    document.getElementById("display").innerHTML = displayContent;
}
<html lang="en"><head><script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head><body>&#xFEFF;



    <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/ej2-base/styles/material.css" rel="stylesheet">
      <link href="//cdn.syncfusion.com/ej2/ej2-inputs/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    



    
    <div id="container">
        <div id="treeparent">
             <div id="tree"></div>
             <div id="display"></div>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

#display {
            max-width: 500px;
            margin: auto;
            padding: 10px;
}

Customize tree nodes level wise

You can customize the tree nodes level wise by adding custom cssClass to the component and enabling styles.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);

/**
 * TreeView node editing sample with validation
 */

    // Hierarchical data source for TreeView component
   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><script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head><body>&#xFEFF;



    <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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    



    
    <div id="container">
        <div id="treeparent">
             <div id="tree"></div>
             <div class="details">
                <label>Note:</label>
                <div><b>1. The font-weight &quot;Bold&quot; is applied for all the leaf nodes</b></div>
                <div style="color: brown">2. The color &quot;brown&quot; is applied for first level nodes</div>
                <div style="color: darkmagenta">3. The color &quot;darkmagenta&quot; is applied for second level nodes</div>
            </div>
        </div>
    </div>




<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

#treeparent {
    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;
}

Restrict to drag and drop files under folder only

You can able to restrict to drag and drop files under folder only. These can be achieved by using ‘nodeDragStop’ and ‘nodeDragging’ event of TreeView.

Source
Preview
index.js
index.html
index.css
ej.base.enableRipple(true);

    // Hierarchical data source for TreeView component
    var hierarchicalData = [
        {
            nodeId: '01', nodeText: 'Music', icon: 'folder', 
            nodeChild: [
                { nodeId: '01-01', nodeText: 'Gouttes.mp3', icon: 'audio' }
            ]
        },
        {
            nodeId: '02', nodeText: 'Videos', icon: 'folder',
            nodeChild: [
                { nodeId: '02-01', nodeText: 'Naturals.mp4', icon: 'video' },
                { nodeId: '02-02', nodeText: 'Wild.mpeg', icon: 'video' },
            ]
        },
        {
            nodeId: '03', nodeText: 'Documents', icon: 'folder',
            nodeChild: [
                { nodeId: '03-01', nodeText: 'Environment Pollution.docx', icon: 'docx' },
                { nodeId: '03-02', nodeText: 'Global Water, Sanitation, & Hygiene.docx', icon: 'docx' },
                { nodeId: '03-03', nodeText: 'Global Warming.ppt', icon: 'ppt' },
                { nodeId: '03-04', nodeText: 'Social Network.pdf', icon: 'pdf' },
                { nodeId: '03-05', nodeText: 'Youth Empowerment.pdf', icon: 'pdf' },
            ]
        },
        {
            nodeId: '04', nodeText: 'Pictures', icon: 'folder', expanded: true,
            nodeChild: [
                {
                    nodeId: '04-01', nodeText: 'Camera Roll', icon: 'folder', expanded: true,
                    nodeChild: [
                        { nodeId: '04-01-01', nodeText: 'WIN_20160726_094117.JPG', image: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/9.png' },
                        { nodeId: '04-01-02', nodeText: 'WIN_20160726_094118.JPG', image: 'https://ej2.syncfusion.com/demos/src/treeview/images/employees/3.png' },
                    ]
                },
                { nodeId: '04-02', nodeText: 'Wind.jpg', icon: 'images' },
                { nodeId: '04-03', nodeText: 'Stone.jpg', icon: 'images' },
            ]
        },
        {
            nodeId: '05', nodeText: 'Downloads', icon: 'folder',
            nodeChild: [
                { nodeId: '05-01', nodeText: 'UI-Guide.pdf', icon: 'pdf' },
                { nodeId: '05-02', nodeText: 'Tutorials.zip', icon: 'zip' },
                { nodeId: '05-03', nodeText: 'Game.exe', icon: 'exe' },
                { nodeId: '05-04', nodeText: 'TypeScript.7z', icon: 'zip' },
            ]
        },
    ];

    // Render the TreeView with image icons
    var treeObj = new ej.navigations.TreeView({
        fields: { dataSource: hierarchicalData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' },
        sortOrder: 'Ascending',
        allowDragAndDrop: true,
        nodeDragStop: dragStop,
        nodeDragging: nodeDrag 
    });
    treeObj.appendTo('#tree');

function nodeDrag(args) {
    if (args.droppedNode.getElementsByClassName('folder').length === 0) args.dropIndicator = 'e-no-drop';
}

function dragStop(args) {
    if (args.droppedNode.getElementsByClassName('folder').length === 0) args.cancel = true;
}
<html lang="en"><head><script src="//cdn.syncfusion.com/ej2/dist/ej2.min.js" type="text/javascript"></script>
</head><body>&#xFEFF;



    <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/ej2-base/styles/material.css" rel="stylesheet">
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet">
    
    



    
    <div id="container">
        <div id="treeparent">
            <div id="tree"></div>
        </div>
    </div>
    <style>
        .e-treeview .e-list-img {
            width: 25px;
            height: 25px;
        }

        /* Loading sprite image for TreeView */
        .e-treeview .e-list-icon {
            background-repeat: no-repeat;
            background-image: url(https://ej2.syncfusion.com/demos/src/treeview/images/icons/file_icons.png);
            height: 20px;
        }

            /* Specify the icon positions based upon class name */
            .e-treeview .e-list-icon.folder {
                background-position: -10px -552px;
            }

            .e-treeview .e-list-icon.docx {
                background-position: -10px -20px;
            }

            .e-treeview .e-list-icon.ppt {
                background-position: -10px -48px;
            }

            .e-treeview .e-list-icon.pdf {
                background-position: -10px -104px;
            }

            .e-treeview .e-list-icon.images {
                background-position: -10px -132px;
            }

            .e-treeview .e-list-icon.zip {
                background-position: -10px -188px;
            }

            .e-treeview .e-list-icon.audio {
                background-position: -10px -244px;
            }

            .e-treeview .e-list-icon.video {
                background-position: -10px -272px;
            }

            .e-treeview .e-list-icon.exe {
                background-position: -10px -412px;
            }
    </style>


<script>
var ele = document.getElementById('container');
if(ele) {
    ele.style.visibility = "visible";
 }   
        </script>
<script src="index.js" type="text/javascript"></script>
</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%;
}

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}