How to get Current Page, Page Size, Sorting Direction and Sorting Column Name values from Grid?

[Mustafa Ekici]

Hi I've read documentation again and again but I couldnt get currentPage and pageSize or other info from Grid component. So I have custom service which need just this values.

My custom listing service just needs skipCount(page) and maxResultCount values like I tried to show below and it should be triggered by click and dropDownChanged events.

this.list.page = 0(currentPage);

this.list.maxResultCount = 10(pageSize);

I just send picture about paging values but also need sorting values which I mentioned in Subject area.

Before writing my query I almost read documentation for 2 days. Please do not refer documentation again because I lost inside of documentation due to my shallow experience on Angular. Thanks in advance for helping me out.

[Rajapandi Ravi]

Hi Mustafa,

Greetings from Syncfusion support

Based on your query we could see that you are using custom binding in your application and like to perform paging action by sending skip take values to the service. For every grid action(such as Filter, Page, etc.,), we have triggered the dataStateChange event and, in that event arguments, we have sent the corresponding action details(like skip, take, filter field, value, sort direction, etc.,) based on that, you can perform the action in your service and return the data as a result and count object.   

Sample Demos: https://ej2.syncfusion.com/angular/demos/#/material/grid/async-pipe

dataStateChange: https://ej2.syncfusion.com/angular/documentation/api/grid/#datastatechange

Note: ‘dataStateChange’ event is not triggered at the Grid initial render. If you are using a remote service, you need to call your remote service by manually with a pagination query (need to set skip value as 0 and take value based on your pageSize of pageSettings in Grid. If you are not defined pageSize in pageSettings, you need to send the default value 12 ) in ngOnInIt. Please return the result like as “{result: […], count: …}” format
to Grid.  

In your query you have bind the click event to the Grid and in this click event you are defining current page and pagesize value, So before we start providing solution to your query, we need more information for our clarification. Please share the below details that will be helpful for us to provide better solution.

1)          Share your exact requirement with detailed description.

2)          Share the details about at what case you are trying to send the current page and pagesize.

Regards,

Rajapandi R

[Mustafa Ekici]

1)          Share your exact requirement with detailed description.

I tried to get component values from data grid like current page, page size. Basically for currentPage I need to read 4 and pagesize 1 from grid. Then I will pass it to my listing service which it will trigger backend and refresh datasource.

author = { items: [], totalCount: 0 } as PagedResultDto<AuthorDto>;

I am providing  “{result: […], count: …}” format as items and totalCount.

2)          Share the details about at what case you are trying to send the current page and pagesize.

When I click on numerics or arrows of pagination I want to read values and my service will return it back to the datasource itself. 

I want to add one example from Angular Material Table. 

I have two events for changing pages and sorting.

For sorting I am taking values with matSortChange,

and for pagination I am taking from page events. Than I pass those values to the listing service.

To put in a nutshell, If I can read DataGrid values when they triggered by user I will use it in my listing service like given example. I hope I represent what I require. Thanks for your patience. 

[Rajapandi Ravi]

Hi Mustafa,

Thanks for the update

Based on your query we could see that you like to get the currentpage and pagesize value from the Grid’s Pager. You can get the currentpage and pagesize values by using the below way, please refer the below code example for more information.

 

gridInstance.pagerModule.pagerObj.currentPage //get the current page

gridInstance.pagerModule.pagerObj.pageSize //get the pagesize

grid.sortSettings.columns //access the sorted columns field name and column direction

 

Screenshot:

Regards,

Rajapandi R