Setting ejGrid pager dynamically

[Dina Abdelbary]

Hi,

please i want a demo or documentation about setting the ejGrid pager dynamically,

My case is that i m using an ejGrid, i call an api service method that takes parameters(pageNo , pageSize) and gets data in the required page , and no of get records with pageSize, now i wanna handle this issue in the ejGrid. so i want know how to:

- set the grid pager's no of pages or all grid records count, to view it correctly to user, and not contain only 1 page (as the grid will not be loaded with all data, only one page)

- event that handle user's page selection (specific one , or next page or previous page...)

Waiting for your reply,

[Prasanna Kumar Viswanathan]

Hi Dina, 

Thanks for contacting Syncfusion support. 

Before we proceed with your requirement, please confirm the following details. 

1. In this you need to set the grid pager and pager information dynamically related to the api service method. 

2. You also need to handle the event when the user selects the particular page or next page or previous page button. For this, use actionBegin event of ejGrid. This event will triggered for every grid action before its starts. In this event we need to check the condition with requestType and process the data. 

 

For more information, refer the below help document. 

 

https://help.syncfusion.com/api/js/ejgrid#events:actionbegin 

  

Regards, 

Prasanna Kumar N.S.V 

[Dina Abdelbary]

yea, in all examples i have seen and used related to ejGrid is that we set the [dataSource]="gridData" 

 [pageSettings]="pagesettings", where the datasource will be all pages data, and pagesettings will contain the page size and so on, 

in my case i want to handle is that i don't have a method that gets all data and set it to be the grid datasource, the method i have takes the PageNumber and PageSize as parameters (its responsibility to get only the x records in page no y, not all grid records), 

so i wanna the grid to be first loaded with records in page number 1 , and the  pager will have pages according to all data records count, so if all records are 200 and the page size is 10, so the grid will be loaded with data in page no 1 with first 10 records, but the grid pager below will appear to the user from number 1 to 20 (as all records are 200, not the retrieved 10), 

and if the user selects page no. 3 , so i call the service and get the records in page number 3 , and so on.

in brief, i don't want to set all the grid data , i just wanna get page by page, with reasonable pager.

Thanks.

[Ragavee U S]

Hi Dina, 

We suspect that your requirement is to bind data from a webapi service to the grid and load the data to grid on demand. We can achieve this using the webapiAdaptor of the ejDataManager. Please refer to the below documentation for more information. 

https://help.syncfusion.com/js/grid/data-binding#webapi 

 

For your reference, we have prepared an angular 2 sample with webapi, which can be downloaded from the below location. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApiEF9831869 

Regards, 

Ragavee U S. 

[Dina Abdelbary]

Hi,

I think the attached sample does not use angular2!

[Dina Abdelbary]

i have changed the api service method to return 'PageResult<dynamic>', so now how can i set the datasource of the grid to be pageresult not direct list object (angular2) ??

plz i wanna solution ASAP

[Ragavee U S]

Hi Dina, 

Query #1: I think the attached sample does not use angular2! 

The attached sample includes angular 2 source with webapi controller. In order to run the sample, please follow the below steps. 

1.       Open the project in VS2015 

2.       Right click on the package.json file and click on restore packages. 

3.       Or, you can manually install the npm packages by navigating to the src folder and running the below commands. 

>npm run typings install 

>npm install 

4.       Then run the project by setting the index.html page as startup page. 

5.       The angular2 grid (folder src->grid->gridComponent.html) will be rendered by fetching data from the ApiController Orders. 

Query #2: i have changed the api service method to return 'PageResult<dynamic>', so now how can i set the datasource of the grid to be pageresult not direct list object (angular2) 

We have modified the previously updated sample to return PageResult<dynamic> data and thus bind it as dataSource to grid, which can be downloaded from the below location. 

http://www.syncfusion.com/downloads/support/directtrac/general/ze/WebApiEF_modified307649025 

Regards, 

Ragavee U S.