JSFiddle - React, Tailwind, and code Playground

by stratdaz

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.web.min.js"></script>
<div id="content" >
    <div id="myGrid"></div>
</div>

<script type="text/x-kendo-template" id="toobar-template">
                <div class="toolbar">
                   <button data-bind="click: addProduct">Add a new client</button>
                </div>
            </script>


<script id="client_popup_editor" type="text/x-kendo-template">
    <div class="grid-3-12">
            <label class="k-edit-label" for="FirstName">First Name</label>
            <input name="FirstName" class="k-edit-field" type="text" data-bind="value:FirstName" required="required" value="" />
    </div>
    <div class="grid-3-12">
            <label class="k-edit-label" for="Surname">Surname</label>
            <input name="Surname" class="k-edit-field" type="text" data-bind="value:Surname" required="required" value="" />
    </div>
    <div class="grid-3-12">
        <label class="k-edit-label" for="Gender">Gender</label>
        <input name="Gender" data-text-field="GenderDs"
               data-value-field="GenderId" data-source="genders" data-bind="value:GenderId" data-role="dropdownlist" />
    </div>
</script>

JavaScript

var viewModel = kendo.observable({
    clients: new kendo.data.DataSource({
        data: [{
            FirstName: "David",
            Surname: "Bowie",
            GenderId: "M"
        }, {
            FirstName: "Tom",
            Surname: "Jones",
            GenderId: "M"
        }, {
            FirstName: "Nora",
            Surname: "Jones",
            GenderId: "F"
        }]
    }),

    // lookups
    genders: new kendo.data.DataSource({
        data: [{
            GenderId: "M",
            GenderDs: "Male"
        }, {
            GenderId: "F",
            GenderDs: "Female"
        }]
    }),
    
    addProduct: function () {
        alert('woohoo');
    }
});

kendo.bind($('#content'), viewModel);

var grid = $("#myGrid").kendoGrid({
    dataSource: viewModel.clients,
    editable: {
        mode: "popup",
        template: kendo.template($("#client_popup_editor").html())
    },
    columns: [{
        field: "FirstName",
        title: "First Name",
        width: "140px"
    }, {
        field: "Surname",
        width: "160px"
    }, {
        command: [{
            text: "",
            name: "edit"
        }, {
            text: "",
            name: "destroy"
        }]
    }],
    toolbar: kendo.template($("#toobar-template").html())
});