Catch event when paging

[Jóhanna Magnsdóttir]

Is it possible to catch the event when a user changes a page in a GridComponent?

Let's say I have this grid

<GridComponent dataSource={data} allowPaging={true} allowPaging={true} pageSettings={{ pageSize: 2 }}>
    <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>


How can I make it so that a function is called (with the new page number), when a user changes the page?

[Rajapandi Ravi]

Hi Jóhanna, 

Greetings from Syncfusion support 

From your update, we could see that you like to catch the event when the user changes the page. You can achieve your requirement by using actionBegin event of Grid. This event gets triggered while performing the Grid actions such as sorting, filtering, paging, grouping etc., starts. Please refer the below code example and sample for more information. 

 

actionBegin(args) { 

    if(args.requestType == 'paging'){ 

        console.log(args); 

    } 

  } 

Sample: https://stackblitz.com/edit/react-7ahsqu 

API: https://ej2.syncfusion.com/react/documentation/api/grid/#actionbegin 

In this event, you can access the below event argument. Please refer the below screenshot 

Screenshot: 

 

Regards, 

Rajapandi R