ASP.NET Core TreeList Overview

The TreeList is part of Telerik UI for ASP.NET Core, a professional grade UI library with 110+ components for building modern and feature-rich applications. To try it out sign up for a free 30-day trial.

Download Free Trial

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

The TreeList enables the display of self-referencing tabular data and allows sorting, filtering, and data editing.

• Demo page for the TreeList HtmlHelper

• Demo page for the TreeList TagHelper

Initializing the TreeList

The following example demonstrates how to define the TreeList.

The TreeList distinguishes the root items based on the ParentId field. If the ParentId is set as .Nullable(true), root items with be items whose ParentId field values are null. If the ParentId is not nullable (.Nullable(false)), root items will be items which have a default value for their data type.

    @(Html.Kendo().TreeList<Kendo.Mvc.Examples.Models.TreeList.EmployeeDirectoryModel>()
        .Name("treelist")
        .Columns(columns =>
        {
            columns.Add().Field(f => f.FirstName).Width(250).Title("First Name");
            columns.Add().Field(e => e.LastName).Title("Last Name");
            columns.Add().Field(e => e.Position);
            columns.Add().Field(e => e.Extension).Title("Ext").Format("{0:#}");
        })
        .DataSource(dataSource => dataSource
            .Read(read => read.Action("Index", "EmployeeDirectory"))
            .Model(m => {
                m.Id(f => f.EmployeeId);
                m.ParentId(f => f.ReportsTo).Nullable(true);
                m.Field(f => f.FirstName);
                m.Field(f => f.LastName);
                m.Field(f => f.ReportsTo);
            })
        )
    )

    <kendo-treelist name="treelist">
        <columns>
            <treelist-column field="FirstName" width="250px" title="First Name"></treelist-column>
            <treelist-column field="LastName" title="Last Name"></treelist-column>
            <treelist-column field="Position"></treelist-column>
            <treelist-column field="Extension" title="Ext" format="{0:#}"></treelist-column>
        </columns>
        <treelist-datasource>
            <transport>
                <read url="@Url.Action("Index","EmployeeDirectory")"/>
            </transport>
            <schema data="Data" total="Total" errors="Errors">
                <treelist-model id="EmployeeId" parent-id="ReportsTo">
                    <fields>
                        <field name="EmployeeId" type="number"></field>
                        <field name="ReportsTo" nullable="true"></field>
                        <field name="FirstName" type="string"></field>
                        <field name="LastName" type="string"></field>
                        <field name="Position" type="string"></field>
                        <field name="Extension" type="number"></field>
                    </fields>
                </treelist-model>
            </schema>
        </treelist-datasource>
    </kendo-treelist>

    public class EmployeeViewModel
    {
        // The Id.
        public int EmployeeID { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        // A nullable ParentId.
        public int? ReportsTo { get; set; }

        public string Address { get; set; }

        // This is a case-sensitive property. Define it only if you want to use lazy-loading.
        // If it is not defined, the TreeList will calculate and assign its value on the client.
        public bool hasChildren { get; set; }
    }

 public JsonResult All([DataSourceRequest] DataSourceRequest request)
    {
        var result = GetDirectory().ToTreeDataSourceResult(request,
            e => e.EmployeeId,
            e => e.ReportsTo,
            e => e
        );

        return Json(result);
    }

    public async Task<JsonResult> TreeList_Read([DataSourceRequest] DataSourceRequest request)
    {
        var northwind = new NortwindEntities();

        var result = await northwind.Employees.ToTreeDataSourceResultAsync(request,
            employee => employee.EmployeeID,
            employee => employee.ReportsTo,
            employee => e
        );

        return Json(result);
    }

Functionality and Features

Feature	Description
Ajax binding	You can bind the TreeList to remote data.
Editing	The TreeList supports various editing modes that allow you to control the way the data is represented.
Paging	Use the built-in paging functionality to paginate the data.
Grouping with aggregates	The TreeList allows you to display built-in aggregate calculations, when the supplied data is grouped.
Excel	The control enables you to export its content to Excel.
PDF	You can export the content of the TreeList to PDF with this built-in functionality.
Column enhancements	The TreeList allows you to set locked (frozen) columns, which remain visible while you scroll the TreeList horizontally.
Scrolling	You can independently control vertical and horizontal scrolling in the component.
Row Selection	The TreeList supports different modes of row selection.
Localization	The control provides localization of its messages.
Accessibility	The TreeList is accessible for screen readers, supports WAI-ARIA attributes, and delivers keyboard shortcuts for faster navigation.

Next Steps

• Getting Started with the TreeList

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

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

• TreeList in Razor Pages

See Also

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