0

I am working on a grid in GXT (not Ext JS) 2.4 and got stuck with this following issue.

I am trying to flag a column with a dynamic icon as soon a filter is set on it so that the user can know that he/she has applied a filter on the column. It is very similar to what is inbuilt in Excel where the a filtered icon is set on the filtered column.

I am unable to do so or find an article which points me in the right direction to get it fixed. I have tried changing the CSS as suggested in various forums but didn't help. The CSS change does equally impact all the headers though. All I want is for the filtered column to be different than the others.

Any help would be much appreciated. I will go to the extent of saying to consider me a newbie and giving me a step-by-step instruction on how to get it fixed. Sorry, if I sound too desparate but I am and I think I may have spent a little too much time figuring this out.

Thank you

1 Answers1

1

GXT 2 already has this functionality, you can take a look at the Filter Grid Demo. bold and italic are used for filtered columns by default, here is the snippet from gxt-all.css

.x-grid3-hd-row .x-filtered-column {
    font-style: italic !important;
    font-weight: bold !important;
}

You need to override this css definition to have your own styles applied.

Eliran Malka
  • 15,821
  • 6
  • 77
  • 100
udalmik
  • 7,838
  • 26
  • 40
  • Apologies for the late response. Thanks for your reply. I have checked this in my CSS and there doesn't seem to be an entry like this. I believe this has been deprecated or removed in 2.4. I have finally ended up adding an asterisk to the header label as soon a filter event is fired. It is not elegant but does the job just fine. The project has successfully gone through UAT and will go live in a few days from now. Thanks all for your help. – user1847252 Apr 02 '13 at 10:48