Angular UI-Grid conditional coloring selection

Question

I want to apply conditional coloring based on data in my grid. Im using the cellClass function in columnDefs for this. My problem is that these classes are not updated on selection change, and i'm not able to define colors for rows that are selected and also have a conditional coloring. So for ex some rows are colored red based on data, and when they get selected, their color should be darker red to show the selection and the condition as well.

Is there any way to achieve this?

This is what im attempting to do, but obviously it wont work as this function is not called on selection change:

    vm.getCellHighlight = function(grid, row, col, rowRenderIndex, colRenderIndex) {
        var rowStatus = row.entity.isChild ? grid.parentRow.entity.transactionItemStatus : row.entity.transactionItemStatus;
        var rowSelected = row.isSelected ? 'Selected' : '';
        var rowType = '';
        if (rowStatus == ticketStateStorno){
            rowType = 'Storno';
        }
        if (rowStatus == ticketStateUsed){
            rowType = 'Used';
        }
        return (rowRenderIndex % 2)? 'searchSalesGridHighlight' + rowType + 'Dark' + rowSelected : 'searchSalesGridHighlight' + rowType + 'Light' + rowSelected;
    };

Tim Harker · Accepted Answer · 2017-03-09 13:29:00Z

1

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

JavaScript/AngularJS Controller:

app.controller('MainCtrl', ['$scope', '$http', function($scope, $http) {
  var colorRowTemplate =
    //same as normal template, but extra ng-class for old people:  'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected)
    "<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=\"{'old-people':(row.entity.Age>25&&!row.isSelected), 'old-people-selected':(row.entity.Age>25&&row.isSelected), 'ui-grid-row-header-cell': col.isRowHeader }\" role=\"{{col.isRowHeader ? 'rowheader' : 'gridcell'}}\" ui-grid-cell></div>";
  $scope.gridOptions = {
    enableSelectAll: true,
    enableRowSelection: true,
    enableRowHeaderSelection: false,
    enableFullRowSelection: true,
    rowTemplate: colorRowTemplate,
    showGridFooter: true
  }
  $http.get('data.json')
    .then(function(response) {
      $scope.gridOptions.data = response.data;
    });
}]);

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

answered Mar 9, 2017 at 13:29

Tim Harker

2,4171 gold badge17 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

bitwise Over a year ago

Thanks Tim, not just close but exactly what i need!

Collectives™ on Stack Overflow

Angular UI-Grid conditional coloring selection

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related