$customRowAttributes - Changing background-color?

[TheUFFP]

I'm not at all sure what the $customRowAttributes variable does or where custom variables are being created and passed, but is there a simple way to change a row's background-color based on the data contained in the row? For example, highlight all of the rows that don't have a value in a "Completed Date" column.

[thenderson]

I just figured this out recently, so hopefully this helps you. I added a custom renderer to the cells in the date column of my grid that formats the date the way I want it, then adds a specific class to each cell or row (depending), based on the value of the cell. CSS does the rest.

            this.setCellRenderer('due_by', new CellRenderer({ //shades row based on how soon commitment is due
                render: function(cell, value) {
                    date_due=moment(value, 'YYYY-MM-DD')
                    cell.innerHTML=date_due.format("\'YY.MM.DD");
                    row=self.grid.getRow(cell.rowIndex);
                    status=self.grid.getValueAt(cell.rowIndex, 6);
                    how_soon=date_due.diff(moment(),'days');
                    if (status == 'closed') {
                        $(row).addClass('closed');
                    }
                    else {
                        due_class = how_soon < -7 ? 'overdue_2w' : (how_soon < 0 ? 'overdue_1w' : (how_soon < 8 ? 'due_nextweek' : 'due_future'));
                        $(cell).addClass(due_class);
                    }
                }}));

[thenderson]

... and here's the (really simple) CSS that relates to the above, since someone asked and others might benefit, too:

.overdue_2w {
    background-color: rgba(221, 128, 71, .45);
}

.overdue_1w {
    background-color: rgba(216, 178, 92, .4);
}

.due_nextweek   {
    background-color: rgb(228, 228, 228);
}

[webMac]

I used the same technic with setting a CSS class when putting together my xml string for the editablegrid table.

In a switch / case statement i add the class info to the xml string when putting it together with a string builder in c#: switch(...) case ABC: XmlData.Append(String.Format("", RowId++)); . . .

[webMac]

Also, please note that these custom CSS settings implement changing row background colors for you:

    tr:nth-child(even){
        background: rgb(250, 250, 250);
    }

    tr:nth-child(odd) {
        background: rgb(240, 240, 240);
    }