Knockout kendo grid template binding

http://stackoverflow.com/questions/10996945/knockout-kendo-grid-template-binding

by rniemeyer

HTML

<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.322/js/kendo.all.min.js"></script>
<script src="http://knockoutjs.com/downloads/knockout-2.3.0.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<div id="grid"  data-bind="kendoGrid: { data: fruits, columns: [ 
            {
                field: 'name',
                title: 'Fruit',
                width: 50
            },
            {
                template: '<button class=\'k-button\' data-bind=\'click: function() { changeFruit() }\' >Change Fruit Name</button>',
                width: 30
            }               
           
         ], 
        scrollable: false, sortable: true, pageable: false }, preventBinding: true" style="height: 380px">
    </div>

CSS

#grid {
 height: 300px;
}

JavaScript

ko.bindingHandlers.preventBinding = {
    init: function() {
        return { controlsDescendantBindings: true };
    }        
};

var ViewModel = function() {
    this.fruit1 = {
        color: ko.observable("green"),
        name: ko.observable("apple"),
    };
    
    this.fruit2 = {
        color: ko.observable("orange"),
        name: ko.observable("orange"),
    };
        
        
    this.fruits = ko.observableArray([
        this.fruit1, 
        this.fruit2
    ]);
    
    this.changeFruit = function() {
        // this line breaks the binding, 
        // when You change the property of the viewModel
        // You cannot call this function any more
        this.fruits()[0].name("Test");
        alert(this.fruits()[0].name());
    }
};
    
ko.bindingHandlers.kendoGrid.options.dataBound = function(data) {
    var body = this.element.find("tbody")[0];

    if (body) {
       ko.cleanNode(body);
       ko.applyBindings(ko.dataFor(body), body);   
    }
};
    
ko.applyBindings(new ViewModel());