How to add a class to a cell in SlickGrid

Question

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

Answer 1

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

Answer 2

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.

Answer 3

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

Answer 4

Best way I've found is to add an 'asyncPostRender' property to the column formatter. This allows you to specify a function that will be called asynchronously after the cell is rendered. In that function you have access to the cell node and row data. This operates on an individual cell, and not the entire column of cells.

var columns = [
   { 
       id:'customer', 
       name:'Customer', 
       asyncPostRender: myObject.styleCustCell 
   }
];

myObject.styleCustCell = function(cellNode, row, rowData, columnsObject) {
    $(cellNode).addClass('myCustomerCssClass');
};

Answer 5

Try something like this:

$(function(){
 $('#element_id tr:eq(4)', '#element_id tr td:eq(2)').addClass('myClass');
});

Answer 6

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.