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.

razor
customize-core.cs
customize-mvc.cs
@Html.EJS().TreeView("treedata").CssClass("custom").Fields(ViewBag.TreeViewFields).Render()
 
 <style>
	.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: '';
    }
</style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult DefaultFunctionalities()
        {

            List<Parentitem> parentitem = new List<Parentitem>();
            List<Childitem> childitem1 = new List<Childitem>();
            List<SubChilditem> subchilditem1 = new List<SubChilditem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "01",
                nodeText = "Local Disk (C:)",
                expanded=true,
                child = childitem1,
            });
            childitem1.Add(new Childitem { nodeId = "01-01", nodeText = "Program Files", child=subchilditem1 });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-01", nodeText = "Windows NT" });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-02", nodeText = "Windows Mail" });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-03", nodeText = "Windows Photo Viewer" });
            List<SubChilditem> subchilditem2 = new List<SubChilditem>();
            childitem1.Add(new Childitem { nodeId = "01-02", nodeText = "Users", expanded=true, child = subchilditem2 });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-01", nodeText = "Smith" });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-02", nodeText = "Public" });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-03", nodeText = "Admin" });
            List<SubChilditem> subchilditem3 = new List<SubChilditem>();
            childitem1.Add(new Childitem { nodeId = "01-03", nodeText = "Windows", child = subchilditem3 });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-01", nodeText = "Boot" });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-02", nodeText = "FileManager" });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-03", nodeText = "System32" });
            List<Childitem> childitem2 = new List<Childitem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "02",
                nodeText = "Local Disk (D:)",
                child = childitem2,
            });
            List<SubChilditem> subchilditem4 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-01", nodeText = "Personals", child=subchilditem4});
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-01", nodeText = "My photo.png" });
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-02", nodeText = "Rental document.docx" });
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-03", nodeText = "Pay slip.pdf" });
            List<SubChilditem> subchilditem5 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Projects",child=subchilditem5 });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-01", nodeText = "ASP Application " });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-02", nodeText = "TypeScript Application" });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-03", nodeText = "React Application" });
           
            List<SubChilditem> subchilditem6 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Office", child = subchilditem6 });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-01", nodeText = "Work details.docx " });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-02", nodeText = "Weekly report.docx" });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-03", nodeText = "Wish list.csv" });
            List <Childitem> childitem3 = new List<Childitem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "03",
                nodeText = "Local Disk (E:)",
                child = childitem3,
            });
            
            List<SubChilditem> subchilditem7 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-01", nodeText = "Pictures" , child=subchilditem7});
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-01", nodeText = "Wind.jpg " });
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-02", nodeText = "Stone.jpg" });
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-03", nodeText = "Home.jpg" });
            
            List<SubChilditem> subchilditem8 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-02", nodeText = "Documents", icon = "docx" , child=subchilditem8});
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-01", nodeText = "Environment Pollution.docx " });
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-02", nodeText = "Global Warming.ppt" });
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-03", nodeText = "Social Network.pdf" });
           
            List<SubChilditem> subchilditem9 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-03", nodeText = "Study Materials",child=subchilditem9 });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-01", nodeText = "UI-Guide.pdf" });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-02", nodeText = "Tutorials.zip" });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-03", nodeText = "TypeScript.7z" });

            ViewBag.dataSource = parentitem;
            char[] value = { 'c', 'h', 'i','l','d' }; 
            string Child = new string(value);
            ViewBag.child = Child;
            return View();
        }
    }
}

public class Parentitem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<Childitem> child;

}
public class Childitem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<SubChilditem> child;

}
public class SubChilditem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;

}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult DefaultFunctionalities()
        {

             TreeViewFieldsSettings treeFields = new TreeViewFieldsSettings();
            List<object> treedata = new List<object>();
            treedata.Add(new
            {
                id = 1,
                name = "Discover Music",
                hasChild = true,
                expanded = true
            });
            treedata.Add(new
            {
                id = 2,
                pid = 1,
                name = "Hot Singles",

            });
            treedata.Add(new
            {
                id = 3,
                pid = 1,
                name = "Rising Artists"
            });

            treedata.Add(new
            {
                id = 4,
                pid = 1,
                name = "Live Music"
            });
            treedata.Add(new
            {
                id = 5,
                hasChild = true,
                name = "Sales and Events",

            });
            treedata.Add(new
            {
                id = 6,
                pid = 5,
                name = "100 Albums - $5 Each",
            });
            treedata.Add(new
            {
                id = 7,
                pid = 5,
                name = "Hip-Hop and R&B Sale"
            });
            treedata.Add(new
            {
                id = 8,
                pid = 5,
                name = "CD Deals"
            });
            treedata.Add(new
            {
                id = 10,
                hasChild = true,
                name = "Categories"
            });
            treedata.Add(new
            {
                id = 11,
                pid = 10,
                name = "Bestselling Albums",

            });
            treedata.Add(new
            {
                id = 12,
                pid = 10,
                name = "New Releases"
            });
            treedata.Add(new
            {
                id = 13,
                pid = 10,
                name = "Bestselling Songs"
            });
            treedata.Add(new
            {
                id = 14,
                hasChild = true,
                name = "MP3 Albums"
            });
            treedata.Add(new
            {
                id = 15,
                pid = 14,
                name = "Rock"

            });
            treedata.Add(new
            {
                id = 16,
                name = "Gospel",
                pid = 14,

            });
            treedata.Add(new
            {
                id = 17,
                pid = 14,
                name = "Latin Music"

            });
            treedata.Add(new
            {
                id = 18,
                pid = 14,
                name = "Jazz"

            });
            treedata.Add(new
            {
                id = 19,
                hasChild = true,
                name = "More in Music"

            });
            treedata.Add(new
            {
                id = 20,
                pid = 19,
                name = "Music Trade-In"
            });
            treedata.Add(new
            {
                id = 21,
                name = "Redeem a Gift Card",
                pid = 19
            });
            treedata.Add(new
            {
                id = 22,
                pid = 19,
                name = "Band T-Shirts"

            });
            treeFields.DataSource = treedata;
            treeFields.Expanded = "expanded";
            treeFields.Id = "id";
            treeFields.ParentID = "pid";
            treeFields.Text = "name";
            treeFields.HasChildren = "hasChild";
            ViewBag.TreeViewFields = treeFields;
            return View();
        }
    }
}

