ng-grid How to set separate style for last row - angular-ui

Question

I am trying to display some aggregate value (like total) in the last row of an ng-grid. The style and css class of the last row needs to be different than the other cells in that column. How to acheive this?
The cellTemplate in a column definition applies to all cells in that column, but in my case I need to have a different style for the last row in that column. Can anyone please suggest me a solution.
Thanks
Sudipta

Answer 1

I was able to add a class to the last row through a plugin:
function ngGridAddClassToLastRow(className) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function (scope, grid, services) {
self.domUtilityService = services.DomUtilityService;
self.grid = grid;
self.scope = scope;
var addClass = function () {
var lastRow = self.scope.renderedRows[self.scope.renderedRows.length - 1];
lastRow.elm[0].className = lastRow.elm[0].className + ' ' + className;
};
self.scope.$watch(grid.config.data, addClass);
};
}
And with this added to the gridOptions:
...
plugins: [new ngGridAddClassToLastRow('<some class name>'),
...
And of course add some css, e.g. in my case:
.lastRow {
border-bottom: 0px;
}
That worked for me. I cannot say for certain that is the way to go since, needless to say, i'm a noob with Angular and ngGrid. I've constructed the plugin from flexible height plugin.

Answer 2

You can set a special property "isLast" (or however you like to name it) of the item that should be displayed in the last row. This item can be accessed through row.entity.isLast.
... somewhere in your controller ....
$scope.getRowClass = function(row) {
return row.entity.isLast === true ? 'lastRow' : '';
}
... somewhere inside the gridOptions ...
rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="[col.colIndex(), getRowClass(row)]" class="ngCell {{col.cellClass}}">....</div>'
Based on the .lastRow class you could define a custom style for the last grid row.