JSFiddle - React, Tailwind, and code Playground

by Ignacio Fuentes

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2013.2.918/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.2.918/styles/kendo.silver.min.css">
<script src="http://demos.kendoui.com/content/shared/js/people.js"></script>

<h2>Popup Custom Editing</h2>
<div id="grid"></div>
<br />
<h2>Inline Editing</h2>
<div id="grid2"></div>
<script id="popup-editor" type="text/x-kendo-template">
    <table>
        <tr><td> <label>a:<input name="a" /></label></td><td><label>b: <input name="b" /></label></td></tr>
        <tr><td> <label>c:<input name="c" /></label></td><td><label>d: <input name="d" /></label></td></tr>
    </table>
</script>

JavaScript

var ds = new kendo.data.DataSource({
    schema: {
        model: {
            fields: {
                a: {},
                b: {},
                c: {}
            }
        }
    },
    data: [{
        a: 1,
        b: 2,
        c: 3
    }, {
        a: 1,
        b: 2,
        c: 3
    }, {
        a: 1,
        b: 2,
        c: 3
    }, {
        a: 1,
        b: 2,
        c: 3
    }, {
        a: 1,
        b: 2,
        c: 3
    }]
});


$("#grid").kendoGrid({
    toolbar: ["create"],
    columns: ["a", "b", "c", "d", {
        command: ["edit"]
    }],
    dataSource: ds,
    
     editable: {
    mode: "popup",
    template: kendo.template($("#popup-editor").html())
  }

});


$("#grid2").kendoGrid({
    toolbar: ["create"],
    columns: ["a", "b", "c", "d", {
        command: ["edit"]
    }],
    dataSource: ds,
    
     editable: "inline"

});