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>
<div id="grid"></div>

<script type="text/x-kendo-template" id="template">
                <div class="tabstrip #= Country # ">
                    <ul>
                        <li class="k-state-active">
                           Orders
                        </li>
                        <li>
                            Contact Information
                        </li>
                    </ul>
                    <div>
                        <div class="orders"></div>
                    </div>
                    <div>
                        <div class='employee-details'>
                            <ul>
                                <li><label>Country:</label>#= Country #</li>
                                <li><label>City:</label>#= City #</li>
                                <li><label>Address:</label>#= Address #</li>
                                <li><label>Home Phone:</label>#= HomePhone #</li>
                            </ul>
                        </div>
                    </div>
                </div>

            </script>

JavaScript

var element = $("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
        },
        pageSize: 5,
        serverPaging: true,
        serverSorting: true
    },
    height: 430,
    sortable: true,
    pageable: true,
    detailTemplate: selectTemplate,
    detailInit: detailInit,
    dataBound: function () {
        this.expandRow(this.tbody.find("tr.k-master-row").first());
    },
    columns: [{
        field: "FirstName",
        title: "First Name",
        width: "120px"
    }, {
        field: "LastName",
        title: "Last Name",
        width: "120px"
    }, {
        field: "Country",
        width: "120px"
    }, {
        field: "City",
        width: "120px"
    }, {
        field: "Title"
    }]
});