Search results

Customize The Expand And Collapse Icons in ASP.NET Core TreeView control

22 Jul 2021 / 1 minute to read

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

tagHelper
customize.cs
Copied to clipboard
@using Syncfusion.EJ2
<div>
    <ejs-treeview id="treedata" cssClass="custom">
        <e-treeview-fields child="ViewBag.child"  dataSource="ViewBag.dataSource" id="nodeId" parentId="pid" text="nodeText" hasChildren="hasChild" expanded="expanded"></e-treeview-fields>
    </ejs-treeview>
</div>

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

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

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

}

Output be like the below.

TreeView Sample