How to get the total of a column with a field function?

Question

I'm trying to calculate the column TOTAL where I have field functions. Here's what I have so far: https://plnkr.co/edit/vhstPeg2BYz1oWGGwido?p=preview

var app = angular.module('myApp', ['ui.grid']);
app.controller('MyCtrl', function($scope) {
$scope.myData = [
         {x: 1, y: 50},
                 {x: 4, y: 43},
                     {x: 12,y: 27},
                     {x: 9, y: 29},
                     {x: 23, y: 34 }];

    angular.forEach($scope.myData,function(row){
      row.getTotal = function(){
        return this.x  + this.y ;
      };
    });




$scope.gridOptionsString = { 
    data: 'myData',
    columnDefs: [{field: 'x', displayName: 'x'},
                 {field:'y', displayName:'y'},
                 {field: 'getTotal()', displayName: 'sum'},
                 ]
    };

});

Thanks!

Tim Harker · Accepted Answer · 2017-03-24T19:02:41.283

This should do it:

Relevant code from controller:

var used = [];
$scope.grandTotal = 0;
angular.forEach($scope.myData,function(row,idx){
  row.getTotal = function(){
    if (used.indexOf(idx) == -1) {
      $scope.grandTotal += this.x  + this.y;
      used.push(idx);
    }
    return this.x  + this.y ;
  };
});

Your updated Plunker is here, http://plnkr.co/edit/1FHgSViYgpfXgQEPfXr5?p=preview.

Update (based on response/plunker-link/comment below)

New screen layout:

Relevant code from controller:

var used = [];
$scope.grandTotal = 0;
angular.forEach($scope.myData, function(row, idx) {
  row.getTotal = function() {
    var value;
    if (this.xBox) {
      value = this.x + this.z;
    } else if (this.yBox) {
      value = this.y + this.z;
    }
    if (used.indexOf(idx) == -1) {
      $scope.grandTotal += value;
      used.push(idx);
    }
    return value;
  };
});
$scope.updateXRowClear = function(row) {
  row.entity.yBox = false;
  /* Need to check the ybox cell when unchecked */
  if (row.entity.xBox === false) {
    row.entity.yBox = true;
    $scope.grandTotal += row.entity.y - row.entity.x;
  } else {
    $scope.grandTotal += row.entity.x - row.entity.y;
  }
};
$scope.updateYRowClear = function(row) {
  row.entity.xBox = false;
  /* Need to check the xbox cell when unchecked */
  if (row.entity.yBox === false) {
    row.entity.xBox = true;
    $scope.grandTotal += row.entity.x - row.entity.y;
  } else {
    $scope.grandTotal += row.entity.y - row.entity.x;
  }
};

New updated Plunker, https://plnkr.co/edit/ixdN0J2oVvOlbbziJMCY?p=preview.

Updated Again (based on comments below)

New screen layout:

Relevant code from controller:

var used = [];
$scope.grandTotal = 0;
angular.forEach($scope.myData, function(row, idx) {
  row.getTotal = function() {
    var value;
    if (this.xBox) {
      value = this.x * this.qty;
    } else if (this.yBox) {
      value = this.y * this.qty;
    } else if (this.zBox) {
      value = this.z * this.qty;
    }
    if (used.indexOf(idx) == -1) {
      $scope.grandTotal += value;
      used.push(idx);
    }
    return value;
  };
  $scope.$watch(
    function($scope) {
      return row.getTotal();
    },
    function(newValue, oldValue) {
      $scope.grandTotal += (newValue ? newValue : 0) - (oldValue ? oldValue : 0);
    }
  );
});
$scope.updateXRowClear = function(row) {
  row.entity.yBox = false;
  row.entity.zBox = false;
  /* Need to check the ybox cell when unchecked */
  if (row.entity.xBox === false) {
    row.entity.yBox = true;
  }
  if (row.entity.yBox === false) {
    row.entity.xBox = true;
  }
};
$scope.updateYRowClear = function(row) {
  row.entity.xBox = false;
  row.entity.zBox = false;
  /* Need to check the xbox cell when unchecked */
  if (row.entity.yBox === false) {
    row.entity.xBox = true;
  } else if (row.entity.xBox === false) {
    row.entity.yBox = true;
  }
};
$scope.updateZRowClear = function(row) {
  row.entity.xBox = false;
  row.entity.yBox = false;
  /* Need to check the zbox cell when unchecked */
  if (row.entity.zBox === false) {
    row.entity.xBox = true;
  } else if (row.entity.xBox === false) {
    row.entity.zBox = true;
  } else if (row.entity.yBox === false) {
    row.entity.yBox = true;
  }
};

And the all important working Plunker, https://plnkr.co/edit/1rRRWEIyQhKVkYRdtIFu?p=preview.

Let me know if you have any other questions, happy to help!

Thanks Tim! Now how would you make it dynamic? https://plnkr.co/edit/vhstPeg2BYz1oWGGwido?p=preview — UCDaCode, Mar 24 '17 at 01:38
I notice when I click on the same checkbox more than once, the grandtotal increments. — UCDaCode, Mar 24 '17 at 04:38
Wow! You're fast! Okay two more things: 1. I now want to add another column. When I switch from column y to z and vise versa, the Dynamic Total is incorrect. 2. How would I update the Dynamic Total when I edit the qty column? PS You're help is deeply appreciated. =) — UCDaCode, Mar 24 '17 at 15:28
Provide a broken Plunker, and I'll fix it - I want to make sure I fully understand what you're talking about. Thanks. — Tim Harker, Mar 24 '17 at 15:38
Okay the user can check either x, y, or z to multiple with the qty to get the product. The user can also edit the qty and the Dynamic Total will change accordingly. Checking/unchecking from x and y, I have no problem. However, checking/unchecking from y and z multiple times, I have issues. Thanks! — UCDaCode, Mar 24 '17 at 15:47
Here's the broken plunker: https://plnkr.co/edit/vhstPeg2BYz1oWGGwido?p=preview Notice how the dynamic total is incorrect when I switch from column y to z and vise versa. — UCDaCode, Mar 24 '17 at 18:50
I've updated my answer - had to take a different approach now we've got an editable quantity. Hope everything's now in-order, matey! — Tim Harker, Mar 24 '17 at 19:05
Would you like to take a stab at this? http://stackoverflow.com/questions/43015734/ui-grid-column-summation-on-checkbox-change — UCDaCode, Mar 25 '17 at 11:33

How to get the total of a column with a field function?

1 Answers1