We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

146170 Jul 22,2019 12:53 PM UTC Oct 7,2019 10:28 AM UTC Angular - EJ 2 3
loading
Tags: Grid
Mayank K
Asked On July 22, 2019 12:53 PM UTC

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 [Syncfusion]
Replied On July 24, 2019 02:15 PM UTC

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.  
 
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 [Syncfusion]
Replied On October 7, 2019 10:28 AM UTC

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon