Kendo UI Grid Footer With MVVM

by darrenarbell

HTML

<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.common.min.css">
<div id="example" class="k-content">
            <div id="grid" data-role="grid" data-bind="source: products"></div>
</div>

JavaScript

// Now set up the product data that will eventually be remote data
var productdata = [];
for (var i = 0; i < 80; i++)
    productdata.push( { 
        OrderId: "Item #" + i,  
        NrOfProducts: i,  
        Price: i
    } );

var productsDS = new kendo.data.DataSource( {
    data: productdata,
    aggregate: [
               { field: "NrOfProducts", aggregate: "sum" },
               { field: "Price", aggregate: "sum"}]
});


var viewModel =  kendo.observable({
    products: productsDS
});


$("#grid").kendoGrid({
    sortable: true,
    scrollable: false,
    columns: [{
        field: "OrderId",
        title: "ID of the Order"},
    {
        field: "NrOfProducts",
        title: "Number Of Products"
       // ,footerTemplate: "Total Products : #= kendo.toString(sum, '0.00') #"
    },
    {
        field: "Price",
        title: "Price"
        //,footerTemplate: "Total Price: #= kendo.toString(sum, 'C') #"
    }]
});
kendo.bind($('#grid'), viewModel);