CODEWITHSUNDEEP
angular-ui-grid
IWI
IWI

Reputation: 1604

Adding a class to the first column of each row with rowTemplate?

As the title says, I am trying to add a class to the first column of each row (where the select box is). I am using a rowTemplate in my gridOptions.

This is the code:

let rowTemplate = () => {
  return $timeout(function() {
    $scope.waiting = 'Done!';
    $interval.cancel(sec);
    $scope.wait = '';
    return '<div ng-if="grid.appScope.rowFormatter( row ) == \'lowImportance\' "  ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell green-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
           '<div ng-if="grid.appScope.rowFormatter( row ) == \'medImportance\' "  ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell yellow-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' +
           '<div ng-if="grid.appScope.rowFormatter( row ) == \'highImportance\' "  ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell red-importance" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }"  ui-grid-cell></div>' ;
  }, 100);
}

The issue is, obviously, the code runs on each iteration of a cell. The reason I have not created a column an simply colored it (which is what I want to do), is because I need the color to be on the left side of the selection box (or circle). See attached image...

grid example

^ only want on col[0]

Here is the css I am using to achieve what I have done.

  .green-importance {
    position: relative;
  }
  .green-importance::before {
    position:absolute;
    z-index:11;
    top:0;
    left:0;
    width:10px;
    height:100%;
    content:"";
    background-color:red;
  }

Upvotes: 0

Views: 482

Answers (1)

A1t0r
A1t0r

Reputation: 489

Instead of using a custom row template, you can use cell class of ui-grid. Here you have a plunker: http://plnkr.co/edit/cVs1NRANRGN5MiYX3XCo?p=preview

    vm.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
           return 'green-importance';
        }
      },
      { field: 'company'
      }
    ]
  };

Upvotes: 1

Related Questions