How to add totals in a ng-grid table

Question

I'm wondering if what I'd like to achieve is possible. Basically I'd like a ng-grid which will calculate the subtotal for a row, which I've already done with the following:

$scope.subTotal = function(row) {

    return (row.entity.price * row.entity.qty);

};

and in my ngGrid:

$scope.gridOptions1 = {

    data: 'orderContent.products',
    multiSelect: false,
    enableCellSelection: true,
    enableRowSelection: true,
    enableCellEdit: true,
    enableSorting: false,
    columnDefs:
        [
            {field:'remove', enableCellEdit: false, displayName:'Delete', cellTemplate: '<input class="btn btn-warning btn-xs" type="button" value="remove" ng-click="removeProduct(row)" />'},
            {field:'name', displayName: 'Name', enableCellEdit: true},
            {field:'price', displayName:'Price', enableCellEdit: true},
            {field:'qty', displayName:'Quantity', enableCellEdit: true},
            {field:'getTotal()', displayName:'Subtotal', enableCellEdit: false, cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text ng-class="{failed: row.getProperty(\'total\') < 72}">{{subTotal(row)}}</span></div>'}
        ]

};

Now I've got a cell which has the subtotal for that row and its working fine. How can add a total for all rows?

Please note that table is filled as the user click on a button (initial state is empty).

I've tried looping through gridOptions1.ngGrid.entities.data object. The loop/function was fired every time a product was added to the table, but that didn't work.

Is that something achievable?

Answer 1

This is similar.

http://plnkr.co/edit/LhlK1C?p=preview

 angular.forEach($scope.original_data, function (row) {
      row.getTotal = function () {
        return getSum(row.scores);
      };
    });

    $scope.gridOptions = {
            data: 'original_data',
            enableCellSelection: true,
            enableRowSelection: false,
            enableCellEdit: true,
            columnDefs: [{field:'name', displayName: 'Name', enableCellEdit: false},
            {field:'scores[0]', displayName:'Score1', enableCellEdit: true, cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text ng-class="{failed: row.getProperty(\'scores[0]\') < 18}">{{row.getProperty(col.field)}}</span></div>'},
            {field:'scores[1]', displayName:'Score2', enableCellEdit: true, cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text ng-class="{failed: row.getProperty(\'scores[1]\') < 18}">{{row.getProperty(col.field)}}</span></div>'},
            {field:'scores[2]', displayName:'Score3', enableCellEdit: true, cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text ng-class="{failed: row.getProperty(\'scores[2]\') < 18}">{{row.getProperty(col.field)}}</span></div>'},
            {field:'scores[3]', displayName:'Score4', enableCellEdit: true, cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text ng-class="{failed: row.getProperty(\'scores[3]\') < 18}">{{row.getProperty(col.field)}}</span></div>'},
            {field:'getTotal()', displayName:'Total', enableCellEdit: false, cellTemplate: '<div class="ngCellText" ng-class="col.colIndex()"><span ng-cell-text ng-class="{failed: row.getProperty(\'total\') < 72}">{{row.getProperty(col.field)}}</span></div>'}],
            enableSorting: false,
        };