JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.1.319/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.1.319/js/kendo.all.min.js"></script>
<div id="listView"></div>
<div id="pager" class="k-pager-wrap"></div>

CSS

#listView { height: 170px; }
.item { border: 1px solid grey; padding: 3px; }

JavaScript

var data = [
    { id: 1, item: "Item 1", foo: 1, bar: true,  baz: new Date(1995,11,17) },
    { id: 2, item: "Item 2", foo: 2, bar: false, baz: new Date(2010,10,27) },
    { id: 3, item: "Item 3", foo: 3, bar: true,  baz: new Date(2009, 0,18) },
    { id: 4, item: "Item 4", foo: 4, bar: false, baz: new Date(2005, 8,15) },
    { id: 5, item: "Item 5", foo: 5, bar: false, baz: new Date(2011,10,11) },
    { id: 6, item: "Item 6", foo: 6, bar: true,  baz: new Date(2013, 5, 1) }
];

var dataSource = new kendo.data.DataSource({
    transport: {
        read: {
            url: "/echo/json/",
            dataType: "json",
            type: "POST",
            data: { //using jsFiddle's echo service to simulate Json request
                json: JSON.stringify(data),
                delay: 3
            },   
        }
    },
    schema: {
        model: {
            id: "id",
            fields: {
                id: { type: "number" },
                item: { type: "string" },
                foo: { type: "number" },
                bar: { type: "boolean" },
                baz: { type: "date" }
            }
        }
    }
});

kendo.ui.ListView.fn._progress = function() { return; }

var listView = $("#listView").kendoListView({
    dataSource: dataSource,
    template: "<div class='item'>#: id # || #: item #</div>"
}).data("kendoListView");

$("#pager").kendoPager({
    dataSource: dataSource
});