Setting SlickGrid cell styling based on cell value

Question

How can I use SlickGrid to change the style of a cell (lets say the text color) based on the value of the cell? IE if cell value is below 50, make it green, otherwise make it red.

I've looked into getItemMetadata, but it doesn't seem to have a way to set cell specific stylings, and it also doesnt have a way to dynamic determine the class based on cell value.

Answer 1

This is how I've generally handled cell level styling in the past. Obviously, you must be using a dataview for this to work. I just keep this at the bottom of my grid setup, immediately above where I render the grid. Hope this help!

//Put this in your style sheet. 
.greenCSSclass {color:green;}
.redCSSclass {color:red;}

dataView.getItemMetadata = metadata(dataView.getItemMetadata);
var redCells= {}; 
var greenCells= {};          
function metadata(old_metadata_provider) {
      return function (row) {
          var item = this.getItem(row);
          var ret = (old_metadata_provider(row) || {});            
          if (item) {
              ret.cssClasses = (ret.cssClasses || '');
              //Include any row level CSS rules here by editing ret.cssClasses

              //Clear previous CSS rule for this cell.
              if (redCells.hasOwnProperty(row)) {
                  delete redCells[row];
              }
              if (greenCells.hasOwnProperty(row)) {
                  delete greenCells[row];
              }

              //Evaluate the value here and add to either map
              if (item.columnName < 50 ) {
                  if (!greenCells[row]) {
                      greenCells[row] = {};
                  }
                  greenCells[row]["columnName"] = "greenCSSclass";
              } else {
                  if (!redCells[row]) {
                      redCells[row] = {};
                  }
                  redCells[row]["columnName"] = "redCSSclass";
              }

              //Set Cell CSS. 
              grid.setCellCssStyles("greenCells", greenCells);
              grid.setCellCssStyles("redCells", redCells);
          }
          return ret;
      }
  }