ui-grid rowTemplate: how to dynamically change row color based on column data - angular-ui-grid

Question

I have a server data embedded with values that determine the row-color.
var ngBody = angular.module ('BodySpace', [
'ui.grid', 'ngSanitize', 'ngResource'
, 'ui.grid.selection', 'ui.bootstrap'
, 'ui.grid.resizeColumns'
]);
ngBody.controller('ngController', function($scope, $http, $filter, uiGridConstants) {
angular.element(document).ready(function () {
initScope( $scope, uiGridConstants, $filter);
$scope.Get2Data();
} );
initScope( $scope, uiGridConstants, $filter);
$scope.Get2Data = function() {
$scope.uiGrid306.data = serverdata;
:
:
:
}
})
The requested data from the server has a column that controls the row color. What should I write in my row template to reference my data column that determines each row's color to render?

Answer 1

On initiating your ui-grid, you will apply a row-template in which you execute the code referencing your column data that decide the row-color - here in this example, it is _ab_x_style which stores the name of my style class.
function initGrid( $scope, uiGridConstants, $filter){
$scope.uiGrid306 = {
rowTemplate: 'rowTemp.html'
, columnDefs: [{
field: 'FIELD1', name: 'my field name', width: "7%"
, filter: { type: uiGridConstants.filter.SELECT, selectOptions: Opts }
}, { ...
}, { ...
}]
}
}
You place your rowTemp.html where your .html page is. In your rowTemp.html, you have
<div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" ui-grid-one-bind-id-grid="rowRenderIndex + '-' + col.uid + '-cell' " class="ui-grid-cell" ng-class="row.entity._ab_x_style" role="{{col.isRowHeader ? 'rowheader' : 'gridcell' }}" ui-grid-cell></div>
plunker