ASP.NET MVC Kendo DropDownTree - 过滤和按需加载

Question

我计划将 Kendo DropDownTree 集成到我们的应用程序中以展示组织层次结构。虽然建议使用 LoadOnDemand 来有效处理大型数据集，但启用它会导致过滤和显示保存的节点出现问题。出现这种情况是因为数据源不包含所有必需的数据。或者，禁用 LoadOnDemand 并加载所有数据最初会导致加载时间更长，并且当用户使用客户端筛选时可能会导致浏览器挂起。 DropDownTree不支持服务器端数据过滤。

我正在寻求有关如何解决此问题的建议。

   @(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");
                }
                );
            });
    })
  );

考虑到 LoadOnDemand 缺乏对服务器端过滤的支持，我们如何在启用 LoadOnDemand 时管理 ASP.NET MVC Kendo DropDownTree 中的过滤？

我尝试在 onFiltering 事件中更新数据源，但没有按预期工作。

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);
            }
        });
    }
}

解决这个问题的最佳方法是什么？

参考：

• 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

我们有基本相同的问题！

我们决定通过保留 LoadOnDemand 来解决此限制，但“覆盖”过滤。就像使用过滤事件和 event.preventDefault() 一样。

然后，为了使过滤对过滤器事件起作用，我们在js中执行以下操作：

• 使用相关过滤器参数调用后端
• 将后端调用的所有相关项组装到 HierarchicalDataSource 中
• 关闭 DropDownTree 的 loadOnDemand
• 将DropDownTree的数据源设置为我们刚刚创建的数据源并保存原始数据源
• -> 当用户清除过滤后，再次将原来的dataSource设置为DropDownTree的数据源，并开启loadOnDemand

附加说明：对整个 js 函数进行反跳可能是个好主意。

希望这对您有所帮助，请随时询问更多详情。