ASP.NET Core TreeView Overview

The Telerik UI TreeView TagHelper and HtmlHelper for ASP.NET Core are server-side wrappers for the Kendo UI TreeView widget.

The TreeView displays hierarchical data in a traditional tree structure.

• Demo page for the TreeView HtmlHelper

• Demo page for the TreeView TagHelper

Initializing the TreeView

The following example demonstrates how to define the TreeView.

Razor

    @(Html.Kendo().TreeView()
        .Name("treeview")
        .Items(items =>
        {
            items.Add().Text("Item 1").Expanded(true)
            .Items(subItems =>
            {
                subItems.Add().Text("Item 1.1");
                subItems.Add().Text("Item 1.2");
                subItems.Add().Text("Item 1.3");
            });

            items.Add().Text("Item 2")
            .Items(subItems =>
            {
                subItems.Add().Text("Item 2.1");
                subItems.Add().Text("Item 2.2");
                subItems.Add().Text("Item 2.3");
            });

            items.Add().Text("Item 3");
        })
    )

Razor

    @addTagHelper *, Kendo.Mvc

	<kendo-treeview name="treeview">
		<items>
			<treeview-item expanded="true" text="Item 1">
				<items>
                    <treeview-item text="Item 1.1"></treeview-item>
                    <treeview-item text="Item 1.2"></treeview-item>
                    <treeview-item text="Item 1.3"></treeview-item>
                </items>
			</treeview-item>
			<treeview-item text="Item 2">
				<items>
                    <treeview-item text="Item 2.1"></treeview-item>
                    <treeview-item text="Item 2.2"></treeview-item>
                    <treeview-item text="Item 2.3"></treeview-item>
                </items>
			</treeview-item>
			<treeview-item text="Item 3"></treeview-item>
		</items>
	</kendo-treeview>

C#

public static IList<HierarchicalViewModel> GetHierarchicalData()
{
    var result = new List<HierarchicalViewModel>()
    {
        new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item" },
        new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Parent item" },
        new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item" },
        new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item" },
        new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item" }
    };

    return result;
}

public IActionResult Read_TreeViewData(int? id)
{
    var result = GetHierarchicalData()
        .Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
        .Select(item => new {
            id = item.ID,
            Name = item.Name,
            expanded = item.Expanded,
            imageUrl = item.ImageUrl,
            hasChildren = item.HasChildren
        });

    return Json(result);
}

Do not use the names of the kendo.data.Node fields and methods (for example, children) as fields in the TreeView data.

Basic Configuration

The following example demonstrates how to configure the TreeView to bind to remote data and access the TreeView instance.

Razor

    @(Html.Kendo().TreeView()
        .Name("treeview")
        .DragAndDrop(true)
        .DataTextField("Name")
        .DataSource(dataSource => dataSource
            .Read(read => read
                .Action("ReadItems", "TreeView")
            )
        )
    )

    <script type="text/javascript">
        $(function () {
            // Select the TreeView element by using its "Name()" to get the client-side instance.
            var treeview = $("#treeview").data("kendoTreeView");
            console.log(treeview);
        });
    </script>

Razor

    <kendo-treeview name="treeview" drag-and-drop="true" datatextfield="Name">
        <hierarchical-datasource>
            <transport>
                <read url="@Url.Action("ReadItems", "Treeview")"/>
            </transport>
            <schema>
                <hierarchical-model id="id"></hierarchical-model>
            </schema>
        </hierarchical-datasource>
    </kendo-treeview>

    <script type="text/javascript">
        $(function () {
            // Select the TreeView element by using its "Name()" to get the client-side instance.
            var treeview = $("#treeview").data("kendoTreeView");
            console.log(treeview);
        });
    </script>

C#

    public List<HierarchicalViewModel> GetHierarchicalData()
    {
        var data = new List<HierarchicalViewModel>()
        {
            new HierarchicalViewModel() { ID = 1, ParendID = null, HasChildren = true, Name = "Parent item" },
            new HierarchicalViewModel() { ID = 2, ParendID = 1, HasChildren = true, Name = "Item 1" },
            new HierarchicalViewModel() { ID = 3, ParendID = 1, HasChildren = false, Name = "Item 2" },
            new HierarchicalViewModel() { ID = 4, ParendID = 2, HasChildren = false, Name = "Item 1.1" },
            new HierarchicalViewModel() { ID = 5, ParendID = 2, HasChildren = false, Name = "Item 1.2" }
        };
        return data;
    }

    public JsonResult ReadItems(int? id)
    {
        var result = GetHierarchicalData()
        .Where(x => id.HasValue ? x.ParendID == id : x.ParendID == null)
        .Select(item => new {
            id = item.ID,
            Name = item.Name,
            hasChildren = item.HasChildren
        });

        return Json(result);
    }

Do not use the names of the kendo.data.Node fields and methods (for example, children) as fields in the TreeView data.

Functionality and Features

Feature	Description
Data Binding	Explore the available data-binding approaches of the TreeView.
Animations	Configure different animation effects when expanding or collapsing the TreeView nodes.
Appearance	The TreeView has built-in styling options that allow you to customize its appearance.
Items	Set up the TreeView by adding items within the helper declaration.
Images	Enhance the TreeView items by adding images or sprites.
Drag and Drop	Enable the drag-and-drop feature of the component.
Checkboxes	Render the TreeView items with checkboxes.
Templates	To take full control over the rendering of the TreeView items, use templates.
Events	The component exposes various events that allow you to respond to user actions.
Accessibility	The TreeView is accessible by screen readers and provides WAI-ARIA, Section 508, WCAG 2.2, and keyboard support.

Next Steps

• Getting Started with the TreeView

• Basic Usage of the TreeView HtmlHelper for ASP.NET Core (Demo)

• Basic Usage of the TreeView TagHelper for ASP.NET Core (Demo)

• TreeView in Razor Pages

See Also

• Using the API of the TreeView for ASP.NET Core (Demo)
• Knowledge Base Section