ASP.NET MVC Kendo DropDownTree - Filtering and LoadOnDemand

Question

I plan to integrate the Kendo DropDownTree into our application to showcase the organizational hierarchy. While LoadOnDemand is advised for handling large datasets efficiently, enabling it causes issues with filtering and displaying saved nodes. This occurs because the data source doesn't contain all the necessary data. Alternatively, disabling LoadOnDemand and loading all the data initially results in longer loading times and potential browser hang-ups when users use client-side filtering. The DropDownTree does not support server-side data filtering.

I'm seeking advice on how to address this issue.

   @(Html.Kendo().DropDownTree()
    .Name("DropDownTree")
    .Filter("Contains")
    .Checkboxes(true)
    .CheckAll(false)
    .DataTextField("Name")
    .DataValueField("id")
    .LoadOnDemand(false)
    .DataSource(source =>
    {
        source
            .Custom()
            .Type("aspnetmvc-ajax")
            .Transport(transport =>
            {
                transport.Read(x => x.Action("Read_DropDownTreeData", "DropDownTree"));
            })
            .Schema(schema =>
            {
                schema.Model(p =>
                {
                    p.Children("Items").HasChildren("hasChildren").Id("id");
                }
                );
            });
    })
  );

How do we manage filtering in the ASP.NET MVC Kendo DropDownTree when LoadOnDemand is enabled, considering its lack of support for server-side filtering?

I attempted to update the data source in the onFiltering event, but it didn't work as expected.

function onFiltering(e) {
    
    var filter = e.filter;

    if (filter.value) {
        //prevent filtering if the filter does not have value
        e.preventDefault();

        $.ajax({
            url: "@Url.Action("Read_DropDownTreeData", "DropDownTree")",
            data: {
                filterValue: filter.value
            },
            success: function (data) {              
                var dropdowntree = $("#dropdowntree").data("kendoDropDownTree");
                dropdowntree.setDataSource(data);
            }
        });
    }
}

What would be the best approach to address this issue?

Reference:

• https://www.telerik.com/forums/client-filtering-and-loadondemand
• https://www.telerik.com/forums/how-can-i-use-dropdowntree-with-a-single-databind-instead-of-numerous-requests
• https://www.telerik.com/kendo-angular-ui/components/dropdowns/dropdowntree/filtering/

Answer 1

Had basically the same issue!

We decided to work around this limitation by keeping it LoadOnDemand, but "overwriting" the filtering. As in using the filtering event and event.preventDefault().

Then, in order to make the filtering work on the filter event we do the following in js:

• call the backend with the relevant filter parameter
• assemble all relevant items of the backend call into a HierarchicalDataSource
• turn off loadOnDemand for the DropDownTree
• set the datasource of the DropDownTree to the one we just created and save the original datasource
• -> when the user clears the filtering, set the original dataSource back as the datasource of the DropDownTree again and turn on loadOnDemand

Additional note: it's probably a good idea to debounce the whole js function.

I hope this helps, feel free to ask for further details.