JSFiddle - React, Tailwind, and code Playground

by dsubiros

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

<script id="rowTemplate" type="text/x-kendo-tmpl">
    <tr>
        <td>
            <hr/>
            <b>Order No: </b>${ OrderID }<br/>
            <b>Ship Name: </b>${ ShipName }<br/>
            <b>Ship City: </b>${ ShipCity}<br/>
        </td>
    </tr>
</script>

JavaScript

var dataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
        model: {
            id: "OrderID",
            fields: {
                OrderID: {
                    type: "number"
                },
                ShipName: {
                    type: "string"
                },
                ShipCity: {
                    type: "string"
                }
            }
        }
    },
    pageSize: 10
    
});

$("#grid").kendoGrid({
    dataSource: dataSource,
    pageable: true,
    selectable: true,
    rowTemplate: kendo.template($("#rowTemplate").html()),
    columns: [''],
    //columns: ['OrderID', 'ShipName'],
    change: function() {
        var id = this.select().data("id");
        $("#log").html("LOG: selected id= " + id);
    }
});