GridComponent Pagination

[Gino]

Hi, I'm new to EJ2 components, is there a way for GridComponent to have unbounded max data.?
Meaning e.g I can preload 10 rows of record and upon clicking next page it will call upon a service that will return another set of 10 records
for display.

[Dhivya Rajendran]

Hi Gino, 

Thanks for using Syncfusion Product, 

We have analyzed your requirement, yes we have an option for pagination in Grid. We have created a sample for your reference, In the below sample we have enable paging in Grid by using allowPaging property as true. kindly refer the below sample and code snippet for more information. 

import { GridComponent, ColumnDirective, Page, Inject } from '@syncfusion/ej2-react-grids'; 

export class Paging extends SampleBase<{}, {}> { 

    render() { 

        return ( 

                    <GridComponent dataSource={data} allowPaging={true}> 

                        <ColumnsDirective> 

                            <ColumnDirective field='ProductID' headerText='ID'></ColumnDirective>                                

                         . . . . . . 

                        </ColumnsDirective> 

                        <Inject services={[Page]} /> 

                    </GridComponent>) 

    } 

} 

ReactDOM.render(<Paging />, document.getElementById('sample')); 

Sample : https://plnkr.co/edit/W3rVYeeWgvodCI8qbUnR?p=preview  

 

In the above sample, we have bind grid with service and the grid will only load current view data and request subsequent page data on demand. 

 

Documentation : https://ej2.syncfusion.com/16.1.24/react/demos/#/material/grid/remotedata  

Regards,  

R.Dhivya