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

【问题标题】：Kendo UI Dropdownlist slow loading from a large datasourceKendo UI Dropdownlist 从大型数据源加载缓慢
【发布时间】：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 不是在这种情况下使用的正确小部件。

标签： kendo-ui kendo-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。

【讨论】：