JSFiddle - React, Tailwind, and code Playground

by aleksanderson

HTML

<script src="http://cloud.github.com/downloads/SteveSanderson/knockout/knockout-2.0.0.debug.js"></script>
<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://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<button data-bind="click: log">Log ViewModel</button>
<div id="gr" data-bind="kendoGrid: options"></div>

JavaScript

var pStyleHeader_ViewModel = function() {
    this.options = {
        data: ko.observableArray([{	StyleNo : ko.observable("1BA0012"),
                                    Description : ko.observable(""),
	                                StyleType : ko.observable("10"),
	                                DueDate : ko.observable(new Date("2012-10-31T00:00:00+02:00"))}]),
        sortable: true,
        columns: [{"field":"StyleNo","title":"Style No"},{"field":"Description","title":"Description"},{"field":"StyleType","title":"Style Type","editor":StyleTypeDropDownEditor,"values":StyleTypeValues},{"field":"DueDate","title":"Due Date","type":"date","format":"{0:MM/dd/yyyy}"}],
        editable: true,
        selectable: true,
        pageable: { pageSize: 5 }
    };

this.log = function() {
    alert(ko.toJSON(this.options.data));
}

};


function StyleTypeDropDownEditor(container, options) {
    $('<input required data-text-field="value" data-value-field="key" data-bind="value:' + options.field + '"/>')
        .appendTo(container)
            .kendoDropDownList({
                autoBind: false,
                dataSource: {
                    type: "json",
                    data: [{"key":"10","value":"Apparel"},{"key":"18","value":"Accessory"}]
                }
            });
}


var StyleTypeValues = 
[{"value":"10","text":"Apparel"},{"value":"18","text":"Accessory"}];


ko.applyBindings(new pStyleHeader_ViewModel());