Output be like the below.

TreeView Sample

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

You can integrate 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.

razor
contextmenu-core.cs
contextmenu-mvc.cs
@Html.EJS().TreeView("treedata").Fields(ViewBag.TreeViewFields).Render()
  @Html.EJS().ContextMenu("menu").BeforeOpen("beforeOpen").Target("#treedata").Select("menuClick").Items(ViewBag.menuItems).Render()

<script>
    var index = 1;
    function menuClick(args) {
        var treeObj = document.getElementById('treedata').ej2_instances[0];
        var menuObj = document.getElementById('menu').ej2_instances[0];
        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++;
            treeObj.fields.dataSource.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 treeObj = document.getElementById('treedata').ej2_instances[0];
        var menuObj = document.getElementById('menu').ej2_instances[0];
        var targetNodeId = treeObj.selectedNodes[0];
        var targetNode = document.getElementById('treedata').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);
        }
    }
  </script>
}
<style>
    .control_wrapper {
        max-width: 500px;
        margin: 0 auto;
        border: 1px solid #dddddd;
        border-radius: 3px;
    }
</style>
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        Dictionary<string, string> htmlAttribute = new Dictionary<string, string>();


        public IActionResult ContextMenu()
        {
            List<object> treedata = new List<object>();
            treedata.Add(new
            {
                id = 1,
                name = "Discover Music",
                hasChild = true,
                expanded = true,
                htmlAttribute = new Dictionary<string, string>() {{ "class" , "remove rename"} }

            });
            treedata.Add(new
            {
                id = 2,
                pid = 1,
                name = "Hot Singles",

            });
            treedata.Add(new
            {
                id = 3,
                pid = 1,
                name = "Rising Artists"
            });

            treedata.Add(new
            {
                id = 4,
                pid = 1,
                name = "Live Music"
            });
            treedata.Add(new
            {
                id = 5,
                hasChild = true,
                name = "Sales and Events",

            });
            treedata.Add(new
            {
                id = 6,
                pid=5,
                name = "100 Albums - $5 Each",
            });
            treedata.Add(new
            {
                id = 7,
                pid = 5,
                name = "Hip-Hop and R&B Sale"
            });
            treedata.Add(new
            {
                id = 8,
                pid = 5,
                name = "CD Deals"
            });
            treedata.Add(new
            {
                id = 10,
                hasChild = true,
                name = "Categories",
 
            });
            treedata.Add(new
            {
                id = 11,
                pid=10,
                name = "Bestselling Albums",
               
            });
            treedata.Add(new
            {
                id = 12,
                pid = 10,
                name = "New Releases"
            });
            treedata.Add(new
            {
                id = 13,
                pid = 10,
                name = "Bestselling Songs"
            });
            treedata.Add(new
            {
                id = 14,
                hasChild = true,
                name = "MP3 Albums"
            });
            treedata.Add(new
            {
                id = 15,
                pid = 14,
                name = "Rock"

            });
            treedata.Add(new
            {
                id = 16,
                name = "Gospel",
                pid = 14,

            });
            treedata.Add(new
            {
                id = 17,
                pid = 14,
                name = "Latin Music"

            });
            treedata.Add(new
            {
                id = 18,
                pid = 14,
                name = "Jazz"

            });
            treedata.Add(new
            {
                id = 19,
                hasChild = true,
                name = "More in Music"

            });
            treedata.Add(new
            {
                id = 20,
                pid = 19,
                name = "Music Trade-In"
            });
            treedata.Add(new
            {
                id = 21,
                name = "Redeem a Gift Card",
                pid = 19
            });
            treedata.Add(new
            {
                id = 22,
                pid = 19,
                name = "Band T-Shirts"

            });
            ViewBag.dataSource = treedata;
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Add New Item",
            });
            menuItems.Add(new
            {
                text = "Rename Item",
            });
            menuItems.Add(new
            {
                text = "Remove Item",
            });
            ViewBag.menuItems = menuItems;
            return View();
        }
    }
}
using System.Collections.Generic;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult ContextMenu()
        {
            TreeViewFieldsSettings treeFields = new TreeViewFieldsSettings();
            Dictionary<string, string> htmlAttribute = new Dictionary<string, string>();
            List<object> treedata = new List<object>();
            treedata.Add(new
            {
                id = 1,
                name = "Discover Music",
                hasChild = true,
                expanded = true,
                htmlAttribute = new Dictionary<string, string>() { { "class", "remove rename" } }

            });
            treedata.Add(new
            {
                id = 2,
                pid = 1,
                name = "Hot Singles",

            });
            treedata.Add(new
            {
                id = 3,
                pid = 1,
                name = "Rising Artists"
            });

            treedata.Add(new
            {
                id = 4,
                pid = 1,
                name = "Live Music"
            });
            treedata.Add(new
            {
                id = 5,
                hasChild = true,
                name = "Sales and Events",

            });
            treedata.Add(new
            {
                id = 6,
                pid = 5,
                name = "100 Albums - $5 Each",
            });
            treedata.Add(new
            {
                id = 7,
                pid = 5,
                name = "Hip-Hop and R&B Sale"
            });
            treedata.Add(new
            {
                id = 8,
                pid = 5,
                name = "CD Deals"
            });
            treedata.Add(new
            {
                id = 10,
                hasChild = true,
                name = "Categories",

            });
            treedata.Add(new
            {
                id = 11,
                pid = 10,
                name = "Bestselling Albums",

            });
            treedata.Add(new
            {
                id = 12,
                pid = 10,
                name = "New Releases"
            });
            treedata.Add(new
            {
                id = 13,
                pid = 10,
                name = "Bestselling Songs"
            });
            treedata.Add(new
            {
                id = 14,
                hasChild = true,
                name = "MP3 Albums"
            });
            treedata.Add(new
            {
                id = 15,
                pid = 14,
                name = "Rock"

            });
            treedata.Add(new
            {
                id = 16,
                name = "Gospel",
                pid = 14,

            });
            treedata.Add(new
            {
                id = 17,
                pid = 14,
                name = "Latin Music"

            });
            treedata.Add(new
            {
                id = 18,
                pid = 14,
                name = "Jazz"

            });
            treedata.Add(new
            {
                id = 19,
                hasChild = true,
                name = "More in Music"

            });
            treedata.Add(new
            {
                id = 20,
                pid = 19,
                name = "Music Trade-In"
            });
            treedata.Add(new
            {
                id = 21,
                name = "Redeem a Gift Card",
                pid = 19
            });
            treedata.Add(new
            {
                id = 22,
                pid = 19,
                name = "Band T-Shirts"

            });
           
            List<object> menuItems = new List<object>();
            menuItems.Add(new
            {
                text = "Add New Item",
            });
            menuItems.Add(new
            {
                text = "Rename Item",
            });
            menuItems.Add(new
            {
                text = "Remove Item",
            });
            ViewBag.menuItems = menuItems;
            treeFields.DataSource = treedata;
            treeFields.Expanded = "expanded";
            treeFields.Id = "id";
            treeFields.ParentID = "pid";
            treeFields.Text = "name";
            treeFields.HasChildren = "hasChild";
            ViewBag.TreeViewFields = treeFields;
            return View();
        }
    }
}

