javascript - Coloring row based on a field value in Angular UI Grid -

i'm trying color row depending on each row's field value in latest angular-ui-grid. dont have particular column definitions since columns generated dynamically.we using ui grid selection.

i have read through answers , found can using rowtemplate. here row template

rowtemplate:'<div ng-class="{ \'grey\':row.entity.locked=="true" }"> <div ng-repeat="(colrenderindex, col) in colcontainer.renderedcolumns track col.uid" class="ui-grid-cell" ng-class="{ "ui-grid-row-header-cell": col.isrowheader }"  ui-grid-cell></div></div>' 

i trying color respective row grey, if value in "locked" column "true" in it. not working. row template correct or there other way acheive ?

$scope.gridoptions={             showgridfooter: true,             data:'mydata',             paginationpagesizes: [10, 15, 20],             paginationpagesize: 10,             enablecolumnresizing: true,             rowtemplate:'<div ng-class="{ \'grey\':row.entity.locked=="true" }"> <div ng-repeat="(colrenderindex, col) in colcontainer.renderedcolumns track col.uid" class="ui-grid-cell" ng-class="{ "ui-grid-row-header-cell": col.isrowheader }"  ui-grid-cell></div></div>',              // registering  grid api              onregisterapi : function(gridapi){                  // set gridapi on scope                 $scope.gridapi = gridapi;                  // getting selected rows                 gridapi.selection.on.rowselectionchanged($scope,function(row){                     var msg = 'row selected ' + row.isselected;                     console.log(msg);                     $scope.myselectedrows= $scope.gridapi.selection.getselectedrows();                       console.log( $scope.myselectedrows);                  });              }     };  // request grid data      $http.get('ws/datareserve').success(function(data){         $scope.mydata=data;         console.log( $scope.mydata);          angular.foreach(data[0], function(value, key){              if(key=="locked"){                 $scope.gridoptions.columndefs.push({ field: key, displayname: "locked", width: 150});             }              else{                 $scope.gridoptions.columndefs.push({ field: key, displayname: key, width: 150});             }          });         //$scope.gridoptions.rowtemplate='<div style=" \'color\' : \'red\' ">'+'<div ng-repeat="(colrenderindex, col) in colcontainer.renderedcolumns track col.coldef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isrowheader }" ui-grid-cell></div>'+'</div>';      }).error(function(data){         console.log("request failed "+ $scope.gridoptions.data);     }); 

your template correct, cell styled using .ui-grid-cell-contents class, can style current template.

.grey .ui-grid-cell-contents {   background-color:red; } 

see example here http://plnkr.co/edit/gmo3e71u4gn3hwvnmp7o?p=preview