Kendo UI grid issues with aggregates and empty data

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.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.322/styles/kendo.default.min.css">
<div id="grid"></div>
<button id="btnClear" type="button">clear data</button>
<button id="btnAdd" type="button">add row</button>

 <script id="rowTemplate" type="text/x-kendo-template" >
            <tr>
                <td>#=name#</td>
                <td>#=id#</td>
                <td class="itemCostClass">#=itemCost#</td>                
            </tr>
 </script>

JavaScript

var dataSource = new kendo.data.DataSource({
    //comment out the line below, it it breaks on load
    data: [{name:"foo", id:1, itemCost:100},{name:"bar", id:2, itemCost:200}],
    aggregate: [
        {
        field: "itemCost",
        aggregate: "sum"},
    {
        field: "itemCost",
        aggregate: "max"}]
});
$("#grid").kendoGrid({
    dataSource: dataSource,
    rowTemplate: kendo.template($("#rowTemplate").html()),
    columns: [
        {
        field: "name",
        footerTemplate: "Totals:"},
    {
        field: "id"},
    {
        field: "itemCost",
        footerTemplate: "Sum:#=sum# Max:#=max# "}
    ],
    selectable: true
});

//clicking this button causes an error
$("#btnClear").click(function() {
    dataSource.data([]);
});

$("#btnAdd").click(function() {
    dataSource.add({
        name: "wigit",
        id: 3,
        itemCost: 300
    });
});