Is it possible to color rows based on their field values in the latest angular-ui-grid when all columns are generated dynamically and row selection is enabled?
I have come across suggestions to use a rowTemplate for this purpose. Here is an example of a row template that I am trying to implement:
rowTemplate:'<div ng-class="{ \'grey\':row.entity.Locked=="True" }"> <div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.uid" class="ui-grid-cell" ng-class="{ "ui-grid-row-header-cell": col.isRowHeader }" ui-grid-cell></div></div>'
The goal is to color a row grey if the value in the "Locked" column is set to "True". However, this approach does not seem to be working as expected. Is the row template correct or is there a better way to achieve this functionality?
$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 by col.uid" class="ui-grid-cell" ng-class="{ "ui-grid-row-header-cell": col.isRowHeader }" ui-grid-cell></div></div>',
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);
});
}
};
$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});
}
});
}).error(function(data){
console.log("Request failed "+ $scope.gridOptions.data);
});