JSFiddle - React, Tailwind, and code Playground

by valchev

HTML

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

JavaScript

var dataSource = new kendo.data.DataSource({
    type: "odata",
    transport: {
        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
    },
    schema: {
        model: {
            fields: {
                OrderID: {
                    type: "number"
                },
                Freight: {
                    type: "number"
                },
                ShipName: {
                    type: "string"
                },
                OrderDate: {
                    type: "date"
                },
                ShipCity: {
                    type: "string"
                }
            }
        }
    },
    pageSize: 10,
    serverPaging: true,
    serverFiltering: true,
    serverSorting: true,
    requestStart: function(e) {
        console.log("start");
    },
    requestEnd: function(e) {
        console.log("end", e.type);   
    }
})

$("#list").kendoListView({
    dataSource: dataSource,
    pageable: true,
    template: '<div>#= ShipCity # || #= OrderID #</div>'
});

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