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
- Calculate the number of rows that will fit in the available space by subscribing to the
resizeevent of thewindowelement. - Change the
pageSizeby using thepageSizemethod 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>