JSFiddle - React, Tailwind, and code Playground

by xpista

HTML

<script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js"></script>
<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.metro.min.css">
<div id="Grid1"/>

JavaScript

var incidents = new kendo.data.DataSource({
            transport: {
                read: { 
                    url: "/echo/json/",
                    type: "post",
                    data: {
                        json: '{"Data":[{"Id":0,"Name":"Reboot","StartDate":"\/Date(1344636000000)\/"},{"Id":1,"Name":"Low   Memory","StartDate":"\/Date(1346882400000)\/"},{"Id":2,"Name":"Fake","StartDate":null}],"Total":3,"AggregateResults":null,"Errors":null}',
                        delay: 1
                    }     
                }                    
            },
            pageSize: 10,
            schema: {
                data: "Data",
                total: "Total",
                errors: "Errors",
                model: {
                    id: "Id",
                    fields: {
                        Id: { type: "number" },
                        Name: { type: "string" },
                        StartDate: { type: "date", defaultValue: null }
                    }
                }
            }
        });

$("#Grid1").kendoGrid(
            {
                columns: [
                    { title: "Id", width: "10%", field: "Id", sortable: false },
                    { title: "Name", width: "60%", field: "Name" },
                    { title: "Start Date", width: "40%", field: "StartDate", format: "{0:d}", sortable: false}
                ],
                scrollable: false,
                pageable: true,
                sortable: true,
                dataSource: incidents
            });