Output be like the below.

TreeView Sample

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.

razor
nodecheck-core.cs
nodecheck-mvc.cs
@Html.EJS().TreeView("treedata").ShowCheckBox(true).NodeClicked("nodeCheck").KeyPress("nodeCheck").Fields(ViewBag.TreeViewFields).Render()

<script>
    function nodeCheck(args) {
        var checkedNode = [args.node];
        var treeObj = document.getElementById('treedata').ej2_instances[0];
        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);
            }
        }
    }
</script>
public IActionResult CheckBox()
        {
            List<object> treedata = new List<object>();
            treedata.Add(new
            {
                id = 1,
                name = "Australia",
                hasChild = true,
                expanded = true
            });
            treedata.Add(new
            {
                id = 2,
                pid = 1,
                name = "New South Wales",

            });
            treedata.Add(new
            {
                id = 3,
                pid = 1,
                name = "Victoria"
            });

            treedata.Add(new
            {
                id = 4,
                pid = 1,
                name = "South Australia"
            });
            treedata.Add(new
            {
                id = 6,
                pid = 1,
                name = "Western Australia",

            });
            treedata.Add(new
            {
                id = 7,
                name = "Brazil",
                hasChild = true
            });
            treedata.Add(new
            {
                id = 8,
                pid = 7,
                name = "Paraná"
            });
            treedata.Add(new
            {
                id = 9,
                pid = 7,
                name = "Ceará"
            });
            treedata.Add(new
            {
                id = 10,
                pid = 7,
                name = "Acre"
            });
            treedata.Add(new
            {
                id = 11,
                name = "China",
                hasChild = true
            });
            treedata.Add(new
            {
                id = 12,
                pid = 11,
                name = "Guangzhou"
            });
            treedata.Add(new
            {
                id = 13,
                pid = 11,
                name = "Shanghai"
            });
            treedata.Add(new
            {
                id = 14,
                pid = 11,
                name = "Beijing"
            });
            treedata.Add(new
            {
                id = 15,
                pid = 11,
                name = "Shantou"

            });
            treedata.Add(new
            {
                id = 16,
                name = "France",
                hasChild = true

            });
            treedata.Add(new
            {
                id = 17,
                pid = 16,
                name = "Pays de la Loire"

            });
            treedata.Add(new
            {
                id = 18,
                pid = 16,
                name = "Aquitaine"

            });
            treedata.Add(new
            {
                id = 19,
                pid = 16,
                name = "Brittany"

            });
            treedata.Add(new
            {
                id = 20,
                pid = 16,
                name = "Lorraine"
            });
            treedata.Add(new
            {
                id = 21,
                name = "India",
                hasChild = true

            });
            treedata.Add(new
            {
                id = 22,
                pid = 21,
                name = "Assam"

            });
            treedata.Add(new
            {
                id = 23,
                pid = 21,
                name = "Bihar"
            });
            treedata.Add(new
            {
                id = 24,
                pid = 21,
                name = "Tamil Nadu"

            });
            ViewBag.dataSource = treedata;
            return View();
        }
