Kendo UI Dropdownlist 从大型数据源加载缓慢

Posted 2023-05-07

【中文标题】Kendo UI Dropdownlist 从大型数据源加载缓慢

【英文标题】：Kendo UI Dropdownlist slow loading from a large datasource

【发布时间】：2015-03-28 22:55:07

【问题描述】：

我在模板中使用 Kendo 下拉列表。它加载用于签署记录的客户端名称列表。客户端名称列表有 8k 个条目。

表单加载正常，但如果我选择下拉列表来更改客户端名称，列表显示大约需要 10 秒。我可以做些什么来加快速度吗？

我的数据源：

 var dsClients = new kendo.data.DataSource(
    transport: 
        read: 
          url: "/data/clients/key",
          dataType: "jsonp"
      ,
      parameterMap: function(options, operation) 
          if (operation === "read") 
              return options;
          
      
    ,
    serverSorting: true,
    sort: [ field: "text", dir: "asc" ]
);

我模板中的元素：

 <input name="idclt_clm" data-bind="value:idclt_clm" data-value-field="value" 
   data-text-field="text" data-option-label="Select" data-source="dsClients" 
   data-role="dropdownlist" required validationMessage="Required" /> 

【问题讨论】：

拥有 8k 个条目的 dropdownlist 有意义吗？您的用户愿意向下滚动 8k 条目吗？ autocomplete 不是更好吗？

@OnaBai 是对的。 DropDown 不是在这种情况下使用的正确小部件。

【参考方案1】：

我知道有 2 个选项。

可以添加虚拟化，我刚刚从 Kendo。

您可以关闭自动绑定并使用需要 2 个字符才能触发搜索的搜索过滤器。下面是我使用 asp.net 和 JS 的方法

@(html.Kendo() .DropDownList() .Name("GridName") .HtmlAttributes(new @class = "form-control" ) .DataSource(ds => ds.Read(read => read.Action("YourFunction","YourController").Data("filterFunction")) .ServerFiltering(true)) .MinLength(2)//number of characters for a valid search .Delay(250)//milliseconds delay to trigger search .AutoClose(false) .AutoBind(false) .IgnoreCase(true) .DataTextField("Text") .DataValueField("Value") .Placeholder("Enter at least 2 letters to search") .Filter(FilterType.Contains) )

<script> function filterFunction() return text: $("#GridName").data("kendoDropDownList").input.val() ; </script>

如果搜索仍然很慢，可以更改字符数

【参考方案2】：

好吧，如果你两个都做呢？也许不是最好的方法，但对我来说它有效。 我有一个从级联事件中获取信息的组合框，因此它会尝试任何一种方式来填充它。因此，在发送请求以填充服务器端后，我有一个客户端事件：

.Filter(Contains).MinLength(n).Filtering("Action")

这将通过 ajax 到达服务器以使用您试图填充 CB 的表/列表来捕获 Session var。然后过滤所需的列表并将其发送回您的 CB。