JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<script src="http://cdn.kendostatic.com/2012.2.913/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.913/styles/kendo.default.min.css">
<div id="grid"></div>
<script id="tmp" type="text/x-kendo-template">
    <div class="k-edit-label">
        <label for="name">name</label>
    </div>
    <input type="text" name="name" data-bind="value: name" />
    <br /> 
    <div class="k-edit-label">
        <label for="age">age</label>
    </div>
    <input type="number" class="k-input k-textbox" name="age" data-bind="value: age" >
    <br /> 
    <p>Phones:</p>
    <div class="k-edit-label">
        <label for="phoneType1">phoneType1</label>
    </div>
    <input
        data-role="dropdownlist"
        name="phoneType1"
        data-text-field="PhoneTypeName"
        data-value-field="PhoneTypeValue"
        data-source="phoneTypeDS"
        data-bind="value: phoneType1" />
    <br />
    <div class="k-edit-label">
        <label for="phoneNumber1">phoneNumber1</label>
    </div>
    <input type="text" class="k-input k-textbox" name="phoneNumber1" data-bind="value: phoneNumber1" />
    <br />
    <div class="k-edit-label">
        <label for="phoneType2">phoneType2</label>
    </div>
    <input
        data-role="dropdownlist"
        name="phoneType2"
        data-text-field="PhoneTypeName"
        data-value-field="PhoneTypeValue"
        data-source="phoneTypeDS"
        data-bind="value: phoneType2" />
    <br />
    <div class="k-edit-label">
        <label for="phoneNumber2">phoneNumber2</label>
    </div>
    <input type="text" class="k-input k-textbox" name="phoneNumber2" data-bind="value: phoneNumber2" />
    <br /> 
</script>

JavaScript

var phoneTypeDS = new kendo.data.DataSource({
    data: [
            { PhoneTypeName: "Work", PhoneTypeValue: 1 },
            { PhoneTypeName: "Mobile", PhoneTypeValue: 2 },
            { PhoneTypeName: "Home", PhoneTypeValue: 3 }
        ]
});

$("#grid").kendoGrid({
    dataSource: {
        data: [
            {
                id: 1,
                name: "Rob",
                age: 33,
                phoneType1: 1,
                phoneNumber1: "222-222-222",
                phoneType1: 2,
                phoneNumber2: ""
            },
            {
                id: 2,
                name: "Bob",
                age: 23,
                phoneType1: 1,
                phoneNumber1: "222-222-222",
                phoneType1: 2,
                phoneNumber2: ""
            }
        ],
        schema: {
            model: {
                id: "id"
            }
        }
    },
    columns: [
        "name",
        "age",
        {command: ["edit", "destroy"], width: 200}
    ],
    editable: {
        mode: "popup",
        template: $("#tmp").html()
    }
})