111_cellClass.ngdoc

@ngdoc overview
@name Tutorial: 111 CellClass
@description

A class name or function returning a class name can be assigned to each columnDef.

In this example, we will override the color and background for the first column and color the company text blue if it equals 'Velity'.

For better performance with the following example, you can choose to load the ui-grid.core.js file instead:
<pre>
  <script src="/release/ui-grid.core.min.js"></script>
</pre>

<example module="app">
  <file name="app.js">
    var app = angular.module('app', ['ngAnimate', 'ngTouch', 'ui.grid']);

    app.controller('MainCtrl', function MainCtrl($http) {
      var vm = this;

      vm.gridOptions = {
        enableSorting: true,
        columnDefs: [
          { field: 'name', cellClass:'red' },
          { field: 'company',
            cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
              if (grid.getCellValue(row,col) === 'Velity') {
                return 'blue';
              }
            }
          }
        ]
      };

      $http.get('/data/100.json')
        .then(function(response) {
          vm.gridOptions.data = response.data;
        });
    });
  </file>
  <file name="index.html">
    <div ng-controller="MainCtrl as $ctrl">
      <br>
      <div id="grid1" ui-grid="$ctrl.gridOptions" ng-if="$ctrl.gridOptions.data" class="grid"></div>
    </div>
  </file>
  <file name="main.css">
    .grid {
      width: 500px;
      height: 200px;
    }
    .red { color: red;  background-color: yellow !important; }
    .blue { color: blue;  }
  </file>
  <file name="scenario.js">
    var gridTestUtils = require('../../test/e2e/gridTestUtils.spec.js');
    var GridObjectTest = require('../../test/e2e/gridObjectTestUtils.spec.js');
    var grid1 = new GridObjectTest('grid1');

    describe( '111 cell class', function() {
      // Reload the page before each test if on Firefox. Chrome does it automatically.
      gridTestUtils.firefoxReload();

      it('header values should be as expected', function () {
        grid1.expectHeaderColumnCount( 2 );
      });

      it('column one formatted color red, background yellow', function () {
        // sort by company, 2,1 is no longer Velity so shouldn't be blue, check it's the same colour as row 1
        grid1.clickHeaderCell( 1 )
          .then(function () {
            grid1.expectCellValueMatch( 2, 1, 'Acusage' );
            expect( grid1.dataCell( 1, 1 ).getCssValue('color')).toEqual('rgba(44, 62, 80, 1)');
            expect( grid1.dataCell( 2, 1 ).getCssValue('color')).toEqual('rgba(44, 62, 80, 1)');
          });
      });
    });
  </file>
</example>