Kendo Grid

by Dan Mathisen

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.1.0.js"></script>
<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<div id="selectedServices" 
            data-bind='kendoGrid: {
                selectable: true,
                data: items,
                change: vm.onChange, 
                columns: [
                    {"field": "id", "title": "id"},
                    {"field": "name", "title": "name"}, 
                    {"command":[{"text": "Test", "click": vm.removeItem}]}
                ]}' 
            data-role="grid"></div>
<button data-bind="click: addItem">Add Item</button>

CSS

#grid {
 height: 300px;
}

JavaScript

var ViewModel = function() {
    var self = this;
    this.items = ko.observableArray([
        { id: "1", name: "apple"},
        { id: "2", name: "orange"},
        { id: "3", name: "banana"},
        { id: "4", name: "pear"}
    ]);

    this.addItem = function() {
        var num = this.items().length + 1;
        this.items.push({ id: num, name: "new" + num});
    };
    
    this.removeItem = function(e) {
        var dataItem = this.dataItem($(e.currentTarget).closest("tr"));
        if (dataItem && dataItem.id) {
            self.items.remove(function(item) {
               return item.id === dataItem.id; 
            });
        }
    };
    
    this.onChange = function(e) {
        alert("The Grid has changed");
    };
};

window.vm = new ViewModel();

ko.applyBindings(vm);