Assigning CSS Style to SlickGrid Row

Question

I have a slickgrid that displays a limited amount of data to the user. If there is data in a hidden column, I want the row to be bolded. I am not using a dataview, thus the getItemMetadata function is not available. I've tried this from another SO post:

var selectedRow = gridB.getSelectedRows();
item["Filter"] = filter;
var obj = {};
obj[selectedRow]={Name:"highlight"};
gridB.setCellCssStyles("highlight",obj);
gridB.updateRow(item);
gridB.invalidateRow(selectedRow);
gridB.render();

But it does nothing. Then I tried this from yet another post:

var selectedRow = gridB.getSelectedRows();
var item = gridB.getDataItem(selectedRow);
item["Filter"] = filter;
var modifiedCells = {};
modifiedCells[selectedRow][1] = "highlight";
gridB.setCellCssStyles("highlighted", modifiedCells);
gridB.updateRow(item);
gridB.invalidateRow(selectedRow);
gridB.render();

which just threw errors.

How can this be accomplished when not using a dataview?

Origineil Origineil · Accepted Answer · 2015-02-26T18:31:42

The getItemMetadata(index) function is not just available from within the Dataview, it is part of the interface of the data passed into the grid constructor. The consideration is that if you were to be using a Dataview, you would need to accommodate it.

<link rel="stylesheet" type="text/css" href="http://mleibman.github.io/SlickGrid/slick.grid.css">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.min.js"></script>
<script src="http://mleibman.github.io/SlickGrid/lib/jquery.event.drag-2.2.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.core.js"></script>
<script src="http://mleibman.github.io/SlickGrid/slick.grid.js"></script>
<style>
.alternate_row {
background: #A8A8A8;
}
</style>
<div id="myGrid" style="width:600px;height:500px;"></div>
<script>
var grid;
var data = [];
var columns = [{
    id: "server",
    name: "Server",
    field: "server",
    width: 180
}];
for (var i = 0; i < 2; i++) {
    columns.push({
        id: "id" + i,
        name: "Id" + i,
        field: i
    });
}
var options = {
    editable: false, 
    enableCellNavigation: true
};
$(function () {
    for (var i = 0; i < 5; i++) {
        var d = (data[i] = {});

        if (0 == i % 2) {
            d.hiddenColumn = '1'
        }

        d.server = "Server " + i;
        for (var j = 0; j < columns.length; j++) {
            d[j] = Math.round(Math.random() * 100);
        }
    }

    data.getItemMetadata = function (row) {
         
        return data[row].hiddenColumn ? {
            cssClasses: 'alternate_row'
        } : {}
    }
  
    grid = new Slick.Grid("#myGrid", data, columns, options);
    
});
</script>

Assigning CSS Style to SlickGrid Row

1 Answers