Problems with filtering

[Jon]

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

[Georgi Krustev]

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:

• http://demos.telerik.com/kendo-ui/multiselect/serverfiltering

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:

• http://docs.telerik.com/kendo-ui/aspnet-mvc/helpers/multiselect/overview#sending-parameters-to-the-server

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:

• http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-transport.read.data

How you would implement the server filtration is entirely up to your personal preferences.

Regards,
Georgi Krustev
Telerik