Is there a way to dynamically change the class of a single header in slick-grid 1.4.3?

Question

I noticed that the latest version of slick-grid has a 'headerCssClass' attribute on the column, which would work great, except I am restricted to using slick-grid version 1.4.3.

I am extending slick-grid so as to add multiple column sort functionality and will need to set the class of each sort header accordingly. So, to re-iterate the question, does anyone know of a way to dynamically change the class of any given header in slick-grid 1.4.3?

score 0 · Answer 1 · edited Mar 01 '12 at 15:59

0

I think you can do this with jQuery.

Add a blank css class with some name.

Then you can call addClass and removeClass to change the class dynamically.

http://api.jquery.com/addClass/

http://api.jquery.com/removeClass/

i.e.

jQuery('.my-class').addClass('new-header-class');

edited Mar 01 '12 at 15:59

Brian Mains

50,520
35
148
257

answered Feb 28 '12 at 21:14

Craig

1,295
3
16
29

Ya, I had thought about doing that, but I think the only way I could access the correct header cell to change it's class would be to define an onClick() function for the slick-grid and override what it is currently doing if the cell happens to be a header cell -- this would probably work, except it seems to suggest potential for unknown issues. – JoughTheFun Feb 28 '12 at 21:52
Additionally, it appears that an 'onClick' event is not fired if the cell does not represent an actual item (so would not work for header cells). – JoughTheFun Feb 28 '12 at 22:27
You can call that from anywhere, it does not require onclick, as long as you have 'my-class' or whatever added to what you care about. – Craig Mar 01 '12 at 20:56

score 0 · Accepted Answer · edited Mar 01 '12 at 15:59

I don't really love this solution, as it is not preferred to use JQuery to modify the slick-grid, but here goes:

var headers = $('.slick-header-columns').get(0).children;

remove any non-default class information from all the headers(i.e., $(headers).removeClass('slick-header-column-sorted'))

iterate through the columns of the slick-grid and use JQuery to add a class at the wanted column index

var header = headers[wantedColIdx];
$(header).addClass('yourClass');

Is there a way to dynamically change the class of a single header in slick-grid 1.4.3?

2 Answers2