I need to change row color of angular ui grid based on some condition. The target is achieved in ng-grid as shown
rowTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
how to achieve the same in angular ui grid
I don't see the "viewed" as being a property of row, according the ui-grid api: http://ui-grid.info/docs/#/api/ui.grid.class:GridRow. But, if you wanted to evaluate a property in your object (assuming your data is an array of objects) it would look something like this.
You'll need this in your css to override default row coloring
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
Your styles:
.my-style-1 {
background-color: #ff0000 !important;
}
.my-style-2 {
background-color: #ffffff !important;
}
.my-style-3 {
background-color: #0000ff !important;
}
The rowTemplate:
rowTemplate: '<div ng-class="{\'my-style-1\':row.entity.Field1===1, \'my-style-2\':row.entity.Field1===2, \'my-style-2\':row.entity.Field1===3}" <div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div></div>'
//example data
data:[{'Field1': 1, 'Field2': 'abc', 'Field3': 'def'},
{'Field1': 2, 'Field2': 'hij', 'Field3': 'klm'},
{'Field1': 3, 'Field2': 'nop', 'Field3': 'qrs'}];