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 ?

I found an efficient way to do this, please see my answer below: http://stackoverflow.com/a/36562844/218294 — Sam Watkins, Apr 12 '16 at 03:08

score 11 · Accepted Answer · answered Apr 30 '10 at 05:13

11

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.

answered Apr 30 '10 at 05:13

Tin

9,082
2
34
32

Yes, combining the two works. I used this to set a background color that covered more of the cell than a formatter could provide. – zweiterlinde Jul 05 '10 at 18:29
This disappeared from 1.x and now exists in the (alpha) 2.x branch as `rowCssClasses`. – Beau Sep 13 '11 at 23:42

score 7 · Answer 2 · answered Aug 23 '13 at 16:59

7

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

answered Aug 23 '13 at 16:59

olleicua

2,039
2
21
33

That the way i do it .Then I use syncGridCellCssStyles function from this [link](https://github.com/mleibman/SlickGrid/wiki/DataView) – michaelBehan Feb 12 '18 at 05:03

score 5 · Answer 3 · answered Apr 30 '10 at 03:52

5

..

$('.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...

answered Apr 30 '10 at 03:52

Reigel Gallarde

64,198
21
121
139

Do you think this can be done somehow before I call to grid = new Slick.Grid($("#table"), data, columns, options); ? – Misha Moroshko Apr 30 '10 at 04:25
9

This will not work since the rows are dynamically created and removed, and the above code will only affect the DOM nodes currently displayed. – Tin Apr 30 '10 at 05:09

score 1 · Answer 4 · answered Jun 09 '10 at 19:57

1

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.

answered Jun 09 '10 at 19:57

Milan Iliev

6,546
1
15
13

score 1 · Answer 5 · edited Jul 22 '15 at 12:53

1

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

edited Jul 22 '15 at 12:53

Rüdiger Herrmann

20,512
11
62
79

answered Jul 22 '15 at 12:49

Hashim Khalil Ahmad

11
1

Sam Watkins · Answer 6 · 2016-04-12T04:02:49.687

I want to change the background colour in a large number of cells depending on the value in the cell. I want to calculate the style from the value, when the cell is displayed, not in advance. asyncPostRender is too slow. I don't want to change the SlickGrid code.

I was able to set cell style based on value using a custom formatter, setTimeout, and the grid.getCellNode(row, cell) function. setTimeout is needed so that we can set the cell style after the cells have been added to the DOM.

Here's an example based on the SlickGrid example #1. The % Complete cells are shaded red when <= 25% complete, and green when >= 75% complete, otherwise yellow. This example uses custom CSS styles, but it's also possible to add a CSS class to each cell. SlickGrid implements its cells as div elements, not td elements. The example also demonstrates passing "grid" to a formatter, using a closure and explicit initialization. This is needed if you have multiple grids on one page. Sorry, the example is not very short!

Here is the same example in a JSFiddle.

var grid;

var post_format_timeout;
var post_format_cells = [];

function highlight_completion(grid, row, cell, value, cellNode) {
  var $c = $(cellNode);
  if (value <= 25)
      col = '#ff8080';
  else if (value >= 75)
      col = '#80ff80';
  else
      col = '#ffff80';
  $c.css('background-color', col);
}

function post_format() {
  var n = post_format_cells.length;
  for (var i=0; i<n; ++i) {
    var info = post_format_cells[i];
    var grid = info[0];
    var row = info[1];
    var cell = info[2];
    var value = info[3];
    var highlight_fn = info[4];
    var cellNode = grid.getCellNode(row, cell);
    highlight_fn(grid, row, cell, value, cellNode);
  }
  post_format_timeout = null;
  post_format_cells = [];
}

function post_format_push(info) {
  if (!post_format_timeout) {
    post_format_timeout = setTimeout(post_format, 0);
    post_format_cells = [];
  }
  post_format_cells.push(info);
}

function format_completion(grid, row, cell, value, colDef, dataContext) {
  post_format_push([grid, row, cell, value, highlight_completion]);
  return grid.getOptions().defaultFormatter(row, cell, value, colDef, dataContext);
}

$(function () {
  var data = [];
  for (var i = 0; i < 500; i++) {
    data[i] = {
      title: "Task " + i,
      duration: "5 days",
      percentComplete: Math.round(Math.random() * 100),
      start: "01/01/2009",
      finish: "01/05/2009",
      effortDriven: (i % 5 == 0)
    };
  }

  var my_format_completion = function(row, cell, value, colDef, dataContext) {
    return format_completion(grid, row, cell, value, colDef, dataContext);
  }

  var columns = [
    {id: "title", name: "Title", field: "title"},
    {id: "duration", name: "Duration", field: "duration"},
    {id: "%", name: "% Complete", field: "percentComplete", formatter: my_format_completion},
    {id: "start", name: "Start", field: "start"},
    {id: "finish", name: "Finish", field: "finish"},
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven"}
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
    explicitInitialization: true
  };

  grid = new Slick.Grid("#myGrid", data, columns, options);
  grid.init();
});

<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.grid.css" type="text/css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
<link rel="stylesheet" href="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/examples/examples.css" type="text/css"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/lib/jquery.event.drag-2.2.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.core.js"></script>
<script src="https://cdn.rawgit.com/6pac/SlickGrid/2.2.6/slick.grid.js"></script>

<div id="myGrid" style="width:500px; height:180px;"></div>

getCellNode did it for me. Thanks! – Hoàng Long Sep 22 '16 at 08:01 — Hoàng Long, Sep 22 '16 at 08:01

score 0 · Answer 7 · answered Feb 07 '13 at 17:22

As mentioned earlier you can use cssClass property to add a CSS class to all the cells of a column (excluding header). cssClass is a string property but you can modify the slick grid code a bit to make it behave like a function/string instead and then you can add conditional classes to individual cells. Here's an example (SlickGrid v2.1)

// Modify the appendCellHtml function and replace

var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
      (m.cssClass ? " " + m.cssClass : "");

with

 var cssClass = $.isFunction(m.cssClass) ? m.cssClass(row, cell, null /* or value */, m, d) : m.cssClass;
  var cellCss = "slick-cell l" + cell + " r" + Math.min(columns.length - 1, cell + colspan - 1) +
      (cssClass ? " " + cssClass : "");

and then use cssClass exactly like a formatter.

score 0 · Answer 8 · answered Jul 15 '13 at 16:43

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

score 0 · Answer 9 · answered Apr 30 '10 at 06:36

0

Try something like this:

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

answered Apr 30 '10 at 06:36

Sarfraz

377,238
77
533
578

score 0 · Answer 10 · answered Jan 24 '18 at 18:38

From the link posted by Olleicua:

Suppose you have a grid with columns:

["login", "name", "birthday", "age", "likes_icecream", "favorite_cake"]

...and you'd like to highlight the "birthday" and "age" columns for people whose birthday is today, in this case, rows at index 0 and 9. (The first and tenth row in the grid).

.highlight{ background: yellow } 

 grid.setCellCssStyles("birthday_highlight", {
 0: {
    birthday: "highlight", 
    age: "highlight" 
   },

  9: {
     birthday: "highlight",
     age: "highlight"
   }

})

How to add a class to a cell in SlickGrid

10 Answers10

Linked