Kendo grid data not displaying when pageSize is set dynamically by window screen size

Question

I am trying to set pagesize of the grid dynamically with the window size and populate the data items/rows inside it. I've added a function to calculate how many rows the grid can fit in. I've tested the function and it works correctly. But the thing is the data items/rows are not displayed inside the grid. FYI: here, I am just using local datasource as a testing purpose.

Calculating rows function:

  function RowCount(){
  var TableHead = $('.k-grid-header').height();  
  var WWidth = $(window).height(); 
  var  TablePager = Math.round($('.k-grid-pager').height());
  var ExtraSpace=TableHead+TablePager;
  var EachRow=$('td:first-child').height();
  var  GridContent = Math.round(WWidth-ExtraSpace);
  var Rows=Math.round((WWidth-ExtraSpace)/EachRow);
    //return (Rows);
     alert(Rows);
  }

Finally re binding with grid and getting the data:

var grid = $("#grid").data("kendoGrid");
//grid.hideColumn(0); 
    grid.bind("dataBound", RowCount);
    grid.dataSource.fetch();

However, data items/rows are not displayed. Where am I doing wrong? I've also set autobindig: false And this is my dojo: http://dojo.telerik.com/afUZeL/12

Ross Bush Ross Bush · Accepted Answer · 2018-01-12T19:45:13

You can't get a RowCount until the grid is loaded. You can't load the grid without know the PageSize.

I would suggest you set an initial size and then refresh with your calculations using the pagesize of the datasource.

var grid = $("#grid").data("kendoGrid");
//grid.hideColumn(0); 
//grid.bind("dataBound",RowCount);
//grid.dataSource.fetch();
grid.dataSource.pageSize(RowCount());
grid.refresh();

Kendo grid data not displaying when pageSize is set dynamically by window screen size

1 Answers