Coloring row based on a field value in Angular UI Grid

Question

I'm trying to color a row depending on each row's field value in the latest angular-ui-grid. Also we dont have any particular column definitions since all the columns are generated dynamically.We are also using ui grid selection.

I have read through some answers and found that we can do it by using rowTemplate. Here is my row Template

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>'

I am trying to color the respective row as grey, if the value in "Locked" column is "True" in it. But it is not working. Is my row template correct or is there any other way to acheive this ?

$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>',

            // 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 to get the 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 by 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);
    });

Kathir Kathir · Accepted Answer · 2015-06-29T17:15:09

Your template is correct, the cell is styled using the .ui-grid-cell-contents class, so you can style it like this with your current template.

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

See an example here http://plnkr.co/edit/GMO3e71U4gN3HWvNMp7O?p=preview

Coloring row based on a field value in Angular UI Grid

1 Answers