2016-01-21 3 views
0

Привет У меня есть простой выбор в моей MVC зрения ....Фильтрация в Telerik Кендо MULTISELECT

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

, который преобразуется в кэндо Множественный с помощью JavaScript/JQuery

$(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 

Моя проблема заключается в том, что, хотя muti-select заполняется (с более чем 5000 продуктами), выпадающий список не фильтруется как пользовательский тип. Например, если я попрошу ввести слово CAKE. Как только я набираю C, I-луч исчезает, и через секунду или два выпадающий кадр падает на короткое мгновение, а затем исчезает, очищая мультивыбор полностью. Единственный способ, который я могу заполнить в данный момент, - это ввести букву A, подождать, а затем просмотреть полный список и выбрать то, что мне нужно, повторить для каждого элемента, который мне нужен. Я что-то пропустил? Должен ли я вводить пейджинг, чтобы ограничить данные?

Благодаря

+1

Я не вижу проблем с кодом. Поэтому я считаю, что это связано с большим набором данных. Проверьте [эту ссылку] (http://www.telerik.com/forums/too-many-options-in-multiselect) - они говорят о проблемах с производительностью в случае большого набора данных. Если возможно, попробуйте указать [minLength] (http://docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#configuration-minLength) на 3 (или что-то еще) и, возможно, [autoBind] (http: //docs.telerik.com/kendo-ui/api/javascript/ui/multiselect#configuration-autoBind) на значение false, чтобы избежать загрузки исходных данных. – Ademar

ответ

0

на основе ссылок, предоставляемых Адемаром Я изменил код так, что у меня есть следующее, который работает ....

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

Я также внес поправки в свой класс продукта таким образом, чтобы он дает только список имен продуктов, которые я использую как текст тега, так и значение в мультиселективе.

Смежные вопросы