Problems with filtering

2 posts, 1 answers
  1. Jon
    Jon avatar
    51 posts
    Member since:
    Oct 2013

    Posted 19 Jan Link to this post

    Hi I have a simple multiselect....

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


    $(document).ready(function () {

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



    My Contoller has:

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


    My ProductsModel Class has:

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

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

    My problem is that although the muti-select gets populated (with some 5000+ products) the dropdown is not filtering as a user types. For example if I beging typing the word CAKE. As soon as I type C the I-beam disappears and after a second or two the dropdown drops for a brief moment and the disappears clearing the multi-select completely. The only way I can populate at the moment is type the letter A, wait and then scroll through the complete list and select what I need for each item I need. Have I missed something. Should I introduce paging in order to limit the data? 


  2. Answer
    Georgi Krustev
    Georgi Krustev avatar
    3689 posts

    Posted 21 Jan Link to this post

    Hello Jon,

    When serverFiltering option is enabled, then the widget (datasource in particular) will leave the filtration task to the server. Basically, the widget is instructed that it will receive the filtered source. You can examine our ServerFiltering demo: As you can in the server response contains the already filtered data. Also you can observe how the widget sends the filter value to the server used to filter the data.

    If you are using MVC wrappers, you can check this help topic: If jQuery widget is used directly (like in the posted code snippet), then the filter value is already send during the server request. You can also send additional data to the server using DataSource data callback:
    How you would implement the server filtration is entirely up to your personal preferences.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top