JSFiddle - React, Tailwind, and code Playground

by rusev

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.1.229/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2012.1.229/js/kendo.all.min.js"></script>
<script type="text/x-kendo-tmpl" id="template">
    <div class="order">
        <div class="k-grid" data-id="${EmployeeID}"></div>
    </div>        
</script>

<div id="listView"></div>

CSS

.order
{
    float: left;
    width: 270px;
    height: 200px;
    margin: 10px;
    padding: 5px;
}

.k-listview 
{
    border: 0;
    padding: 0 0 20px 0;
    min-width: 0;
}

JavaScript

$("#listView").kendoListView({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Employees"
        },
        pageSize: 4,
        serverPaging: true,
        serverSorting: true
    },
    template: kendo.template($("#template").html()),
    dataBound: function() {
        $(".k-grid", this.element).each(function() {
             var dom = $(this);   
             dom.kendoGrid({
                dataSource: {
                    type: "odata",
                    transport: {
                        read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
                    },
                    serverPaging: true,
                    serverSorting: true,
                    serverFiltering: true,
                    pageSize: 4,
                    filter: { field: "EmployeeID", operator: "eq", value: dom.data("id") }
                },
                scrollable: false,
                sortable: true,
                pageable: true,
                columns: [ "OrderID", "ShipCountry"]
            });
        });
    }
});