Kendo UI - Add / Remove with kendo.data.DataSource

A simple example of using kendo.data.DataSource to render a "to do" item list, filter it, and add / remove items

HTML

<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<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">
<div id="grid" style="height: 365px"></div>

CSS

thead {
    border-bottom: 1px solid #ccc;
}
th {
    padding: 5px;
    font-weight: bold;
}
td {
    padding: 5px;
}
fieldset {
    margin: 5px;
    padding: 5px;
    border: 1px solid #ccc;
}
fieldset legend {
    padding: 3px 10px;
}

JavaScript

var $grid = $('#grid');

var source = [];
source.push({
    Name: "User 1",
    Cost: 100
});

$grid.kendoGrid({
    dataSource: source,
    scrollable: {
        virtual: true
    },
    columns: [{
        field: "Name",
        title: "Contact Name",
        width: 200
    }, {
        field: "Cost",
        title: "Cost",
        template: "<input value='#: Cost #'> </input>",

    }]

});