Kendo UI Grid in Window with Column Resizing

by massimos

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2013.3.1324/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2013.3.1324/js/kendo.web.min.js"></script>
<button id="openWin" class="k-button">Open Window</button>

<button id="rebindGrid" class="k-button">Rebind Grid while Window is closed</button>

<div id="window">
    <div id="grid" style="height:400px"></div>
</div>

CSS

html
{
    font: 12px sans-serif;
}

JavaScript

$("#openWin").click(function(){
    $("#window").data("kendoWindow").open();
});

$("#rebindGrid").click(function(){
    $("#grid").data("kendoGrid").dataSource.read();
});

$("#window").kendoWindow({
    width: "80%",
    visible: false,
    title: "Kendo UI Window"
}).data("kendoWindow").center().open();

$("#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" }
                }
            }
        },
        pageSize: 20,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    resizable: true,
    pageable: true,
    filterable: true,
    columns: [{
        field:"OrderID"
    }, {
        field: "Freight"
    }, {
        field: "OrderDate",
        title: "Order Date",
        format: "{0:MM/dd/yyyy}"
    }, {
        field: "ShipName",
        title: "Ship Name"
    }]
});