Blazor TreeList Component Overview

The Blazor TreeList component displays hierarchical data in a tabular format and allows sorting, filtering, data editing; provides item selection, templates and load on demand.

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

Download Free Trial

Creating Blazor TreeList

The TreeList supports both flat data and hierarchical data. The example below uses flat data.

1. Use the <TelerikTreeList> tag.
2. Assign the TreeList Data attribute to an IEnumerable<TItem> property. The model class TItem should have two properties that describe the parent-child relations, for example: Id (int) and ParentId (int?).
3. Set the following TreeList parameters, based on the ITem property names: IdField and ParentIdField.
4. Add some <TreeListColumn> instances inside a <TreeListColumns> tag.
5. For each column, set a Field and an optional Title.
6. Set Expandable="true" for the column that should render expand/collapse arrows.
7. (optional) Enable other features, such as Pageable, Sortable or FilterMode.

Basic TreeList

<TelerikTreeList Data="@TreeListData"
                 IdField="@nameof(Employee.Id)"
                 ParentIdField="@nameof(Employee.ParentId)"
                 Pageable="true"
                 Sortable="true"
                 FilterMode="@TreeListFilterMode.FilterMenu">
    <TreeListColumns>
        <TreeListColumn Expandable="true" Field="FirstName" Title="First Name" />
        <TreeListColumn Field="LastName" Title="Last Name" />
        <TreeListColumn Field="Position" />
    </TreeListColumns>
</TelerikTreeList>

@code {

    List<Employee> TreeListData { get; set; }

    protected override void OnInitialized()
    {
        TreeListData = new List<Employee>();

        for (int i = 1; i <= 9; i++)
        {
            TreeListData.Add(new Employee()
            {
                Id = i,
                ParentId = i <= 3 ? null : i % 3 + 1,
                FirstName = "First " + i,
                LastName = "Last " + i,
                Position = i <= 3 ? "Team Lead" : "Software Engineer"
            });
        }

        base.OnInitialized();
    }

    public class Employee
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string FirstName { get; set; }
        public string LastName { get; set; }
        public string Position { get; set; }
    }
}

Data Binding

The Telerik Blazor TreeList is datasource agnostic. You can use any database and service, according to your project. The important step is to configure the model property names, which define the data structure.

The following resources provide details and examples for data binding a TreeList:

• TreeList Data Binding Overview - general information on how data binding works
• Bind TreeList to Flat Self-Referencing Data
• Bind TreeList to Hierarchical Data - in this case, each data item may contain a nested item collection
• Load On Demand in TreeList - how to load child items only when necessary

Data Operations

The Blazor TreeList supports all fundamental data operations out-of-the-box:

• TreeList Paging
• TreeList Sorting
• TreeList Filtering

Editing

The TreeList can perform CRUD operations on its current data. It exposes events that let you control the operations and transfer changes to the actual data source. See TreeList CRUD Operations Overview for more details.

Column Features

The Treelist columns are one of its main building blocks. They offer a rich set of functionality to enable flexibility for different application scenarios.

• Bound Columns
• Column display Format for numeric and date values
• Column reordering
• Column resizing
• Column Menu to control data operations and column visibility
• How column width works
• CheckBox column
• Command column
• Frozen (Locked) columns
• UI Virtualization
• Visibility
• Autogenerated columns
• Multi-column Headers
• Column events

Templates

The various TreeList templates provide better control over the rendering of:

• data cells and data rows
• header cells
• filter menus and rows
• data editors
• no data message

More TreeList Features

• Selection - single and multiple.
• State - get or set the TreeList configuration programmatically
• Toolbar - define custom TreeList actions

TreeList Parameters

The following table lists Tree List parameters, which are not related to other features on this page. Check the TreeList API Reference for a full list of properties, methods and events.

Parameter	Type and Default Value	Description
Class	string	The additional CSS class that will be rendered to the div.k-treelist element. Use it to apply custom styles or override the theme. For example, change the TreeList font size.
Height	string	The height value in any supported CSS unit.
Navigable	bool	Whether keyboard navigation is enabled.
Width	string	The width value in any supported CSS unit. The TreeList has no default width, but expands horizontally to fill its container.

TreeList Reference and Methods

The TreeList component has methods to to execute actions such as:

• Rebind to refresh the data
• Automatically resize columns to fit their content
• Get or set the TreeList configuration state
• Get the dragged data item and its drop index from the destination TreeList

To execute these methods, obtain reference to the Grid instance via @ref.

The TreeList is a generic component.Its type depends on the type of its model and the type of its Value. In case you cannot provide either the Value or Data initially, you need to set the corresponding types to the TItem and TValue parameters.

Store the TreeList instance reference and execute methods

<TelerikButton OnClick="@AutoFit">Autofit All Columns</TelerikButton>

<TelerikTreeList @ref="@TreeListRef"
                 Data="@Data"
                 IdField="EmployeeId"
                 ParentIdField="ReportsTo"
                 Pageable="true">
    <TreeListColumns>
        <TreeListColumn Field="FirstName" Expandable="true"></TreeListColumn>
        <TreeListColumn Field="EmployeeId"></TreeListColumn>
    </TreeListColumns>
</TelerikTreeList>

@code {
    TelerikTreeList<Employee> TreeListRef { get; set; }
    public List<Employee> Data { get; set; }

    void AutoFit()
    {
        TreeListRef.AutoFitAllColumns();
    }

    protected override void OnInitialized()
    {
        Data = new List<Employee>();
        var rand = new Random();
        int currentId = 1;

        for (int i = 1; i < 6; i++)
        {
            Data.Add(new Employee()
            {
                EmployeeId = currentId,
                ReportsTo = null,
                FirstName = "Employee  " + i.ToString()
            });

            currentId++;
        }
        for (int i = 1; i < 6; i++)
        {
            for (int j = 0; j < 5; j++)
            {
                Data.Add(new Employee()
                {
                    EmployeeId = currentId,
                    ReportsTo = i,
                    FirstName = "    Employee " + i + " : " + j.ToString()
                });

                currentId++;
            }
        }
    }

    public class Employee
    {
        public int EmployeeId { get; set; }
        public string FirstName { get; set; }
        public int? ReportsTo { get; set; }
    }
}

Next Steps

• Explore Tree List data binding
• Learn about Tree List columns

See Also

• Live Demos: TreeList
• TreeList API Reference