CODEWITHSUNDEEP
ng-grid
baldmark
baldmark

Reputation: 707

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

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)

Upvotes: 4

Views: 3807

Answers (4)

Salas
Salas

Reputation: 71

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.

Upvotes: 3

user2601122
user2601122

Reputation: 50

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();
    }
};

Upvotes: -1

aabes
aabes

Reputation: 208

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 }">&nbsp;</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]

Upvotes: 0

baldmark
baldmark

Reputation: 707

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

Upvotes: 0

Related Questions