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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Set Dynamic Page Size for Grid based on the grid height

Thread ID:

Created:

Updated:

Platform:

Replies:

149820 Dec 10,2019 04:28 PM UTC Dec 11,2019 02:11 PM UTC React - EJ 2 2
loading
Tags: Grid
Aman Thapar
Asked On December 10, 2019 04:28 PM UTC

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
Replied On December 10, 2019 10:33 PM UTC

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 [Syncfusion]
Replied On 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. 
[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); 
  } 

 

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

Regards, 
Seeni Sakthi Kumar S 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon