Telerik Kendo Multiselect 中的过滤答案

【问题标题】：Filtering in Telerik Kendo MultiselectTelerik Kendo Multiselect 中的过滤
【发布时间】：2016-01-21 08:01:18
【问题描述】：

您好，我的 mvc 视图中有一个简单的选择......

<select id="msProducts" multiple style="width:100%;"></select>

使用 Javascript/JQuery 转换为 Kendo Multiselect

$(document).ready(function () {

        //products multi-select
        $("#msProducts").kendoMultiSelect({
            placeholder: "Select Product(s)",
            dataTextField: "ProductNameText",
            dataValueField: "ProductNameValue",
            dataSource: {
                type: "json",
                serverFiltering: true,
                transport: {
                    read: {
                        url: "Home/Products"
                    }
                }
            }
        });

});

我的控制器有：

'GET: Home/Products
<HttpGet>
Function Products() As JsonResult
    Dim DiaryProductList As List(Of ProductsModel) = ProductsModel.GetProducts
    Return Json(DiaryProductList , JsonRequestBehavior.AllowGet)
End Function

我的 ProductsModel 类是：

Public Class ProductsModel

    Public Property ProductNameText As String

    Public Property ProductNameValue As String

    Public Shared Function GetProducts() As List(Of ProductsModel)
        Dim ProductList = New List(Of ProductsModel)
        Dim dc As New DBDataContext
        Try
            Dim ProductsQuery = (From pIn dc.Products
                                Where p.ProductStatus <> "discontinued"
                                Select New With {.ProductNameValue = p.ProductName,
                                    .ProductNameText = p.ProductName}).OrderBy(Function(lst) lst.ProductNameValue)
            For Each r In ProductsQuery
                ProductList.Add(New ProductsModel() With {.ProductNameValue = r.ProductNameValue,
                                  .ProductNameText = r.ProductNameText})
                Next

           Catch ex As Exception
                ProductList.Add(New ProductsModel() With {.ProductNameValue = "",
                                  .ProductNameText = ex.Message})
            Finally
                dc.Connection.Close()
            End Try
            Return ProductList
    End Function
End Class

我的问题是，尽管填充了多选（包含大约 5000 多种产品），但下拉菜单并未作为用户类型进行过滤。例如，如果我开始输入单词 CAKE。一旦我键入 C，工字梁就会消失，一两秒后，下拉菜单会短暂下降，然后消失，完全清除多选。目前我可以填充的唯一方法是输入字母 A，等待然后滚动完整列表并选择我需要的内容，重复我需要的每个项目。我错过了什么吗？我应该引入分页以限制数据吗？

谢谢

【问题讨论】：

我认为您的代码没有任何问题。所以我的观点是，这是因为数据集很大。检查this link - 他们谈论大型数据集的性能问题。如果可以，请尝试将 minLength 指定为 3（或其他），也许将 autoBind 指定为 false 以避免初始数据加载。

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

【解决方案1】：

根据 Ademar 提供的链接，我更改了我的代码，以便我有以下工作......

//products multi-select


    // ms datasource
    var ms_dataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: "Home/Products",
                type: "GET",
                dataType: "json"
            }
        },
        schema: {
            model: {
                fields: {
                    "ProductName": {
                        type: "string"
                    }
                }
            }
        }
    });

    // ms widget options
    var ms_options = {
        autoBind: false,
        minLength: 4,
        maxSelectedItems: 25,
        dataTextField: "ProductName",
        dataValueField: "ProductName",
        filter: "contains",
        placeholder: "Select Product(s)",
        dataSource: ms_dataSource
    };

    // create ms widget
    $("#msProducts").kendoMultiSelect(ms_options);

我还修改了我的产品类，以便它只提供一个产品名称列表，我将其用作多选中的标签文本和值。

【讨论】：