Changing background color of a specific row in slickgrid?

Question

is there any way to change the background color of a specific row in slickgrid table while leaving other as it is ??? i'm using

for ( var i = 0; i < grid.length; i++) {
    rowIndex[i] = {
        price : "editable-col",
        qty : "editable-col",
        ccy : "buy-row",
        side : "buy-col",
        symbol : "buy-row",
        enable : "buy-row"
    };
}
grid.setCellCssStyles("", rowIndex);

where "editable-col" , "buy-row" & "buy-col" are the CSS classes containing the color setting properties for background/foreground etc. whenever i want to change the background color of a specific row , i have to change to color of whole grid(by looping through grid length) , or if i set class for a specific row e.g.

rowIndex[5] = {
    price : "editable-col",
    qty : "editable-col",
    ccy : "buy-row",
    side : "buy-col",
    symbol : "buy-row",
    enable : "buy-row"
};
grid.setCellCssStyles("", rowIndex);

it sets the css class for the desired row but clear all css properties for other rows , to avoid this i need to reset the css classes for the other rows too which is i think not good in terms of performance and time when you have thousands of rows. just want to know is there any better way to do this without touching the other rows. ?? any help will be highly appreciated.

Answer 1

Assuming you're using Slick.Data.DataView, you can modify the getItemMetadata method to dynamically add classes to the containing row element. You can then simply setup your grid to change the row's style based on some value inside the row. Assuming your Slick.Data.DataView instance is called dataView:

dataView.getItemMetadata = metadata(dataView.getItemMetadata);

function metadata(old_metadata) {
  return function(row) {
    var item = this.getItem(row);
    var meta = old_metadata(row) || {};

    if (item) {
      // Make sure the "cssClasses" property exists
      meta.cssClasses = meta.cssClasses || '';

      if (item.canBuy) {                    // If the row object has a truthy "canBuy" property
        meta.cssClasses += ' buy-row';      // add a class of "buy-row" to the row element.
      } // Note the leading ^ space.

      if (item.qty < 1) {                   // If the quantity (qty) for this item less than 1
        meta.cssClasses += ' out-of-stock'; // add a class of "out-of-stock" to the row element.
      }

   /* Here is just a random example that will add an HTML class to the row element
      that is the value of your row's "rowClass" property. Be careful with this as
      you may run into issues if the "rowClass" property isn't a string or isn't a
      valid class name. */
      if (item.rowClass) {
        var myClass = ' '+item.rowClass;
        meta.cssClasses += myClass;
      }
    }

    return meta;
  }
}

This will allow you to dynamically add the "buy-row" class to the row. You can change the function to have multiple conditions for different classes, just remember that the CSS classes for every row will be conditional based on the row object properties. The ret.cssClasses is the key here. It is the string that'll get output in the row HTML: <div class="[ret.cssClasses]">.

You can now do something like this to change a row's classes:

var row = dataView.getItem(5);

row.canBuy = true;
dataView.updateItem(row.id, row);
// The row element should now have a class of "buy-row" on it.

row.canBuy = false;
row.qty = 0;
dataView.updateItem(row.id, row);
// It should now have a class of "out-of-stock" and the "buy-row" class should be gone.

row.qty = 10;
row.rowClass = 'blue';
dataView.updateItem(row.id, row);
// It should now have a class of "blue" and the "out-of-stock" class should be gone.