Set Dynamic Page Size for Grid based on the grid height

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

Reply | Reply with quote

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()
                            }}

Reply | Reply with quote

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

}

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

Reply | Reply with quote

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

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US