This is a migrated thread and some comments may be shown as answers.

MultiSelect filter on client side

3 Answers 375 Views
MultiSelect
This is a migrated thread and some comments may be shown as answers.
Chuanlong
Top achievements
Rank 1
Chuanlong asked on 13 May 2014, 08:08 AM
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?

3 Answers, 1 is accepted

Sort by
0
Kiril Nikolov
Telerik team
answered on 13 May 2014, 12:11 PM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
0
Chuanlong
Top achievements
Rank 1
answered on 23 May 2014, 01:54 AM
Thanks for the example, it's very helpful~
0
Kiril Nikolov
Telerik team
answered on 23 May 2014, 07:55 AM
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
 
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
 
astha
Top achievements
Rank 1
commented on 19 Aug 2022, 01:27 PM

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
Telerik team
commented on 23 Aug 2022, 08:25 AM

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
Top achievements
Rank 1
commented on 24 Jan 2023, 10:12 AM

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
Telerik team
commented on 26 Jan 2023, 08:05 AM

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

Tags
MultiSelect
Asked by
Chuanlong
Top achievements
Rank 1
Answers by
Kiril Nikolov
Telerik team
Chuanlong
Top achievements
Rank 1
Share this question
or