Question

您好我的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，等待，然后滚动完整列表并选择我需要的内容，重复我需要的每个项目。我错过了什么吗？我应该引入分页以限制数据吗？

由于

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

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

在Telerik Kendo Multiselect中过滤

1 个答案: