Not able to fetch the page number and size of the grid for the server side pagination in Angular

[Mayank K]

Hi Syncfusion Team,

 

                I am currently working on ejsGrid in my Angular 6 project having Node as server and MySQL as database.

                I wish to achieve server side pagination in my EJS Grid. I have the request structuire ready as:

 

                https://localhost:3000/v1/App/Report/status/null/page/{{currentPageValue}}/limit/{{PagerLimit}}/

 

                Now, I need to pass the value dynamically from the Grid i.e. when I select the "Page" as 3 and "Pagelimit" as 30 in my Grid, I should be able to fetch the values of 3 and 20 from the grid and pass it to my request structure.

              For every change, I need to pass the values of Clicked Page Number and the corresponding dropdown at that time.

                Please, suggest me a way to fetch the values of the clicked page and corresponding drop down value at the time of click

                and which I can pass to my request structure.

 

For Example, When I click on 4 and the page size is selected as 30, so I wish to fetch the value of Page No of current pager and the Page size selected at the click of every page no.

 

I have tried multiple classes  {PageSettingsModel, QueryCellInfoEventArgs, PagerModel, PageEventArgs} to achieve this but was not able to bind the data back to fetch the values.

Please help me achieve the above functionality in Angular 6. Using EJS Grid

Attachment: Page

Attachment: pages_d37107e3.zip

[Renjith Singh Rajendran]

Hi Mayank, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. We would like to suggest you to use the “actionBegin” event of Grid. This event will be triggered each time you click on a page number or the item in the pager dropdown.  

Documentation : https://ej2.syncfusion.com/angular/documentation/api/grid/#actionbegin 

 

Please use the code below inside the “actionBegin” event hanlder to fetch the currentPage and currentPageSize. After you fetch the required values, you can pass these to your request structure. 

     

     <ejs-grid #Grid ... (actionBegin)="actionBegin($event)"> 

        ... 

    </ejs-grid> 

 

 

export class AppComponent { 

    ... 

    @ViewChild("Grid") 

    public grid:GridComponent; 

    ... 

    actionBegin(args){ 

      var currentpage = this.grid.pagerModule.pagerObj.currentPage;          //Fetch the current Page  

      var currentpagesize = this.grid.pagerModule.pagerObj.pagerdropdownModule.dropDownListObject.value;          //Fetch the current pager dropdown value 

    } 

} 

 

Please get back to us if you need further assistance. 

 

Regards, 

Renjith Singh Rajendran. 

[Thavasianand Sankaranarayanan]

Hi Ramarao, 

Greetings from Syncfusion support. 

Before proceeding to your query please provide the following details for better assistance.. 

1. Share the screen shot or video demonstration of the issue.
2. Share the adaptor details which you have applied in your sample.
3. Share the complete Grid rendering code example.
4. Share the Essential Studio version details.

 

Regards, 

Thavasianand S.