Filtering client side - Dropdownlist

1 Answer 34 Views
Data Source DropDownList
Luciano
Top achievements
Rank 1
Luciano asked on 08 Apr 2022, 11:55 PM

Hey guys,

Here's the thing, I have a dropdownlist populated already (use datasource in case this info is needed, since the info comes from an endpoint) and it has to be this function so that the user types anything (on an input generated by the method "filter" )and the data gets filtered, but i want to do it at the client side so in that case i wouldn't have to change any c# code. So i found out there's this method "filtering" but i didn't found an example of how to apply it, so i'm here in looking for any guidance. 

 

Hope you understand my doubt.

 

Regards.

1 Answer, 1 is accepted

Sort by
0
Neli
Telerik team
answered on 13 Apr 2022, 01:10 PM

Hello Luciano,

Please note that by default the filtering will be performed on the client unless the serverFiltering option is set to true. 

- https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/serverfiltering

You could take a look at the Dojo linked here where the serverFiltering: true is commented. If you try to filter the items in the DropDownList there will be no request sent to the remote endpoint. Once the serverFiltering: true configuration option is uncommented, a request will be performed when the user types in the search input. 

However, if you still need to apply a custom filter, you could handle the filtering event. In the event handler you could use the dataSource filter method as demonstrated below:

          filtering: function (e) {
              
              e.preventDefault()
              var customFilter = {                                
                logic: "and",
                filters: [                                    
                  { field: "ProductName", operator: "contains", value: "anton" }
                ]
              }             
              e.sender.dataSource.filter(customFilter);
            },

Here is a Dojo where this is demonstrated. 

I hope this helps.

Regards,
Neli
Progress Telerik

Virtual Classroom, the free self-paced technical training that gets you up to speed with Telerik and Kendo UI products quickly just got a fresh new look + new and improved content including a brand new Blazor course! Check it out at https://learn.telerik.com/.

Luciano
Top achievements
Rank 1
commented on 18 Apr 2022, 10:57 PM

Thanks for the help Neli.

 

 

That's the code that I've , but the issue now is that the page gets freeze i mean i have to wait for an alert from Chrome saying "Page Unresponsive". i've tried to debug and seems to me the issue is when the input is empty it keeps filtering over and over, apparently the prevent default doesn't seem to be working.

Any help would be appreciated.

 

Best regards.

Luciano
Top achievements
Rank 1
commented on 18 Apr 2022, 11:13 PM

Reading in some blogs the databound was the issue. But now i need to know how to set a value in any other way that's not using databound.
Neli
Telerik team
commented on 21 Apr 2022, 10:42 AM

Hi Luciano,

I modified the Dojo example to use the filtering event implementation described in your previous reply. However, as you could see on the Dojo example linked here the data is filtered as expected and the Chrome browser does not crash or display an 'Unresponsive' message. Could you please test the example on your end and let me know about the behavior?

May I ask you to modify the example to replicate the behavior the way it is on your side and send it back so we could take a closer look?

Looking forward to your reply.

Regards,

Neli

Tags
Data Source DropDownList
Asked by
Luciano
Top achievements
Rank 1
Answers by
Neli
Telerik team
Share this question
or