JSFiddle - React, Tailwind, and code Playground

by Alan Garrod

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.0.0.debug.js"></script>
<link rel="stylesheet" href="http://rniemeyer.github.io/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.io/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://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<p class="k-block k-header k-shadow"> Kendo Grid - Using declarative initialization</p>
http://jsfiddle.net/alangarrod/u7YnY/10/#update
<div data-bind="kendoGrid: { data:items,sortable: true,selectable:true, change:onChange2}"></div>


<form class="kCompaniesClass2 k-block k-info-colored">
    <div class="k-header k-shadow">Company Details - using Knockout-Kendo.js framework</div>
    <table data-bind="with: selectedItem">
http://jsfiddle.net/saisworld/u7YnY/#update    <tr>
        <th>id</th>
        <th>name</th>
    </tr>
    <tr>
        <td><input data-bind="value:id" /></td>
        <td><input data-bind="value:name" /></td>
    </tr>
   </table>

</form>

JavaScript

var ViewModel2 = function (selectedItem) {
        this.items = ko.observableArray([]);
        this.selectedItem = ko.observable(selectedItem);
        this.loadItems = function() {
            var self = this;
            self.items.push(new item(1, "ice cream"));
            self.items.push(new item(2, "frozen yogurt"));
            self.items.push(new item(3, "kulfi"));

            this.loadSelectedItem = function(itemsent) {
                var self = this;
                self.selectedItem(itemsent);
            };
        };
    };
   
    function item(id, name) {            
        this.id = id;
        this.name = name;
        
    }

    function onChange2(e) {
        grid = e.sender;
        
        var koCompanyItem = grid(this.select());
        vm.loadSelectedItem(koCompanyItem);
    }
    
    $(function () {
        vm = new ViewModel2(new item("4","Will"));
        vm.loadItems();
        ko.applyBindings(vm);
    });