Kendo UI Grid Footer With MVVM

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>-->
    <table id="grid">

        <tbody data-template="row-template"  data-bind="source: products" ></tbody>
        <tfoot data-template="footer-template" data-bind="source: this"></tfoot>
    </table>
</div>
<script id="row-template" type="text/x-kendo-template">
      <tr class="k-grid-edit-row">
      <td  data-bind="text: OrderId">
      </td>
      <td data-bind="text: NrOfProducts">
      </td>
      <td data-bind="text: Price">
      </td>
      </tr>
</script><script id="footer-template" type="text/x-kendo-template">
    <tr>
        <td>
        </td>
        <td>
        </td>
        <td colspan="2">
            Total price: #: priceTotal() #
        </td>
    </tr>
</script>

JavaScript

// Set up the dropdown data that will eventually be remote data
var itemdata = [];
for (var i = 0; i < 100; i++)
    itemdata.push({ Name: "Item #" + i, ID: i });


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

var itemDS = new kendo.data.DataSource( {
    data: productdata 
} );

var viewModel =  kendo.observable({
    products: productdata,
    priceTotal: function() {
        return 10;
    }
});

function itemEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "OrderId",
        dataValueField: "OrderId",
        dataSource: itemDS
    });
}

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