JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.2.710/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<div id="grid"></div>

<div id="editAddressModal"></div>

<script type="x-kendo-template" id="editAddressTemplate">
    <div class="editAddressContainer">                
        <p data-container-for="address.line1">
            line1: <input type="text" data-bind="value:address.line1" />
        </p>
        <p data-container-for="address.line2">
            line2: <input type="text" data-bind="value:address.line2" />
        </p>                                          
    </div>       
</script>

JavaScript

var grid = (function() {
    function addressEditor(container, options) {
        var editLink = "<a class='showEdit' href='#'>edit</a>";

        $(editLink)
            .click(function (e) {                            
                e.preventDefault();

                var modal = $("#editAddressModal").kendoWindow({
                    title: "Address",
                    modal: true,                                
                    resizable: false,
                    content: {
                        template: kendo.template($("#editAddressTemplate").html())
                    }
                })
                .data("kendoWindow")
                .center()
                .open();
                
                kendo.bind(modal.element, options.model);
            })
            .appendTo(container);
    }

    return {
        dataSource: {
            data: [
                { 
                    id: 1, firstName: "foo1", lastName: "bar1", 
                    address: { line1: "fizz1", line2: "bin1" } 
                },
                { 
                    id: 2, firstName: "foo2", lastName: "bar2", 
                    address: { line1: "fizz2", line2: "bin2" } 
                },
                { 
                    id: 3, firstName: "foo3", lastName: "bar3", 
                    address: { line1: "fizz3", line2: "bin3" } 
                }
            ],
            schema: {
                model: {
                    id: "id",
                    fields: {
                        id: { editable: false, nullable: true },
                        firstName: { editable: true, validation: { required: true } },
                        lastName: { editable: true, validation: { required: true } },
                        address: {
                            line1: { editable: true, validation: { required: true } },
                            line2: { editable: true }
                        }
                    }
                }
  ...