如何在 Kendo Blazor TreeList 元素中获取一棵树？

Question

I have a list of items TechDocBranch that I want to represent as a tree in Kendo Blazor TreeList .

public class TechDocBranch
{
    public long ID { get; set; }
    public long ParentID { get; set; }
    public string Title { get; set; }

    // some another fields
}

I wrote the following code:

<TelerikTreeList Data="@TechDocBranches"
                 IdField="@nameof(TechDocBranch.ID)"
                 ParentIdField="@nameof(TechDocBranch.ParentID)">
    <TreeListColumns>
        <TreeListColumn Field="@nameof(TechDocBranch.ID)"></TreeListColumn>
        <TreeListColumn Field="@nameof(TechDocBranch.Title)"></TreeListColumn>
        <TreeListColumn Field="@nameof(TechDocBranch.ParentID)"></TreeListColumn>
    </TreeListColumns>
</TelerikTreeList>

@code {
    public List<TechDocBranch> TechDocBranches;

    protected override async Task OnInitializedAsync()
    {
        TechDocBranches = await ProductionService.GetTechDocBranches();
    }
}

But it gave me a simple table, not a tree . I tried using TreeView (only html changed):

<TelerikTreeView Data="@TechDocBranches">
    <TreeViewBindings>
        <TreeViewBinding 
                         IdField="@nameof(TechDocBranch.ID)" 
                         TextField="@nameof(TechDocBranch.Title)" 
                         ParentIdField="@nameof(TechDocBranch.ParentID)">
        </TreeViewBinding>
    </TreeViewBindings>
</TelerikTreeView>

and it works correct and gives me the tree.

What should I do to get the tree in TreeList?

Answer 1

You must add expandable property for any column to solve this problem. For example:

<TreeListColumn Field="@nameof(TDB.ID)" Expandable="true"></TreeListColumn>

PS Please note that Kendo TreeList unlike Kendo TreeView works slow with large data size. (Version 2.18 for Blazor)