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) i开发者_StackOverflown a SlickGrid ?

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.

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

..

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

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.

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

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>

Try something like this:

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

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.

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

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"
   }

})