Angularjs UI Grid Totals per Row inside the row

Question

{{ HelloWorld }}

I'm trying to access the values from other columns in the same row in angular-ui-grid. I have two question that are related.

1. How can I add the values from several columns in the same row to get a Total?
2. How can I use the row index to pass it as a parameter and remove the current row?

As you can see in the above image, the Totals that I'm looking for are only related to the integer values and not the initial string.
Also the Button with an X should delete the row when clicked. The rows are included in the grid dynamically.

I've gone through the UI Grid Tutorial but the examples don't show how to accomplish either of my questions.

My footer is working fine. It's configure to give a total but by column in the entire set of rows:

Here's a little bit of my code with what I've found so far:

var removeTemplate = '<button type="button" class="grid-remove btn btn-default btn-sm"><span class="glyphicon glyphicon-remove" aria-hidden="true" ng-click="removeRow($event, row.entity)"></span></button>';

$scope.gridAccountableHours = {
    enableCellEditOnFocus: true,
    showColumnFooter: true
};

$scope.gridAccountableHours.columnDefs = [
  { name: "contractCode", displayName: ""},
  { name: "hours1", displayName: "1", type: "number" },
  { name: "hours2", displayName: "2", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours3", displayName: "3", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours4", displayName: "4", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours5", displayName: "5", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours6", displayName: "6", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours7", displayName: "7", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours8", displayName: "8", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours9", displayName: "9", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours10", displayName: "10", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours11", displayName: "11", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours12", displayName: "12", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours13", displayName: "13", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours14", displayName: "14", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "hours15", displayName: "15", type: "number", aggregationType: uiGridConstants.aggregationTypes.sum },
  { name: "total", displayName: "Total" },
  { name: "remove", displayName: "", cellTemplate: removeTemplate }
];

$scope.removeRow = function ($event, entity) {
    $event.stopPropagation();
    $scope.gridAccountableHours.data.splice($scope.gridAccountableHours.data.indexOf(entity), 1);
};

I appreciate your time.

Answer 1

Totalling across the grid you could do with a function on the gridRow.

$scope.gridAccountableHours.forEach(function(rowEntity) {
  rowEntity.total = function() {
    var total = 0;
    for( var 1 = 1; i++; i<=15 ){
      total += this['hours'+i];
    }
  };
});

Your total column def should automatically bind to this total function. Refer http://ui-grid.info/docs/#/tutorial/106_binding

For the delete button, you're missing the appScope, refer http://ui-grid.info/docs/#/tutorial/305_appScope

Your template ng-click should be:

ng-click="grid.appScope.removeRow($event, row.entity)"