Problems with filtering

2 posts, 1 answers
  1. Jon
    Jon avatar
    53 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
            $("#msProducts").kendoMultiSelect({
                placeholder: "Select Product(s)",
                dataTextField: "ProductNameText",
                dataValueField: "ProductNameValue",
                dataSource: {
                    type: "json",
                    serverFiltering: true,
                    transport: {
                        read: {
                            url: "Home/Products"
                        }
                    }
                }
            });

    });

     

    My Contoller has:

        'GET: Home/Products
        <HttpGet>
        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
            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

    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? 

    Thanks

  2. Answer
    Georgi Krustev
    Admin
    Georgi Krustev avatar
    3706 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.

    Regards,
    Georgi Krustev
    Telerik
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
Back to Top