Auto Expanding Kendo Grid

by peterjc

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1407/styles/kendo.default.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1407/js/kendo.all.min.js"></script>
<div style="height:100%">
  <div style="height:100%">
     <div id="grid" style="height:100%; border-width:0;">         
     </div>  
</div>
</div>

CSS

html,
body
{
    margin:0;
    padding:0;
    height:100%;
}

html
{
    overflow:hidden;
}

JavaScript

function resizeGrid() {
    var gridElement = $("#grid"),
        dataArea = gridElement.find(".k-grid-content"),
        gridHeight = gridElement.innerHeight(),
        otherElements = gridElement.children().not(".k-grid-content"),
        otherElementsHeight = 0;
    otherElements.each(function(){
        otherElementsHeight += $(this).outerHeight();
    });
    dataArea.height(gridHeight - otherElementsHeight);
}

$(window).resize(function(){
    resizeGrid();
});

$("#grid").kendoGrid({
    dataSource: {
        type: "odata",
        transport: {
            read: "http://demos.kendoui.com/service/Northwind.svc/Orders"
        },
        schema: {
            model: {
                fields: {
                    OrderID: { type: "number" },
                    ShipName: { type: "string" },
                    ShipCity: { type: "string" }
                }
            }
        },
        pageSize: 100,
        serverPaging: true,
        serverFiltering: true,
        serverSorting: true
    },
    filterable: true,
    sortable: true,
    pageable: true,
    dataBound: resizeGrid,
    columns: [{
            field:"OrderID",
            filterable: false
        },
        "ShipName",
        "ShipCity"
    ]
});