How can I change the "DataGrid Filter Row" filter-icon if a filter is active

[Stefan B.]

I will use a different filter-icon on the "DataGrid Filter Row" if a filter is active or not. So that the user can see which filter on the datagrid  are active or not.

How can i do this?
Is there a filter menu event to handle this?

[stworthy]

Try the code below to get the filter button.

Code:

var field = ...  // the field to find
var btn = $('#dg').datagrid('getFilterComponent', field).nextAll('a.datagrid-filter-btn');
btn.addClass(...);  // add your custom icon here

[Stefan B.]

Try the code below to get the filter button.

Code:

var field = ...  // the field to find
var btn = $('#dg').datagrid('getFilterComponent', field).nextAll('a.datagrid-filter-btn');
btn.addClass(...);  // add your custom icon here

That works to fetch the filter button. But how can I set the Event handler to the Filter menu to change the button icon, after change filter options in example fom equals to nofilter?

The following code is not working

Code:

btn.menu({
    onClick:function(item){
       console.log(item);
}});

[stworthy]

Please try to use the 'onClickMenu' event. Be sure to download the latest 'datagrid-filter.js' file from http://www.jeasyui.com/extension/datagrid_filter.php.

Code:

$('#dg').datagrid({
  onClickMenu: function(item, button){
  }
});

[Stefan B.]

Please try to use the 'onClickMenu' event. Be sure to download the latest 'datagrid-filter.js' file from http://www.jeasyui.com/extension/datagrid_filter.php.

Code:

$('#dg').datagrid({
  onClickMenu: function(item, button){
  }
});

THX for your support. This works fine and i can use it now like this

Code:

 onClickMenu:  function(item, button) {
	if (item.name == 'nofilter') {
		button.removeClass('icon-filter-active');
		button.addClass('icon-filter');
	} else {
		button.removeClass('icon-filter');
		button.addClass('icon-filter-active');
	};
};

[gordis gmbh]

Hello,

the 'onClickMenu' event applies well if you have a menu based filter.

However, if the filter is combobox based or simple textbox based - as seen in the attached png file, then I have no possiblilty to react and do some visual changes so that the user can see on which columns a filter is applied currently.

I think what we need here is a 'onDoFilter' event, with parameters that enables us for e.g. to change css style of header cell or set an icon.

Thank you.

[phunksta]

I think what we need here is a 'onDoFilter' event, with parameters that enables us for e.g. to change css style of header cell or set an icon.

I'd concur. Capturing the onclick menu doesn't apply to all filter types unfortunately.