Kendo - Base Q3

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.mobile.all.min.css">
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<div id="wrapper">
    <div id="chart" 
        data-role="chart"
        data-legend='{"position": "bottom"}'
        data-series='[{"type": "pie", "field": "percentage", "categoryField": "source", "explodeField": "explode"}]'
        data-tooltip='{visible: true}'
        data-bind="source: dataSource"
        data-transitions="false">
    </div>
    <div id="editor" data-template="tmp" data-bind="source: view"></div>

    <script id="tmp" type="text/x-kendo-template">
        <div>
            <label>#= source # Percentage: 
                <input data-role="numerictextbox" data-min="0" data-bind="value: percentage" data-value-update="keyup" />
            </label>
            <input type="button" value="Delete" data-bind="click: removeItem" />
        </div>
    </script>
</div>

JavaScript

var viewModel = kendo.observable({
    dataSource: new kendo.data.DataSource({
        data: [{
            "id": 1,
            "source": "Hydro",
            "percentage": 22,
            "explode": true
        },
        {
            "id": 2,
            "source": "Solar",
            "percentage": 2
        },
        {
            "id": 3,
            "source": "Nuclear",
            "percentage": 49
        },
        {
            "id": 4,
            "source": "Wind",
            "percentage": 27
        }],
        schema: {
            model: {
                id: "id",
                fields: {
                    id: {type: "number"},
                    source: {type: "string"},
                    percentage: {type: "number"}
                }
            }
        },
        change: function(e) {
            viewModel.set("view", this.data());            
        }
    }),
    addRecord: function() {
        this.dataSource.add({"id": 5, "source": "NewItem", "percentage": 33});   
    },
    removeItem: function(e) {
        var dataItem = e.data;
        this.dataSource.remove(this.dataSource.get(dataItem.id));            
    },
    view: []
});
kendo.bind($("#wrapper"), viewModel);
viewModel.addRecord();