I would like to use Grid component with pagination, but I have a question. Can I use with two pagination bar ?
I would like to place pagination top and bottom of the grid. Is there any solution for this ?
(Like in the picture)
Hi Csatai,
Greetings from Syncfusion support.
Based on your requirement, you want to render the pager component both at the top and bottom of the grid. We have prepared a sample in which we have rendered pager component at the top and bottom of the grid.
Please refer the below code example.
gridInstance; pagerInstance; dataBound() { if (this.pagerInstance && this.gridInstance) { // assign grid pager values to the top pager values. this.pagerInstance.totalRecordsCount = this.gridInstance.pagerModule.pagerObj.totalRecordsCount; this.pagerInstance.pageCount = this.gridInstance.pageSettings.pageCount; this.pagerInstance.pageSizes = this.gridInstance.pageSettings.pageSizes; this.pagerInstance.pageSize = this.gridInstance.pageSettings.pageSize; this.pagerInstance.currentPage = this.gridInstance.pageSettings.currentPage; this.pagerInstance.refresh(); } } click(args) { // change the page based on the top pager click. this.gridInstance.goToPage(args.currentPage); } dropDownChanged(args) { // change the page size in the girds pager based on the value in the top pager. this.gridInstance.pageSettings.pageSize = args.pageSize; } render() { return ( <div className="control-pane"> <div className="control-section"> <PagerComponent ref={(pager) => (this.pagerInstance = pager)} click={this.click.bind(this)} dropDownChanged={this.dropDownChanged.bind(this)} ></PagerComponent> <GridComponent ref={(grid) => (this.gridInstance = grid)} dataSource={data} locale="en-US" allowPaging={true} height={365} pageSettings={{ pageCount: 4, pageSizes: true }} dataBound={this.dataBound.bind(this)} > <ColumnsDirective> <ColumnDirective field="OrderID" headerText="Order ID" width="120" textAlign="Right" ></ColumnDirective> <ColumnDirective field="CustomerName" headerText="Customer Name" width="150" ></ColumnDirective> <ColumnDirective field="OrderDate" headerText="Order Date" width="130" format="yMd" textAlign="Right" /> <ColumnDirective field="Freight" headerText="Freight" width="120" format="C2" textAlign="Right" /> <ColumnDirective field="ShipCountry" headerText="Ship Country" width="170" ></ColumnDirective> </ColumnsDirective> <Inject services={[Page]} /> </GridComponent> </div> </div> ); }
|
Sample: https://stackblitz.com/edit/react-hxlsw2?file=index.js
Please get back to us for further details.
Regards,
Joseph I.
Hi Joseph!
Thank you very much! It works fine!
Thanks,
Krisztian Csatai
Hi Krisztian Csatai,
We are glad that the provided solution worked. Please contact us if you any issues in future.
Regards,
Suganya Gopinath.