Ng-grid How to set a separate style for the last row

Question

I am trying to display some total value (e.g. total) in the last line of the ng grid. The css style and css class of the last row should be different from the other cells in this column. How to achieve this?

The CellTemplate in the column definition applies to all cells in this column, but in my case I need to have a different style for the last row in this column. Can anybody suggest me a solution.

Thanks Sudipta

Answer 1

I managed to add the class to the last line through the 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 gridOptions added:

 ... plugins: [new ngGridAddClassToLastRow('<some class name>'), ... 

And of course add some css for example. in my case:

 .lastRow { border-bottom: 0px; } 

It worked for me. I can’t say for sure that this is the way to go, because of course I am a noob with Angular and ngGrid. I built the plugin from a flexible height plugin .

Answer 2

You can set the special property "isLast" (or, as you want to call it), the item that should be displayed on the last line. Access to this element can be obtained through row.entity.isLast .

... somewhere in your controller ....

 $scope.getRowClass = function(row) { return row.entity.isLast === true ? 'lastRow' : ''; } 

... somewhere inside 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 .lastRow you can define a custom style for the last row of the grid.