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

Question

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

Answer 1

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'}
]
};

Answer 2

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>'}
]
};