ASP.NET MVC TreeView Overview

The Telerik UI TreeView HtmlHelper for ASP.NET MVC is a server-side wrapper for the Kendo UI TreeView widget.

The TreeView displays hierarchical data in a traditional tree structure.

• Demo page for the TreeView HtmlHelper

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

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 ActionResult 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, JsonRequestBehavior.AllowGet);
}

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>

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, JsonRequestBehavior.AllowGet);
    }

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 MVC (Demo)

See Also

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