Adding a css class to row based on condition; GridModel approach

Straight forward question. Do I have to use the column template? I’d much rather just add the class to the tr row. Class will be added based on data from a column in the row. I few things about my grid; I’m using GridModel approach with Remote Paging.

Thanks

Hello Erik,

By design, setting custom css to the entire grid row can be achieved by setting formatter option for each grid column in columns collection. Formatting defines how column cell values are displayed in the grid. When defining formatter function representation of the value is up to your control. Your custom css can be applied conditionally, based on some cell value since the formatter function has reference to both current cell value and entire record values.

My suggestion for achieving your requirement is to define a formatter function for every grid column. This function will render the cell based depending on the condition. For example: 

const formatter = function (val, record) {
    return (record.ID > 5) ? ("
" + val + "
") : val;
};

This would make the text in rows that have id higher than 5 red.

Then you can set the FormatterFunction the following way:

.Columns(x =>
{
    x.Columns.Add(new GridColumn() { HeaderText = "ID", Key = "ID", DataType = "number", Hidden = true });
    x.Columns.Add(new GridColumn() { HeaderText = "BP Name", Key = "BPName", FormatterFunction = "formatter" });
    x.Columns.Add(new GridColumn() { HeaderText = "Matter ID", Key = "ClientMatter", FormatterFunction = "formatter" });
    x.Columns.Add(new GridColumn() { HeaderText = "Client Name", Key = "ClientName", FormatterFunction = "formatter" });
    x.Columns.Add(new GridColumn() { HeaderText = "Matter Name", Key = "MatterName", FormatterFunction = "formatter" });
})

You can find a MVC sample with this configurations here.

In case you have additional questions don’t hesitate to ask them.

This isn’t exactly what I’m looking for. I need to change the table row color; the igGrid has its own style already applied to the cell. There is padding associated with each cell and just changing the background color of the cell level will result in the padding showing like this:

I have though, found another solution. I added a clientSide handler for the rowsRendered event.

var empGridModel = new GridModel();
empGridModel.AddClientEvent(“rowsRendered”, “rowsRenderedHandler”);

In this function I get the view data and loop through each viewable row adding the css class.

//color terminated employees
function rowsRenderedHandler(evt, ui){
var rows = ui.tbody[0].rows;
for (var i = 0; i < rows.length; i++) {
if(ui.owner.dataSource._data[i].TerminationDate != null){
$(rows[i]).addClass(‘terminated’);
}
}
}

I wish there was a specific way to handle the row Template, but it looks that RowTemplating was discontinued in a previous version. Personally I wish this was not the case as I can imagine many people would probably want to change the style of the row itself. Not only that, but having to loop through and render the style for every single cell based upon some logic expression seems very inefficient.

If you have any suggestions on how to improve my solution let me know. Thanks,

Eric

Hello Eric,
At this point column formatting, which defines how cell values are rendered in the grid, can be affected by several grid options:
•  formatter – function, which gives the opportunity to change the content of the cells
•  template– which can be used to change the tr element.
In case that these options are not sufficient for achieving your specific scenario the custom approach, that you suggested can be applied.