public IActionResult CheckBox()
        {
            TreeViewFieldsSettings Listdata = new TreeViewFieldsSettings();
            List<object> listdata = new List<object>();
            listdata.Add(new
            {
                id = 1,
                name = "Australia",
                hasChild = true,
                expanded = true
            });
            listdata.Add(new
            {
                id = 2,
                pid = 1,
                name = "New South Wales",

            });
            listdata.Add(new
            {
                id = 3,
                pid = 1,
                name = "Victoria"
            });

            listdata.Add(new
            {
                id = 4,
                pid = 1,
                name = "South Australia"
            });
            listdata.Add(new
            {
                id = 6,
                pid = 1,
                name = "Western Australia",

            });
            listdata.Add(new
            {
                id = 7,
                name = "Brazil",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 8,
                pid = 7,
                name = "Paraná"
            });
            listdata.Add(new
            {
                id = 9,
                pid = 7,
                name = "Ceará"
            });
            listdata.Add(new
            {
                id = 10,
                pid = 7,
                name = "Acre"
            });
            listdata.Add(new
            {
                id = 11,
                name = "China",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 12,
                pid = 11,
                name = "Guangzhou"
            });
            listdata.Add(new
            {
                id = 13,
                pid = 11,
                name = "Shanghai"
            });
            listdata.Add(new
            {
                id = 14,
                pid = 11,
                name = "Beijing"
            });
            listdata.Add(new
            {
                id = 15,
                pid = 11,
                name = "Shantou"
            });
            listdata.Add(new
            {
                id = 16,
                name = "France",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 17,
                pid = 16,
                name = "Pays de la Loire"
            });
            listdata.Add(new
            {
                id = 18,
                pid = 16,
                name = "Aquitaine"

            });
            listdata.Add(new
            {
                id = 19,
                pid = 16,
                name = "Brittany"

            });
            listdata.Add(new
            {
                id = 20,
                pid = 16,
                name = "Lorraine"
            });
            listdata.Add(new
            {
                id = 21,
                name = "India",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 22,
                pid = 21,
                name = "Assam"

            });
            listdata.Add(new
            {
                id = 23,
                pid = 21,
                name = "Bihar"
            });
            listdata.Add(new
            {
                id = 24,
                pid = 21,
                name = "Tamil Nadu"
            });
            Listdata.DataSource = listdata;
            Listdata.Expanded = "expanded";
            Listdata.Id = "id";
            Listdata.ParentID = "pid";
            Listdata.Text = "name";
            Listdata.HasChildren = "hasChild";
            ViewBag.TreeViewFields = Listdata;
            return View();
        }

Output be like the below.

TreeView Sample

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.

razor
nodevalidate-core.cs
nodevalidate-mvc.cs
<div id='container'>
        <div id='treeparent'>
                @Html.EJS().TreeView("treedata").AllowEditing(true).NodeEdited("onNodeEdited").Fields(ViewBag.TreeViewFields).Render()
                <div id="display"></div>
            </div>
        </div>
<style>
    #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;
            }
</style>
<script>
    function onNodeEdited(args) {
                var treeObj = document.getElementById('treedata').ej2_instances[0];
                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;
            }
