AngularJS UI Grid overwrite row selection colour dynamically

Question

Hi am trying to overwrite the default colour of ui grid when a row is selected dynamically , when i choose the first row i want it to have a different colour than the rest of the rows selected

    if($scope.mySelections.length==1){
     //here overwrite the css
    .ui-grid-row.ui-grid-row-selected>[ui-grid-row]>.ui-grid-cell{
         background-color: #efe8ed!important;
    }
}

I hope this make sense . any suggestions are welcome . the idea is to have the first selected row look differently than the rows selected after it . Thanks in advance

Answer 1

I believe this might be close to what you want, Mero.

JavaScript/AngularJS Controller:

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  var colorRowTemplate =
    //same as normal template, but extra ng-class for firstSelection:  'first-selection':row.entity.firstSelection
    "<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=\"{'first-selection':row.entity.firstSelection, 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
  $scope.gridOnRegisterApi = function(gridApi) {
    gridApi.selection.on.rowSelectionChanged($scope, function(row) {
      row.entity.firstSelection = false;
      if (row.isSelected) row.entity.firstSelection = (gridApi.selection.getSelectedCount() == 1);
    });
  };
  $scope.gridOptions = {
    enableSelectAll: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableFullRowSelection: true,
    rowTemplate: colorRowTemplate,
    showGridFooter: true,
    onRegisterApi: $scope.gridOnRegisterApi
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

Here's a working Plunker, http://plnkr.co/edit/radkmw2T7wRCuiJ06Cyj?p=preview.