Changing Background Color Of A Specific Row In Slickgrid?

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++) { rowI

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

functionmetadata(old_metadata) {
  returnfunction(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.

Solution 2:

Yes, one way is to simply use jQuery:

var rowNumber = 3;
$($('.grid-canvas').children()[rowNumber]).css('background-color','red');

Update

To have persistent highlighting you need to implement the getItemMetadata function. It can be done like this:

html

<divstyle="width:600px;"><divid="myGrid"style="width:100%;height:500px;"></div></div>

css

.highlight{
    background-color: #ff0000!important;
}

javascript

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

vardata = [];
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)
    };
}
data.getItemMetadata = function (row) {

    if (this[row].title == 'Task 5'){
        return {
            cssClasses: 'highlight'

        };

    }
    returnnull;

}
grid = new Slick.Grid("#myGrid", data, columns, { enableColumnReorder: false });