Edit this page

Dynamically Change the Page Size of the Grid to Adjust Its Height

Environment

Product Grid for ProgressĀ® Kendo UIĀ®
Operating System All
Browser All
Browser Version All

Description

How can I change the pageSize property of the Grid when the height changes so that as many rows as possible are always displayed.

Solution

  1. Calculate the number of rows that will fit in the available space by subscribing to the resize event of the window element.
  2. Change the pageSize by using the pageSize method of the dataSource.
<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();

    var newHeight = gridElement.height();

    var headerHeight = $(".k-grid-header").height();
    var pagerHeight = $(".k-grid-pager").height();
    var rowHeight = $("#grid tr:last").height();

    var numberOfRows = Math.round((newHeight - headerHeight - pagerHeight) / rowHeight);

    gridElement.data("kendoGrid").dataSource.pageSize(numberOfRows);
    gridElement.data("kendoGrid").refresh();
  }

  $(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
    },
    scrollable: false,
    resizable: true,
    pageable: true,
    columns: [{
        field: "OrderID",
        filterable: false,
        width: 200
      },
      "ShipName",
      "ShipCity"
    ]
  });
</script>

See Also

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

Give article feedback

Tell us how we can improve this article

close
Dummy