How To Add A Class To A Cell In Slickgrid

Does anyone has an idea how could I add 'myClass' class to some cell (for example, row 5, column 3) in a SlickGrid ?

Solution 1:

To add a specific CSS class to some of the rows, use the "rowClasses" option added recently in http://github.com/mleibman/SlickGrid/commit/26d525a136e74e0fd36f6d45f0d53d1ce2df40ed

You cannot add a CSS class to a specific cell, only to all cells in a given column - use the "cssClass" property on the column definition.

Perhaps you can use a combination of those two. Another way is to put an inner DIV inside a cell using a custom formatter and set the class there. Since you have access to row/cell within the formatter, you can decide how to render it.

Solution 2:

There is now a better way of doing this that allows you to address arbitrary individual cells:

https://github.com/mleibman/SlickGrid/wiki/Slick.Grid#wiki-setCellCssStyles

Solution 3:

..

$('.slick-cell').addClass('myClass'); // adds "myClass" to all cells...

..

$('.slick-row[row=1] .slick-cell[cell=1]').addClass('myClass'); // adds "myClass" to 2nd column of the 2nd row...

note: rows and columns are zero-based index...

Solution 4:

Tin's answer, but it's now called rowCssClasses (and is called with "undefined" a few times in addition to all the regular rows for some reason; I did a

if(row == undefined){ return'' }

just to get through that.

Solution 5:

Yes you can add class to a particular cell by using row and column number

$(getCellNode(RowNumber, ColumnNumber)).addClass("ClassName");

example:

$(getCellNode(5, 3)).addClass("invalid");