Filtering client side - Dropdownlist

[Luciano]

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.

[Neli]

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

[Luciano]

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]

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]

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