</script>
public IActionResult NodeEdit()
        {
            List<object> treedata = new List<object>();
            treedata.Add(new
            {
                id = 1,
                name = "Discover Music",
                hasChild = true,
                expanded = true
            });
            treedata.Add(new
            {
                id = 2,
                pid = 1,
                name = "Hot Singles",

            });
            treedata.Add(new
            {
                id = 3,
                pid = 1,
                name = "Rising Artists"
            });

            treedata.Add(new
            {
                id = 4,
                pid = 1,
                name = "Live Music"
            });
            treedata.Add(new
            {
                id = 5,
                hasChild = true,
                name = "Sales and Events",

            });
            treedata.Add(new
            {
                id = 6,
               pid=5,
                name = "100 Albums - $5 Each",
            });
            treedata.Add(new
            {
                id = 7,
                pid = 5,
                name = "Hip-Hop and R&B Sale"
            });
            treedata.Add(new
            {
                id = 8,
                pid = 5,
                name = "CD Deals"
            });
            treedata.Add(new
            {
                id = 10,
                hasChild = true,
                name = "Categories"
            });
            treedata.Add(new
            {
                id = 11,
                pid=10,
                name = "Bestselling Albums",
               
            });
            treedata.Add(new
            {
                id = 12,
                pid = 10,
                name = "New Releases"
            });
            treedata.Add(new
            {
                id = 13,
                pid = 10,
                name = "Bestselling Songs"
            });
            treedata.Add(new
            {
                id = 14,
                hasChild = true,
                name = "MP3 Albums"
            });
            treedata.Add(new
            {
                id = 15,
                pid = 14,
                name = "Rock"

            });
            treedata.Add(new
            {
                id = 16,
                name = "Gospel",
                pid = 14,

            });
            treedata.Add(new
            {
                id = 17,
                pid = 14,
                name = "Latin Music"

            });
            treedata.Add(new
            {
                id = 18,
                pid = 14,
                name = "Jazz"

            });
            treedata.Add(new
            {
                id = 19,
                hasChild = true,
                name = "More in Music"

            });
            treedata.Add(new
            {
                id = 20,
                pid = 19,
                name = "Music Trade-In"
            });
            treedata.Add(new
            {
                id = 21,
                name = "Redeem a Gift Card",
                pid = 19
            });
            treedata.Add(new
            {
                id = 22,
                pid = 19,
                name = "Band T-Shirts"

            });
          
            ViewBag.dataSource = treedata;
            return View();
        }
public IActionResult NodeEdit()
        {
             TreeViewFieldsSettings Listdata = new TreeViewFieldsSettings();
            List<object> listdata = new List<object>();
            listdata.Add(new
            {
                id = 1,
                name = "Australia",
                hasChild = true,
                expanded = true
            });
            listdata.Add(new
            {
                id = 2,
                pid = 1,
                name = "New South Wales",

            });
            listdata.Add(new
            {
                id = 3,
                pid = 1,
                name = "Victoria"
            });

            listdata.Add(new
            {
                id = 4,
                pid = 1,
                name = "South Australia"
            });
            listdata.Add(new
            {
                id = 6,
                pid = 1,
                name = "Western Australia",

            });
            listdata.Add(new
            {
                id = 7,
                name = "Brazil",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 8,
                pid = 7,
                name = "Paraná"
            });
            listdata.Add(new
            {
                id = 9,
                pid = 7,
                name = "Ceará"
            });
            listdata.Add(new
            {
                id = 10,
                pid = 7,
                name = "Acre"
            });
            listdata.Add(new
            {
                id = 11,
                name = "China",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 12,
                pid = 11,
                name = "Guangzhou"
            });
            listdata.Add(new
            {
                id = 13,
                pid = 11,
                name = "Shanghai"
            });
            listdata.Add(new
            {
                id = 14,
                pid = 11,
                name = "Beijing"
            });
            listdata.Add(new
            {
                id = 15,
                pid = 11,
                name = "Shantou"
            });
            listdata.Add(new
            {
                id = 16,
                name = "France",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 17,
                pid = 16,
                name = "Pays de la Loire"
            });
            listdata.Add(new
            {
                id = 18,
                pid = 16,
                name = "Aquitaine"

            });
            listdata.Add(new
            {
                id = 19,
                pid = 16,
                name = "Brittany"

            });
            listdata.Add(new
            {
                id = 20,
                pid = 16,
                name = "Lorraine"
            });
            listdata.Add(new
            {
                id = 21,
                name = "India",
                hasChild = true
            });
            listdata.Add(new
            {
                id = 22,
                pid = 21,
                name = "Assam"

            });
            listdata.Add(new
            {
                id = 23,
                pid = 21,
                name = "Bihar"
            });
            listdata.Add(new
            {
                id = 24,
                pid = 21,
                name = "Tamil Nadu"
            });
            Listdata.DataSource = listdata;
            Listdata.Expanded = "expanded";
            Listdata.Id = "id";
            Listdata.ParentID = "pid";
            Listdata.Text = "name";
            Listdata.HasChildren = "hasChild";
            ViewBag.TreeViewFields = Listdata;
            return View();
        }

Output be like the below.

TreeView Sample

Customize tree nodes level wise

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

