Set Dynamic Page Size for Grid based on the grid height

[Aman Thapar]

Hello,

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

Aman

[Aman Thapar]

For example: this does not work: (where do i do this in react) ?

pageSettings={{

                                pageSize:

                                    this.grid.current &&

                                    (this.grid.current.getRows().length *

                                        this.grid.current.getRowHeight()) /

                                        this.grid.current.getRowHeight()

                            }}

[Seeni Sakthi Kumar Seeni Raj]

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. 

[index.js] 

  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); 

  } 

 

Sample link: https://stackblitz.com/edit/react-msu5bp-zg2mct?file=index.js 

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

Regards, 

Seeni Sakthi Kumar S