Kendo UI Grid Edit Template Ex

by Josh Eastburn

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1119/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.rtl.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1119/styles/kendo.dataviz.default.min.css">
<div id="root-element">
    <div id="grid" data-bind="source: dataSource"></div>
</div>

JavaScript

(function () {

    var vm = kendo.observable({
        dataSource: new kendo.data.DataSource({
            data: [{
                id: 1,
                name: "Test 1"
            }, {
                id: 2,
                name: "Test 2"
            }, {
                id: 3,
                name: "Test 3",
            }, ]
        }),
    });

    $("#grid").kendoGrid({
        columns: [{
            command: "edit",
            width: "190px",
        }, {
            field: "name",
            editor: function (container, options) {
                $("<input />")
                    .attr("data-bind", "value: " + options.field + ", enabled: isNewRow")
                    .appendTo(container);
            }
        }],
        edit: function (e) {
            e.model.set("isNewRow", (e.model.id == undefined));
        },
        toolbar: ["create"],
        editable: "inline",
        schema: {
            model: {
                id: "id",
                fields: {
                    "id": { type: "number" },
                    "name" : { type: "string" }
                }
            }
        }
    });

    kendo.bind("#root-element", vm);

})()