razor
nodecustomize-core.cs
nodecustomize-mvc.cs
<div id='treeparent'>
   @Html.EJS().TreeView("listdata").CssClass("mytree").Fields(ViewBag.TreeViewFields).Render()
    <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>

 <style>
    #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;
    }
    </style>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult DefaultFunctionalities()
        {

            List<Parentitem> parentitem = new List<Parentitem>();
            List<Childitem> childitem1 = new List<Childitem>();
            List<SubChilditem> subchilditem1 = new List<SubChilditem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "01",
                nodeText = "Local Disk (C:)",
                expanded=true,
                child = childitem1,
            });
            childitem1.Add(new Childitem { nodeId = "01-01", nodeText = "Program Files", child=subchilditem1 });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-01", nodeText = "Windows NT" });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-02", nodeText = "Windows Mail" });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-03", nodeText = "Windows Photo Viewer" });
            List<SubChilditem> subchilditem2 = new List<SubChilditem>();
            childitem1.Add(new Childitem { nodeId = "01-02", nodeText = "Users", expanded=true, child = subchilditem2 });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-01", nodeText = "Smith" });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-02", nodeText = "Public" });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-03", nodeText = "Admin" });
            List<SubChilditem> subchilditem3 = new List<SubChilditem>();
            childitem1.Add(new Childitem { nodeId = "01-03", nodeText = "Windows", child = subchilditem3 });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-01", nodeText = "Boot" });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-02", nodeText = "FileManager" });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-03", nodeText = "System32" });
            List<Childitem> childitem2 = new List<Childitem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "02",
                nodeText = "Local Disk (D:)",
                child = childitem2,
            });
            List<SubChilditem> subchilditem4 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-01", nodeText = "Personals", child=subchilditem4});
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-01", nodeText = "My photo.png" });
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-02", nodeText = "Rental document.docx" });
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-03", nodeText = "Pay slip.pdf" });
            List<SubChilditem> subchilditem5 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Projects",child=subchilditem5 });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-01", nodeText = "ASP Application " });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-02", nodeText = "TypeScript Application" });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-03", nodeText = "React Application" });
           
            List<SubChilditem> subchilditem6 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Office", child = subchilditem6 });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-01", nodeText = "Work details.docx " });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-02", nodeText = "Weekly report.docx" });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-03", nodeText = "Wish list.csv" });
            List <Childitem> childitem3 = new List<Childitem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "03",
                nodeText = "Local Disk (E:)",
                child = childitem3,
            });
            
            List<SubChilditem> subchilditem7 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-01", nodeText = "Pictures" , child=subchilditem7});
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-01", nodeText = "Wind.jpg " });
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-02", nodeText = "Stone.jpg" });
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-03", nodeText = "Home.jpg" });
            
            List<SubChilditem> subchilditem8 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-02", nodeText = "Documents", icon = "docx" , child=subchilditem8});
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-01", nodeText = "Environment Pollution.docx " });
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-02", nodeText = "Global Warming.ppt" });
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-03", nodeText = "Social Network.pdf" });
           
            List<SubChilditem> subchilditem9 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-03", nodeText = "Study Materials",child=subchilditem9 });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-01", nodeText = "UI-Guide.pdf" });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-02", nodeText = "Tutorials.zip" });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-03", nodeText = "TypeScript.7z" });

            ViewBag.dataSource = parentitem;
            char[] value = { 'c', 'h', 'i','l','d' }; 
            string Child = new string(value);
            ViewBag.child = Child;
            return View();
        }
    }
}

