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

Title: How can I change the "DataGrid Filter Row" filter-icon if a filter is active
Post by: Stefan B. on May 02, 2014, 04:47:02 AM

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?

Title: Re: How can I change the "DataGrid Filter Row" filter-icon if a filter is active
Post by: stworthy on May 02, 2014, 08:31:46 AM

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

Title: Re: How can I change the "DataGrid Filter Row" filter-icon if a filter is active
Post by: Stefan B. on May 06, 2014, 06:25:27 AM

Quote from: stworthy on May 02, 2014, 08:31:46 AM

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);
}});

Title: Re: How can I change the "DataGrid Filter Row" filter-icon if a filter is active
Post by: stworthy on May 06, 2014, 04:09:20 PM

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){
  }
});

Title: Re: How can I change the "DataGrid Filter Row" filter-icon if a filter is active
Post by: Stefan B. on May 07, 2014, 01:25:24 AM

Quote from: stworthy on May 06, 2014, 04:09:20 PM

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');
	};
};

Title: Re: How can I change the "DataGrid Filter Row" filter-icon if a filter is active
Post by: gordis gmbh on July 23, 2015, 02:47:42 AM

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.

Title: Re: How can I change the "DataGrid Filter Row" filter-icon if a filter is active
Post by: phunksta on November 17, 2015, 10:22:35 AM

Quote from: sarathi on July 23, 2015, 02:47:42 AM

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.

EasyUI Forum

General Category => EasyUI for jQuery => Topic started by: Stefan B. on May 02, 2014, 04:47:02 AM