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.

Telerik UI for Blazor Ninja image

The TreeList component is part of Telerik UI for Blazor, a professional grade UI library with 100 native components for building modern and feature-rich applications. To try it out sign up for a free 30-day 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:

Data Operations

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

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.

Templates

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

More TreeList Features

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:

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

See Also

In this article