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>
<div id="vertical" style="height: 300px">
    <div>
        <p>
            Outer splitter : top pane (resizable and collapsible)
            
        </p>
    </div>
    <div>
        blah
    </div>
    <div>
        <div id="grid"></div>
        <p>
            Outer splitter : bottom pane (non-resizable, non-collapsible)
        </p>
    </div>
</div>

JavaScript

$("#grid").kendoGrid({
    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
            },
            height: 250,
            scrollable: true,
            filterable: true,
            sortable: true,
            pageable: true,
            columns: ["OrderID", "Freight"]
});

$("#vertical").kendoSplitter({
    orientation: "vertical",
    panes: [
        { collapsible: true, size: "100px" },
        { collapsible: false },
        { collapsible: false, resizable: false }
    ]
});