MultiSelect filter on client side

[Chuanlong]

Hi Experts,

I implement my page using MultiSelect controller, I request the data by using ajax request. The data item number is too large, so I want to implement a filter on the client side

1. The total select options are 10000.
2. By default in MultiSelect controller show 500.
3. When type in MultiSelect input controller, can dynamic filter in the 10000 options and show at most 500 in the options.

There is no example to do this, but there is a similar example to do filter on server side. Can you show me a example?

[Kiril Nikolov]

Hi Chuanlong,

You can manually filter the dataSource on the client using the respective filter() method of the Kendo UI DataSource and the values that you want to filter. I have prepared an example showing it:

http://jsbin.com/poyar/1/edit

Regards,
Kiril Nikolov
Telerik

 

 

[Chuanlong]

Thanks for the example, it's very helpful~

[Kiril Nikolov]

Hello Chuanlong,

I am happy to hear that the example was helpful.

In case you have any other questions, please do not hesitate to contact us.

Regards,
Kiril Nikolov
Telerik

 

 

[astha]

Hi i have same type of requirement, but i am not able to see anything benefical in this example. am i missing something . because it is showing just multiselect declaration for me

[Neli]

Hi,

I used the snippet in the previous reply by Kiril Nikolov to prepare the Dojo linked here in order for the example to use the latest Kendo version. Also, I prepared a Dojo where a remote dataSource is used. However, in both examples, the dataSource filter method is used:

var multiselect = $("#products").data("kendoMultiSelect").dataSource
        .filter( { field: "ProductName", operator: "contains", value: "che" });

- https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/methods/filter

After using the filter method, only the items that corresponds to the filter condition will be displayed in the MultiSelect widget. You could test the behavior by removing the filter (marked in yellow above).

Take a look at the provided examples and let me know in case you have additional questions.

Regards,

Neli

large

[astha]

Hi experts,

I have one query about multiselect filtering . I have big chunk of data , so i am currently using server side filtering. But i have one another requirement. As per my requirement if i am entring some value in mutltiselect with , then if it does not exist then it should get selected as multiselect value. When i was using client side filtering , it was working fine . But  after server side filtering it is not working . Below is the code for multiselect :-

 @(Html.Kendo().MultiSelect()
                    .Name("multiselect")

                    .DataTextField("SiteName")
                    .DataValueField("HCOID")

                    .Placeholder("Enter a Site Name")

                    .Filter("startswith")
                    .Height(520)
                    .Enable(false)

                    .DataSource(source =>
                    {
                        source.Custom()
                        .ServerFiltering(true)
                        .ServerPaging(true)
                        .PageSize(200)
                        .Type("aspnetmvc-ajax") //Set this type if you want to use DataSourceRequest and ToDataSourceResult instances
                        .Transport(transport =>
                        {
                            transport.Read("Sites_Read", "OCSMaintenance");
                        })
                        .Schema(schema =>
                        {
                            schema.Data("Data") //define the [data](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.data) option
                        .Total("Total"); //define the [total](http://docs.telerik.com/kendo-ui/api/javascript/data/datasource#configuration-schema.total) option
                        });
                    })
                    //.Virtual(v => v.ItemHeight(26).ValueMapper("valueMapper"))
                    .Events(e => e
                    .Change("multiselect_change").DataBound("multiselect_databound").Filtering("multiselect_filtering")))

 

 

in multiselect_filtering function i am doing below changes -

 function multiselect_filtering(e) {
                    //get filter descriptor
                    var filter = e.filter;
                    if (filter.value != undefined) {
                        if (filter.value.indexOf(",") > 0) {
                            debugger;
                            var that = this;
                            var newtag = filter.value.replace(",", "");
                            var values = that.value().toString().slice();

                            that.dataSource.filter({});
                            that.dataSource.serverFiltering = false;

                            e.preventDefault();
                            // this.dataSource.pagesize = 80;

                            that.dataSource.add({ SiteName: newtag, HCOID: newtag });

                            var add = [newtag];

                            if (values.length > 0) {
                                var merge = $.merge(add, values);
                                that.value($.unique(merge));
                            } else {

                                that.value(add);
                            }

                            that.trigger("change");


                        }
                        else {
                            debugger;
                            var that = this;
                            that.dataSource.filter({filter});
                            that.dataSource.serverFiltering = true;
                            that.trigger("change");
                        }
                    }
                    var multiselect = $("#multiselect").data("kendoMultiSelect");
                    if (multiselect != undefined) {
                        _savedOld = multiselect.value();

                    }
                }

 

 

 var _savedOld = "";

    function multiselect_change(e) {

                    if (document.getElementById('errordiv') != undefined) {
                    errordiv.style.display = 'none';
        }

                    var previous = _savedOld;
                    var current = this.value().toString();
                    var diff = [];
        if (previous) {

                        //check for removed selected items
                        diff = $(previous).not(current).get();
                        if (diff.length > 0) {

                        } else {
                            //check for new selected items
                            diff = $(current).not(previous).get();
                            if (diff.length > 0) {

                            }
                        }
                        this.refresh();
                    }
                    _savedOld = current.toString().slice(0);
                }

 

 

let me know how can i handle this.

Thanks

                                             

[Neli]

Hi Ashta,

As far as I see in your scenario you are using Telerik UI for ASP.NET Core/MVC wrappers. Thus, I would suggest you to post the question in the resepctive forum:

- https://www.telerik.com/forums/aspnet-core-ui

- https://www.telerik.com/forums/aspnet-mvc

Regards,

Neli