CODEWITHSUNDEEP
cssangularjsuser-interface
Anita Mehta
Anita Mehta

Reputation: 577

How to add class to column of grid with angular-ui-grid?

I'm working with UI-GRID and have to add the custom CSS to the header of the grid, so I'm trying to add class to columns.

$scope.columns = [
{
  name: 'status',
    displayName: 'STATUS',
    width: 200,
    pinnedLeft: true,
    **cellClass : "gridColumnStyle"**
},
{
  name: 'serial',
  displayName: 'SERIAL#',
  width: 200,
  cellClass : "gridColumnStyle"
}, 
{
  name: 'product_name',
  displayName: 'PRODUCT NAME',
  width: 200,
  cellClass : "gridColumnStyle"
}
];

But it is not working. Please tell me how to add the class which have some custom style.

Upvotes: 3

Views: 5681

Answers (1)

Gary
Gary

Reputation: 3324

Try headerCellClass instead of cellClass. Like this

  $scope.gridOptions = {
    enableSorting: true,
    columnDefs: [
      { field: 'name', headerCellClass: 'blue' },
      { field: 'company',
        headerCellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
          if (col.sort.direction === uiGridConstants.ASC) {
            return 'red';
          }
        }
  }]};

Also here is an example: http://ui-grid.info/docs/#/tutorial/115_headerCellClass and in case that ever moves here's a plunker: http://plnkr.co/edit/lmkJvXrxmGfzC342GXrO?p=preview

Upvotes: 2

Related Questions