Filtering rows based on controls outside the grid

[IMF]

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!

[Dimiter Topalov]

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

[Elizabeth]

Hi - How would the filter be reset? Selecting "Select Category" is treated as a filterable value instead of reseting the data grid.

[Konstantin Dikov]

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