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

Filtering rows based on controls outside the grid

3 Answers 619 Views
Grid
This is a migrated thread and some comments may be shown as answers.
IMF
Top achievements
Rank 1
IMF asked on 03 Nov 2016, 08:13 AM

Hello, I have buil a grid in my app and I need to filter the grid using different criteria from outside the grid. I attach an scrrenshot to clarify my issue:

 

I need to select something on the combobox and filter it on the client side, as well as write something on the text box and filter teh grid below.

 

Thank you!

3 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 04 Nov 2016, 09:26 AM
Hi,

You can filter the Grid by external inputs by handling the input's (or Kendo UI widget's) change event, and create a custom filter, based on its value. Then call the dataSource.fitler() method, passing the custom filter configuration:

http://dojo.telerik.com/EKumEm/2

Here is the API reference for the DropDownList's change event and value() method, used in the example:

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#events-change

http://docs.telerik.com/kendo-ui/api/javascript/ui/dropdownlist#methods-value

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress
Build rich, delightful, *native* Angular 2 apps with Kendo UI for Angular 2. Try it out today! Kendo UI for Angular 2 (currently in beta) is a jQuery-free toolset, written in TypeScript, designed from the ground up to offer true, native Angular 2 components.
0
Elizabeth
Top achievements
Rank 1
answered on 29 Jan 2019, 02:57 PM
Hi - How would the filter be reset? Selecting "Select Category" is treated as a filterable value instead of reseting the data grid.
0
Konstantin Dikov
Telerik team
answered on 31 Jan 2019, 06:23 AM
Hi Elizabeth,

In the "change" event of the DropDownList you could check if the value is empty string and if so, apply empty filter to the Grid's dataSource:
change: function(e){
  var grid = $('#grid').data('kendoGrid');
  var field = 'CategoryID';
  var operator = 'eq';
  var value = e.sender.value();
  if(value == ""){
    grid.dataSource.filter({});
  }
  else{
    grid.dataSource.filter({
      field: field,
      operator: operator,
      value: value
    });
  }             
}

Hope this helps.

Regards,
Konstantin Dikov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
IMF
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Elizabeth
Top achievements
Rank 1
Konstantin Dikov
Telerik team
Share this question
or