Changing Background Color of a Specific Row in Slickgrid

Changing background color of a specific row in slickgrid?

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.

Javascript Slickgrid, change row background on row select

It looks like you're missing a css file. When I load your sample page and look at the console, this file is missing:

http://payclix.biz/MobiusTrac/slick-default-theme.css

This piece of css would color the row for you:

.slick-row.active .slick-cell {
background-color: #FFB;
}

or with jQuery:

$(".slick-row").click( function(){
$(this).css("background-color", "#FBB");
});

Slickgrid, change row color on hover

Since you are using slickgrid the target rows will be dynamic so use event delegation to register the event handlers.

$(document).on('mouseenter', ".slick-row", function () {
$(this).css("background-color", "red");
}).on('mouseleave', ".slick-row", function () {
$(this).css("background-color", "white");
});

Also change the selector $(document) to a more specific one.

Change Row background Color of SlickGrid Table.

I have found two other stackoverflow questions that deal with background colors for rows:

  1. Unable to set CSS properties for rows in Slickgrid
  2. SlickGrid 2.0 can't change row background color in odd indexes

From those question's answers, the answer appears to be to add a getItemMetadata function to your data object. This function can then return an object literal, one of its fields being cssClasses. So if you define a CSS class named "my-row-class" that sets the background color of a table row, you can add that class to the rows in your Slickgrid using:

 data.getItemMetadata = function (index) {
return { "cssClasses": "my-row-class" };
};


Related Topics



Leave a reply



Submit