Completed
Last Updated: 14 Nov 2023 06:19 by ADMIN
jean pierre
Created on: 09 Jul 2021 13:25
Category: TreeList
Type: Bug Report
3
Load hierarchical data on demand does not work when filtermode is set to TreeListFilterMode.FilterMenu

Hello,

Here is your code of the example "how to load hierarchical data on demand" with the option FilterMode = "@ TreeListFilterMode.FilterMenu"
As you can see if we click on a node the whole hierarchy disappears. if you remove this option all work fine

 

@* this sample shows how to load hierarchical data on demand and one way of handling no data being returned. Depending on your models and data logic you may have to tweak some checks, review the code comments for details.

*@

<TelerikTreeList Data="@Data"
                 ItemsField="@(nameof(Employee.DirectReports))"
                 HasChildrenField="@(nameof(Employee.HasChildren))"
                 OnExpand="@OnExpandHandler"
                 Pageable="true" Width="550px" Height="400px" FilterMode="@TreeListFilterMode.FilterMenu" >
    <TreeListColumns>
        <TreeListColumn Field="Name" Expandable="true" Width="220px" />
        <TreeListColumn Field="HireDate" Width="120px" />
    </TreeListColumns>
</TelerikTreeList>

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

    // load on demand through the event
    async Task OnExpandHandler(TreeListExpandEventArgs args)
    {
        Employee item = args.Item as Employee;
        if (item.HasChildren && // it is marked as having children
            (item.DirectReports == null || item.DirectReports.Count == 0) // there are no child items
            )
        {
            // request data
            var children = await GetChildren(item);

            if (children.Count > 0)
            {
                // child items exist - add them to the current item
                item.DirectReports = children;
            }
            else
            {
                // no nested data - hide the expand arrow
                item.HasChildren = false;
            }
        }
    }

    async Task<List<Employee>> GetChildren(Employee itm)
    {
        await Task.Delay(400); // simulate delay. Remove for a real app

        List<Employee> data = new List<Employee>();

        // to showcase an example of when no actual child items are returned
        // we will check for too long nesting chain with this simpe logic
        if (itm.Name.LastIndexOf("Child of") < 15)
        {
            data.Add(new Employee
            {
                Name = "Child of " + itm.Name,
                HasChildren = true
            });
        }

        return await Task.FromResult(data);
    }

    // sample model

    public class Employee
    {
        // hierarchical data collections
        public List<Employee> DirectReports { get; set; }
        public bool HasChildren { get; set; }

        // data fields for display
        public string Name { get; set; }
        public DateTime HireDate { get; set; }
    }

    // initial data generation

    protected override async Task OnInitializedAsync()
    {
        List<Employee> data = new List<Employee>();
        for (int i = 0; i < 6; i++)
        {
            data.Add(new Employee
            {
                Name = $"root: {i}",
                HireDate = DateTime.Now.AddYears(-i),
                HasChildren = true
            });
        }

        // mark an item as non-expandable (not having children)
        data[1].HasChildren = false;
        data[1].Name += "(not expandable) ";

        Data = data;
    }
}
1 comment
ADMIN
Marin Bratanov
Posted on: 11 Jul 2021 09:36

Thank you for reaching out.

 am sorry to say that the only workaround I can offer at the moment is using the FIlterRow mode (I am assuming that loading data on demand is more important than the filter UI because it usually has bigger impact on the performance).

 

Regards,
Marin Bratanov
Progress Telerik

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.