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

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?

Jenna Leaf · Accepted Answer · 2020-03-09T17:05:55.457

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

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

1 Answers1