JSFiddle - React, Tailwind, and code Playground

by rusev

HTML

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

<div id="details"></div>

<script type="text/x-kendo-tmpl" id="detailTemplate">
    <dl>
        <dt>Order ID</dt>        
        <dd>${OrderID}</dd>
        <dt>Ship Name</dt>
        <dd>${ShipName}</dd>
        <dt>Ship City</dt>
        <dd>${ShipCity}</dd>
    </dl>
</script>

JavaScript

var dataSource = new kendo.data.DataSource({
        type: "odata",   
        transport: {
            read: "http://services.odata.org/Northwind/Northwind.svc/Orders"
        },
        schema: {
            model: {
                id: "OrderID",
                fields: {
                    OrderID: { type: "number" },                    
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 5,
        serverPaging: true
    });

var template = kendo.template($("#detailTemplate").html());

$("#grid").kendoGrid({
    dataSource: dataSource,    
    pageable: true,
    selectable: true,
    change: function() {
        var selected = this.select(),
            data = dataSource.get(selected.data("id")).data;

         $("#details").html(template(data));
    },        
    columns: ["OrderID", "ShipName", "ShipCity"]
});