public class Parentitem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<Childitem> child;

}
public class Childitem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<SubChilditem> child;

}
public class SubChilditem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;

}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult DefaultFunctionalities()
        {

            List<Parentitem> parentitem = new List<Parentitem>();
            List<Childitem> childitem1 = new List<Childitem>();
            List<SubChilditem> subchilditem1 = new List<SubChilditem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "01",
                nodeText = "Local Disk (C:)",
                expanded=true,
                child = childitem1,
            });
            childitem1.Add(new Childitem { nodeId = "01-01", nodeText = "Program Files", child=subchilditem1 });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-01", nodeText = "Windows NT" });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-02", nodeText = "Windows Mail" });
            subchilditem1.Add(new SubChilditem { nodeId = "01-01-03", nodeText = "Windows Photo Viewer" });
            List<SubChilditem> subchilditem2 = new List<SubChilditem>();
            childitem1.Add(new Childitem { nodeId = "01-02", nodeText = "Users", expanded=true, child = subchilditem2 });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-01", nodeText = "Smith" });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-02", nodeText = "Public" });
            subchilditem2.Add(new SubChilditem { nodeId = "01-02-03", nodeText = "Admin" });
            List<SubChilditem> subchilditem3 = new List<SubChilditem>();
            childitem1.Add(new Childitem { nodeId = "01-03", nodeText = "Windows", child = subchilditem3 });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-01", nodeText = "Boot" });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-02", nodeText = "FileManager" });
            subchilditem3.Add(new SubChilditem { nodeId = "01-03-03", nodeText = "System32" });
            List<Childitem> childitem2 = new List<Childitem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "02",
                nodeText = "Local Disk (D:)",
                child = childitem2,
            });
            List<SubChilditem> subchilditem4 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-01", nodeText = "Personals", child=subchilditem4});
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-01", nodeText = "My photo.png" });
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-02", nodeText = "Rental document.docx" });
            subchilditem4.Add(new SubChilditem { nodeId = "02-01-03", nodeText = "Pay slip.pdf" });
            List<SubChilditem> subchilditem5 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Projects",child=subchilditem5 });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-01", nodeText = "ASP Application " });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-02", nodeText = "TypeScript Application" });
            subchilditem5.Add(new SubChilditem { nodeId = "02-02-03", nodeText = "React Application" });
           
            List<SubChilditem> subchilditem6 = new List<SubChilditem>();
            childitem2.Add(new Childitem { nodeId = "02-02", nodeText = "Office", child = subchilditem6 });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-01", nodeText = "Work details.docx " });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-02", nodeText = "Weekly report.docx" });
            subchilditem6.Add(new SubChilditem { nodeId = "02-03-03", nodeText = "Wish list.csv" });
            List <Childitem> childitem3 = new List<Childitem>();
            parentitem.Add(new Parentitem
            {
                nodeId = "03",
                nodeText = "Local Disk (E:)",
                child = childitem3,
            });
            
            List<SubChilditem> subchilditem7 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-01", nodeText = "Pictures" , child=subchilditem7});
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-01", nodeText = "Wind.jpg " });
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-02", nodeText = "Stone.jpg" });
            subchilditem7.Add(new SubChilditem { nodeId = "03-01-03", nodeText = "Home.jpg" });
            
            List<SubChilditem> subchilditem8 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-02", nodeText = "Documents", icon = "docx" , child=subchilditem8});
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-01", nodeText = "Environment Pollution.docx " });
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-02", nodeText = "Global Warming.ppt" });
            subchilditem8.Add(new SubChilditem { nodeId = "03-02-03", nodeText = "Social Network.pdf" });
           
            List<SubChilditem> subchilditem9 = new List<SubChilditem>();
            childitem3.Add(new Childitem { nodeId = "03-03", nodeText = "Study Materials",child=subchilditem9 });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-01", nodeText = "UI-Guide.pdf" });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-02", nodeText = "Tutorials.zip" });
            subchilditem9.Add(new SubChilditem { nodeId = "03-03-03", nodeText = "TypeScript.7z" });

            TreeViewFieldsSettings data = new TreeViewFieldsSettings();
            char[] value = { 'c', 'h', 'i', 'l', 'd' };
            data.DataSource = parentitem;
            data.Expanded = "expanded";
            data.Id = "nodeId";
            data.Text = "nodeText";
            data.HasChildren = "hasChild";
            data.Child = new string(value);
            ViewBag.TreeViewFields = data;
            return View();
        }
    }
}

public class Parentitem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<Childitem> child;

}
public class Childitem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<SubChilditem> child;

}
public class SubChilditem
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;

}

Output be like the below.

TreeView Sample

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.

razor
nodedrag-core.cs
nodedrag-mvc.cs
@section ControlsSection{
    <div class="control-section">
        <div class="control_wrapper">
            @Html.EJS().TreeView("tree").AllowDragAndDrop(true).NodeDragStop("dragStop").NodeDragging("nodeDrag").Fields(ViewBag.TreeViewFields).Render()
        </div>
    </div>
    <script>

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

    </script>
    <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>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult IconsandImages()
        {
           
            List<Parentitems> parentitem = new List<Parentitems>();
            List<Childitems> childitem = new List<Childitems>();
            parentitem.Add(new Parentitems
            {
                nodeId = "01",
                nodeText = "Music",
                icon="folder",
                child = childitem,
            });
            childitem.Add(new Childitems { nodeId = "01-01", nodeText = "Gouttes.mp3", icon= "audio" });
            
            List<Childitems> childitem2 = new List<Childitems>();
        parentitem.Add(new Parentitems
        {
            nodeId = "02",
            nodeText = "Videos",
            icon = "folder",
            child = childitem2,
        });
        childitem2.Add(new Childitems { nodeId = "02-01", nodeText = "Naturals.mp4", icon = "video" });
        childitem2.Add(new Childitems { nodeId = "02-02", nodeText = "Wild.mpeg", icon = "video" });
        List<Childitems> childitem3 = new List<Childitems>();
        parentitem.Add(new Parentitems
        {
            nodeId = "03",
            nodeText = "Documents",
            icon = "folder",
            child = childitem3,
        });
        childitem3.Add(new Childitems { nodeId = "03-01", nodeText = "Environment Pollution.docx", icon = "docx" });
        childitem3.Add(new Childitems { nodeId = "03-02", nodeText = "Global Water, Sanitation, & Hygiene.docx", icon = "docx" });
        childitem3.Add(new Childitems { nodeId = "03-03", nodeText = "Global Warming.ppt", icon = "ppt" });
        childitem3.Add(new Childitems { nodeId = "03-04", nodeText = "Social Network.pdf", icon = "pdf" });
        childitem3.Add(new Childitems { nodeId = "03-05", nodeText = "Youth Empowerment.pdf", icon = "pdf" });

        childitem2.Add(new Childitems { nodeId = "02-01", nodeText = "Naturals.mp4", icon = "video" });
        childitem2.Add(new Childitems { nodeId = "02-02", nodeText = "Wild.mpeg", icon = "video" });
        List<Childitems> childitem4 = new List<Childitems>();
        parentitem.Add(new Parentitems
        {
            nodeId = "04",
            nodeText = "Downloads",
            icon = "folder",
            child = childitem4,
        });
        childitem4.Add(new Childitems { nodeId = "04-01", nodeText = "UI-Guide.pdf", icon = "pdf" });
        childitem4.Add(new Childitems { nodeId = "04-02", nodeText = "Tutorials.zip", icon = "zip" });
        childitem4.Add(new Childitems { nodeId = "04-03", nodeText = "Game.exe", icon = "exe" });
        childitem4.Add(new Childitems { nodeId = "04-04", nodeText = "TypeScript.7z", icon = "zip" });
       ViewBag.dataSource = parentitem;
            char[] value = { 'c', 'h', 'i', 'l', 'd' };
            string Child = new string(value);
            ViewBag.child = Child;
            return View();
    }
}
}

  public class Parentitems
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<Childitems> child;

}
public class Childitems
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;

}
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;

