CODEWITHSUNDEEP
angularjskendo-uikendo-grid
Lars335
Lars335

Reputation: 1880

How to get column total of Kendo-UI grid column (calculated)

I have an order 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: the reason I use a total function in the model definition instead of the regular kendo template "#=Qty * price#" is that I need the total function for the custom edit form (which has a total field that needs to be dynamically updated when qty or price is changed).

The column definition is here:

{
    field: "total",
    title: "Total",
    width: 60,
    template: "#= total() #",
}

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?

Edit 9/15/2014, here is the solution I went with, based on the accepted answer:

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

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

Note that I use $timeout since adding row is done in an Angular-aware way, while the regular edits are not. By using $timeout, $apply will always be automatically applied in a safe fashion.

HTML:

<b>Grand Total: </b> <input type="text" ng-model="ticket.subTotal" />

Updated plunker: http://plnkr.co/edit/GJx1mxVqd4vvK0IlfpKw?p=preview

Upvotes: 1

Views: 7696

Answers (1)

Abbas Galiyakotwala
Abbas Galiyakotwala

Reputation: 3019

You may use databound function of grid like below

var Grandtotal=0;
$("#grid").kendoGrid({
..
..
dataBound: function (e) {
                     var grid = $("#grid").data("kendoGrid");
                     var gridData = grid.dataSource.view();
                     for (var i = 0; i < gridData.length; i++) {
                         (
                          Grandtotal+=gridData[i].qty*gridData[i].price;
                         }
                     }
                 }
)}

i hope this may help you

Upvotes: 1

Related Questions