在 Telerik 中过滤 Kendo 多选

Question

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

<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

我的产品型号 Class 是：

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

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

谢谢

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

我还修改了我的产品 Class，以便它仅提供我在多选中用作标签文本和值的产品名称列表。

在 Telerik 中过滤 Kendo 多选

Filtering in Telerik Kendo Multiselect

javascript

asp.net-mvc

jquery

telerik

kendo-ui