[Solved] Bind to column total from outside of grid

[Lars]

I have an ticket line grid, with a Total column, which is calculated (Qty x Price), using the total function in the model definition:

schema: {
    model: {
        id: "id",
        fields: {
            id: { type: "string" },
            orderId: { type: "number" },
            lineNo: { type: "number" },
            itemNo: { type: "string" },
            ...
            price: { type: "number" },
            qty: { type: "number" },
            comment: { type: "string" },
        },
        total: function () {
            return (this.get("qty") * this.get("price")).toFixed(2);
        }
    }
}

Note that I use a total function in the model definition instead of a template expression such as "#=Qty * price#" because I need it to also work in the custom edit form (which has a total field that needs to be dynamically updated when qty or price is changed).

Here is a plunker: http://plnkr.co/edit/YHiupWy49mvk4kZAqJTA?p=preview

I need to have a field outside of the grid that always reflects the grand total of the grid (=the total of the Total column).  I have put a place holder below the grid in the plunker, Grand Total; this is where the total should show.

How can I do this, preferably in an AngularJS way?

Thanks,
Lars

[Lars]

Hello,

I have implemented this solution, based on an answer from Stackoverflow:

dataBound: function(e) {
  var gridData = e.sender.dataSource.view();

  $timeout(function() {
      $scope.ticket.subTotal = 0;
      for (var i = 0; i < gridData.length; i++) {
        $scope.ticket.subTotal += gridData[i].qty*gridData[i].price;
      }
    }
  );
},

Here is an updated plunker: http://plnkr.co/edit/M0Vdu9FzKyKP8qPBVZ2L?p=preview

This seems to work fine, but if there is a better way, please let me know.

Thanks,
Lars 

[Alexander Popov]

Hi Lars,

The implementation seems good, however there is one thing you should keep in mind - the DataSource's view method returns the items on the current page only. This means that the Total is always calculated for the current page, which might not be the expected behavior. If you would like to display the total for all items in the Grid, then I would recommend using the data method instead.

Regards,
Alexander Popov
Telerik