Kendo UI Grid With Table Footer

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">
<script src="https://raw.github.com/cowboy/jquery-resize/v1.1/jquery.ba-resize.js"></script>
<div id="example" class="k-content">
    <table id="grid" data-bind="source: products">
    </table>
    <div class="k-grid k-widget">
        <table class="k-focusable" id="totals" >
            <tr>
                <td>
                    Total price: <span data-bind="text: priceTotal" />
                </td>
            </tr>
        </table>
    </div>
</div>

CSS

.k-grid > table > tbody > tr > td:first-child { width:20% }
.k-grid > table > tbody > tr > td:first-child + td { width:30% }
.k-grid > table > tbody > tr > td:first-child + td + td { width:50% }

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 });

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

var productdata = [];
for (var i = 0; i < 5; i++) {
    productdata.push(kendo.observable({
        OrderId: "Item #" + i,
        NrOfProducts: i,
        Price: i
    }));
}

var viewModel = kendo.observable({
    products: productdata,
    priceTotal: function() {
       var sum = 0;

        $.each(this.get("products"), function(index, product) {
            sum += product.Price;
        });
// Add a bonus of 10
sum = sum + 10;                        
        return sum;
    }
});

function itemEditor(container, options) {
    $('<input data-bind="value:' + options.field + '"/>')
    .appendTo(container)
    .kendoDropDownList({
        dataTextField: "Name",
        dataValueField: "Id",
        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"},
    {
        field: "Price",
        title: "Price"}]
});

//$("#totals").kendoGrid(editable: false,
//    sortable: false,
//    scrollable: false);
    


//function resizeTableColumns() {
//    $("#totals").width($("#grid").width());
//    $("#totals tbody tr td").each(function(i) {
//        $(this).width($($("#grid tbody tr:first td")[i]).width());
//    });
//}
//$("#grid").resize(resizeTableColumns);
kendo.bind($('#example'), viewModel);