CODEWITHSUNDEEP
angularjsng-grid
user603007
user603007

Reputation: 11794

ng grid how to change style of individual cell in nggrid?

Just starting out with the ng-grid , how can I change the css of an individual cell in a grid. Things like backgroundcolor but also disable and enabling of just 1 cell in the current selected row?

plunkr:http://plnkr.co/edit/zQTRd7hOR6vpVZlgfHq0?p=preview

Upvotes: 2

Views: 4283

Answers (2)

Laura Riera
Laura Riera

Reputation: 525

If you want you can also put a template:

$scope.gridOptions = {
    data: 'myData',
    selectedItems: $scope.mySelections,
    enableCellEditOnFocus: true,
    multiSelect: true,
    afterSelectionChange: function() {
      $scope.selectedIDs = [];
      angular.forEach($scope.mySelections, function(item) {
        $scope.selectedIDs.push(item.name)
      });
    },
    columnDefs: [
      {field:'id', displayName:'Id',  cellTemplate: '<div class="ui-grid-cell-contents v-align-middle padding-20"><p>{{COL_FIELD}}</p></div>'}, 
      {field:'name', displayName:'Name',  cellTemplate: '<div class="ui-grid-cell-contents v-align-middle padding-20"><p>{{COL_FIELD}}</p></div>'}
      ]
  };

Upvotes: 0

Davin Tryon
Davin Tryon

Reputation: 67296

If you define your columns with columnDefs, then you have much more flexibility. You can then add a property to the definition called cellClass that you can define in your stylesheet.

All of the column definition properties are displayed on the ng-grid wiki. If you want you can redefine the cell or header template and write custom code for anything you want.

Here is an updated plunker.

And the changed code:

  $scope.gridOptions = {
    data: 'myData',
    selectedItems: $scope.mySelections,
    enableCellEditOnFocus: true,
    multiSelect: true,
    afterSelectionChange: function() {
      $scope.selectedIDs = [];
      angular.forEach($scope.mySelections, function(item) {
        $scope.selectedIDs.push(item.name)
      });
    },
    columnDefs: [
      {field:'id', displayName:'Id', cellClass: 'red'}, 
      {field:'name', displayName:'Name', cellClass: 'blue'}
      ]
  };

Upvotes: 2

Related Questions