// For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860

namespace EJ2CoreSampleBrowser.Controllers.TreeView
{
    public partial class TreeViewController : Controller
    {
        public IActionResult IconsandImages()
        {
           
            List<Parentitems> parentitem = new List<Parentitems>();
            List<Childitems> childitem = new List<Childitems>();
            parentitem.Add(new Parentitems
            {
                nodeId = "01",
                nodeText = "Music",
                icon="folder",
                child = childitem,
            });
            childitem.Add(new Childitems { nodeId = "01-01", nodeText = "Gouttes.mp3", icon= "audio" });
            
            List<Childitems> childitem2 = new List<Childitems>();
        parentitem.Add(new Parentitems
        {
            nodeId = "02",
            nodeText = "Videos",
            icon = "folder",
            child = childitem2,
        });
        childitem2.Add(new Childitems { nodeId = "02-01", nodeText = "Naturals.mp4", icon = "video" });
        childitem2.Add(new Childitems { nodeId = "02-02", nodeText = "Wild.mpeg", icon = "video" });
        List<Childitems> childitem3 = new List<Childitems>();
        parentitem.Add(new Parentitems
        {
            nodeId = "03",
            nodeText = "Documents",
            icon = "folder",
            child = childitem3,
        });
        childitem3.Add(new Childitems { nodeId = "03-01", nodeText = "Environment Pollution.docx", icon = "docx" });
        childitem3.Add(new Childitems { nodeId = "03-02", nodeText = "Global Water, Sanitation, & Hygiene.docx", icon = "docx" });
        childitem3.Add(new Childitems { nodeId = "03-03", nodeText = "Global Warming.ppt", icon = "ppt" });
        childitem3.Add(new Childitems { nodeId = "03-04", nodeText = "Social Network.pdf", icon = "pdf" });
        childitem3.Add(new Childitems { nodeId = "03-05", nodeText = "Youth Empowerment.pdf", icon = "pdf" });

        childitem2.Add(new Childitems { nodeId = "02-01", nodeText = "Naturals.mp4", icon = "video" });
        childitem2.Add(new Childitems { nodeId = "02-02", nodeText = "Wild.mpeg", icon = "video" });
        List<Childitems> childitem4 = new List<Childitems>();
        parentitem.Add(new Parentitems
        {
            nodeId = "04",
            nodeText = "Downloads",
            icon = "folder",
            child = childitem4,
        });
        childitem4.Add(new Childitems { nodeId = "04-01", nodeText = "UI-Guide.pdf", icon = "pdf" });
        childitem4.Add(new Childitems { nodeId = "04-02", nodeText = "Tutorials.zip", icon = "zip" });
        childitem4.Add(new Childitems { nodeId = "04-03", nodeText = "Game.exe", icon = "exe" });
        childitem4.Add(new Childitems { nodeId = "04-04", nodeText = "TypeScript.7z", icon = "zip" });
        TreeViewFieldsSettings data = new TreeViewFieldsSettings();
        char[] value = { 'c', 'h', 'i', 'l', 'd' };
        data.DataSource = parentitem;
        data.Expanded = "expanded";
        data.Id = "nodeId";
        data.Text = "nodeText";
        data.HasChildren = "hasChild";
        data.IconCss = "icon";
        data.ImageUrl = "image";
        data.Child = new string(value);
        ViewBag.TreeViewFields = data;
    }
}
}

  public class Parentitems
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;
    public List<Childitems> child;

}
public class Childitems
{
    public string nodeId;
    public string nodeText;
    public string icon;
    public bool expanded;
    public bool selected;

}

Output be like the below.

TreeView Sample