Custom color of selected row in angular-ui-grid

Question

I want to change the cell/row colors of an angular-ui-grid. From the documentation it seems I should use the cellClass for this. I want two colors for a striped look and another color for the currently selected row.

In my columnDefs I use a function to determine the proper cellClass. This works perfect on first load.

$scope.getCellClass = function (grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.isSelected)
        return 'my-grid-cell-selected';

    if ((rowRenderIndex % 2) == 0) {
        return 'my-grid-cell1';
    }
    else {
        return 'my-grid-cell2';
    }
}

$scope.gridOptions = {
    enableRowSelection: true,
    enableRowHeaderSelection: false,        
    multiSelect: false,
    columnDefs: [
      { field: 'EventDate', cellClass: $scope.getCellClass },
      ...
    ]
};

I don't know, however, how to update the cellClass of all cells of the selected row. I have the following code that I thought would update the selected row but nothing happens although I can see that it is called.

$scope.gridOptions.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    gridApi.selection.on.rowSelectionChanged($scope, function(row){
        //??????
        gridApi.core.notifyDataChange(uiGridConstants.dataChange.ROW);
    });

};

Without my cellClasses the selected row gets colored differently.

Any idea how to achieve a customized color for the selected row?

Answer 1

Here's the way to do it with CSS:

.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell {
  color: #fff;
  background-color: blue;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd) .ui-grid-cell.ui-grid-cell-focus,
.ui-grid-row-selected.ui-grid-row:nth-child(even) .ui-grid-cell.ui-grid-cell-focus {
  outline: 0;
  background-color: blue;
} 

.ui-grid-row-selected.ui-grid-row:nth-child(odd):hover .ui-grid-cell,
.ui-grid-row-selected.ui-grid-row:nth-child(even):hover .ui-grid-cell {
  color: #fff;
  background-color: blue;
} 

Answer 2

The best and easiest way to do this in my opinion is use the provided ui-grid customizer!

Specifically what you're looking for to change the background color for odd vs even rows is to change the @rowcoloreven and @rowcolorodd fields.

To change the color of the currently selected row, update in the customizer the @focusedcell property and in addition follow this tutorial and/or look at the second controller in this plunker to extend your selection from a single cell to the entire row.

I have also created a new plunker which shows how to implement row selection as well as how to change the row color defaults. Yes I know it's truly garish coloring - I thought it would help to really get the point across :). You can see in custom.css what is actually different from the uncustomized ui-grid css is

.ui-grid-row:nth-child(odd) .ui-grid-cell {
  background-color: #ffff33;
}
.ui-grid-row:nth-child(even) .ui-grid-cell {
  background-color: #ff22ff;
} 



.ui-grid-cell-focus {
  outline: 0;
  background-color: #b3c4c7;
}

If you need more direction let me know :)