Edit this page

Resize and Expand the Kendo UI Grid to 100% Height

Web standards require elements with a percentage height to have a parent with an explicit height. The rule applies recursively until an element with a pixel height is reached, or the root <html> element is reached. In the latter case the body and html elements need a 100% height style as well. 100% high elements cannot have margins, paddings, borders, and siblings.

The examples below demonstrate how to resize the Kendo UI Grid in three different scenarios:

  1. Resize a Kendo UI Grid together with the browser viewport.
  2. Resize a Grid in a Kendo UI Window.
  3. Resize a Grid resizes in a Kendo UI Splitter.

The example below demonstrates how to resize the Kendo UI Grid together with the browser viewport.

Example
    <style>
      html,
      body,
      #parent,
      #grid
      {
        margin: 0;
        padding: 0;
        border-width: 0;
        height: 100%; /* DO NOT USE !important for setting the Grid height! */
      }

      html
      {
        overflow: hidden;
        font: 13px sans-serif;
      }
    </style>
    <div id="parent">
      <div id="grid"></div>
    </div>
    <script>
      var gridElement = $("#grid");

      function resizeGrid() {
        gridElement.data("kendoGrid").resize();
      }

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

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
          },
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                ShipName: { type: "string" },
                ShipCity: { type: "string" }
              }
            }
          },
          pageSize: 25,
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true
        },
        filterable: true,
        sortable: true,
        resizable: true,
        pageable: true,
        columns: [{
              field:"OrderID",
              filterable: false,
              width: 200
            },
            "ShipName",
            "ShipCity"
        ]
      });
    </script>

The example below demonstrates how to resize the Kendo UI Grid in a Kendo UI Window.

Example
    <style>
      #grid
      {
        border-width: 0;
        height: 100%; /* DO NOT USE !important for setting the Grid height! */
      }

      #window
      {
        padding: 0;
      }

      html
      {
        font: 13px sans-serif;
      }
    </style>
    <div id="window">
      <div id="grid"></div>
    </div>
    <script>

      $("#window").kendoWindow({
        visible: false,
        width: 600,
        height: 300,
        actions: ["maximize"],
        title: "Kendo UI Window"
      }).data("kendoWindow").center().open();

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
          },
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                ShipName: { type: "string" },
                ShipCity: { type: "string" }
              }
            }
          },
          pageSize: 25,
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true
        },
        filterable: true,
        sortable: true,
        resizable: true,
        pageable: true,
        columns: [{
                field:"OrderID",
                filterable: false,
                width: 200
            },
            "ShipName",
            "ShipCity"
        ]
      });
    </script>

The example below demonstrates how to resize the Kendo UI Grid in a Kendo UI Splitter.

Example
    <style>
      html,
      body,
      #splitter,
      #grid
      {
        margin: 0;
        padding: 0;
        border-width: 0;
        height: 100%; /* DO NOT USE !important for setting the Grid height! */
      }

      html
      {
        font: 13px sans-serif;
        overflow: hidden;
      }
    </style>
    <div id="splitter">
      <div id="left-pane">left pane</div>
      <div id="right-pane">
        <div id="grid"></div>
      </div>
    </div>
    <script>

      $("#splitter").kendoSplitter({
        panes: [
            { size: 100 },
            { }
        ]
      });

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Orders"
          },
          schema: {
            model: {
              fields: {
                OrderID: { type: "number" },
                ShipName: { type: "string" },
                ShipCity: { type: "string" }
              }
            }
          },
          pageSize: 25,
          serverPaging: true,
          serverFiltering: true,
          serverSorting: true
        },
        filterable: true,
        sortable: true,
        resizable: true,
        pageable: true,
        columns: [{
                field:"OrderID",
                filterable: false,
                width: 200
            },
            "ShipName",
            "ShipCity"
        ]
      });
    </script>

See Also

For more runnable examples on the Kendo UI Grid, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy