We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Set Dynamic Page Size for Grid based on the grid height


I would like to set the PageSize property to be dynamic. depending on the grid height, which is responsive. That way, the number of rows displayed will take up as much space as possible without a scroll bar. (the parent div is set to percent of the view port height, so the table size changes when i resize the window)

how can this be done? This is for react.

Thank you in advance

2 Replies

AT Aman Thapar December 10, 2019 10:33 PM UTC

For example: this does not work: (where do i do this in react) ?
                                    this.grid.current &&
                                    (this.grid.current.getRows().length *
                                        this.grid.current.getRowHeight()) /

SS Seeni Sakthi Kumar Seeni Raj Syncfusion Team December 11, 2019 02:11 PM UTC

Hi Aman, 

Thanks for contacting Syncfusion support, 

We have achieved your responsive Grid with pageSize update dynamically while resize the window basis. We would like to inform you that by default the row height for Grid will be 37(including border). To update the total records count in Grid, based on the browser window size, you need to provide the calculations based on your requirement and browser window. The final value need to be assigned to “pageSize” property of Grid. This will update the Grid’s total records count for the particular page. The calculation is completely based on your requirement, and the final value you set for the “pageSize” will only affect the Grid. 
  componentDidMount() {  
    window.addEventListener('resize', this.onresize.bind(this)); 
  onresize(e) {      
    var grid = this.gridInstance; 
    var rowHeight = grid.getRowHeight(); //height of the each row      
    var gridHeight = Number(window.innerHeight - 120); //grid height 
    var pageSize = Number(grid.pageSettings.pageSize) + 10; //initial page size 
    var pageResize = (gridHeight - (pageSize * rowHeight)) / rowHeight; 
    grid.pageSettings.pageSize = pageSize + Math.round(pageResize); 


Please get back to us, if you need further assistance. 

Seeni Sakthi Kumar S 

Live Chat Icon For mobile
Up arrow icon