Search code examples
javascriptslickgrid

dynamically add css class to row


I'm using SlickGrid and want to add dynamically a css class to a row, or cell in a row.

This approach adds the class highlight to the column Name in row 0:

grid.setCellCssStyles("highlight", {
   0 : {
       Name: "highlight",
       }
 });

Whereas I want to achieve to set the css class to a row defined in another variable. I tried it as seen below, but it is not working:

row = 0;
grid.setCellCssStyles("highlight", {
    row : {
        Name: "highlight",
        }
});

Solution

  • Try:

    var row=0;
    var obj={};
    obj[row]={Name:"highlight"};
    grid.setCellCssStyles("highlight",obj);
    

    Explanation: When JS reads "row: ..." as a key value pair, it creates a property called row on the object and assigns to that, instead of evaluating the variable row and using its value as the key. This is due to JSON syntax, and I do not know of a way to circumvent this. However, javascript objects are also accessible as associative arrays, which means you can pull the trick I did above: set the (evaluation of row) property of obj to whatever value you require.