进行服务器过滤时，Kendo UI 组合框冻结答案

【问题标题】：Kendo UI combobox freezes when doing server filtering进行服务器过滤时，Kendo UI 组合框冻结
【发布时间】：2016-06-22 16:17:28
【问题描述】：

我需要绑定到组合框的大约 6000 条记录。当用户输入至少 2 个字符时，我正在对其进行服务器过滤。它第一次工作正常，但是当我清除组合框时，我的页面冻结了。

以下是我启动组合框的方式。

$("#myList").kendoComboBox({
        filter: "startswith",
        dataTextField: "xName",
        dataValueField: "xId",
        template: '<span>#:xName# (#:gName#-#:gmName#)</span>',
        dataSource: viewModel.get("mydataList"),
        height: 400,
        autoBind: false,
        minLength: 2,
    }).data("kendoComboBox");

以下是我指定数据源的方式：

mydataList= new kendo.data.DataSource({
        transport: {
            read: {
                dataType: "json",
            },
            parameterMap: function (options, operation) {
                if (operation !== "read" && options.models) {
                    return {
                        models: kendo.stringify(options.models)
                    };
                }
            }
        },
        serverFiltering: true
    }
    );

另外请建议我是否可以隐藏下拉箭头。

【问题讨论】：

你为什么要这样定义你的数据源？只需使用剃刀语法。另外，发布您执行过滤的控制器操作。
我没有其他特定代码可以进行过滤。这段代码本身就是这样做的。因此，如果我键入“AS”，它会提取所有带有“AS”的数据，但如果是删除“AS”，它会冻结。然后控件似乎尝试与所有记录绑定。
在这段代码中过滤是在哪里完成的？另外，没有任何服务器代码（控制器操作）的服务器过滤怎么能做到呢？

标签： javascript jquery asp.net-mvc kendo-ui kendo-asp.net-mvc

【解决方案1】：

您所做的不是服务器过滤。仅仅因为您设置了serverFiltering: true 并不意味着您正在执行服务器过滤。该设置只是告诉数据源您正在使用服务器过滤，但您需要实际实现它。您有 6000 条记录，数量很多，这就是您的组合框冻结的原因。此外，您使用的是 asp.net MVC，并且问题标记为 Kendo asp.net MVC，因此您应该使用 Razor 语法。以下是操作方法。

您的组合框：

@(Html.Kendo().ComboBox()
      .Name("myList")
      .DataTextField("xName")
      .DataValueField("xId")
      .Template("<span>#:xName# (#:gName#-#:gmName#)</span>")
      .Filter("startswith")
      .AutoBind(false)
      .Height(400)
      .MinLength(2)
      .DataSource(source => {
          source.Read(read =>
          {
              read.Action("GetMyList", "MyController");
          })
          .ServerFiltering(true);
      })
)

然后在您的控制器（在我的示例中为 MyConteroller）中，您将有一个返回过滤列表的操作：

public JsonResult GetMyList(string text) {
    // Here you put the logic to filter the data you had in myDataList in your question
}

【讨论】：