What is best way to do column totals in ng-grid? - ng-grid

Question

If I have columns (name, amount) how do I best create a row / footer that shows ("Total",8877)? Clearly you can do it by adding a row to the data, but this ruins the sorting capability. It appears relatively easy to group by name and show the amount for each name, but I have not found how to do the simpler case (though I have found others asking - https://github.com/angular-ui/ng-grid/issues/679 for example)

Answer 1

You can include a custom footer template on the gridOptions. I looked for the default formatting of the footer in the source code and copied that, but added the function that calculates the totals. Something like this:
$scope.gridOptions = {
data: 'hereGoesTheData',
columnDefs : [list of your column names],
showFooter: true,
footerTemplate:
'<div ng-show="showFooter" class="ngFooterPanel" ng-class="{\'ui-widget-content\': jqueryUITheme, \'ui-corner-bottom\': jqueryUITheme}" ' +
'ng-style="footerStyle()"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}} " ng-cell style="text-align:right;">' +
'{{getTotal(col.field)}}</div></div>'
};
And then define $scope.getTotal to do whatever you want it to do.

Answer 2

Quite possibly not the best solution, but I ended up adding a totals row to the top of the footer. https://github.com/mchapman/forms-angular/commit/9f02ba1cdafe050f5cb5e7bb7d26325b08c85ad2

Answer 3

without modifying ng grid, you could just provide your own footer template, that somehow gets the total for each column.
In my case, as I ""build"" the table from server data, I also accumulate a totals hash.
My template looks like this:
total_cell_footer = """
<div ng-show="showFooter" class="ngFooterPanel" ng-class="{'ui-widget-content': jqueryUITheme, 'ui-corner-bottom': jqueryUITheme}" ng-style="footerStyle()">
<div class="ngTotalSelectContainer" >
<div ng-style="{ 'cursor': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell {{col.cellClass}}">
<span class="ngCellText">{{ get_total(col) | currency:"$"}} </span>
<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>
</div>
</div>
</div>
"""
The get_total function is defined in my scope (which is the parent of the ngGrid scope, hence inherited), as follows:
$scope.get_total= (col) ->
# used by the footer template to access column totals.
$scope.totals[col.field]

Answer 4

Take a look at the "Server side paging" example it has exactly what you want! you can slice and dice depending on what you need.
http://angular-ui.github.io/ng-grid/
in your grid options put
enablePaging: true,
showFooter: true,
showFilter: true,
totalServerItems: 'totalServerItems',
pagingOptions: $scope.pagingOptions,
and up top
$scope.pagingOptions = {
pageSizes: [100, 500, 1000],
pageSize: 100,
totalServerItems: 0,
currentPage: 1
};
$scope.setPagingData = function (data, page, pageSize) {
var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
$scope.myData = pagedData;
**$scope.pagingOptions.totalServerItems = data.length**;
if (!$scope.$$phase) {
$scope.$apply();
}
};