GridComponent Pagination With WebAPI

[nqaba nleya]

Good day, 

I am having issues preparing the logic to work with my Pagination.

I have an API endpoint that returns data based on the pageSize and pageNumber. E.g if i specify the pageSize as 10, i should be able to retrieve only 10 records. If i have a record set of 100, i should be able to get 10 pages but the issue that i am having is that i do not want to retrieve all my 100 records i want to retrieve only 10 based on the pageNumber being the subset and show them on the grid.

Ideally i want to the grid pagination numbers to reach 10 before i have fetched the data. basically have empty pages. If i click on pageNumber 7 it should get the 7th subset of the data from the database 

I want to be able retrieve the records for each page when i click on the page number.

We realised this was supposed to be achieved through setting pageCount of PageSettingsModel when we initialise the grid but is not working.

Kind Regards,

[Sivaranjani Rajasekaran]

Hi nqaba nleya,

 

Greetings from Syncfusion support,

After reviewing your inquiry, we recommend using remote data binding to achieve your requirement. In remote data binding, After enabling Paging feature, when you set the pageSettings.pageSize to 10, only 10 records are fetched from the server during the initial load. When you navigate to page 4, the Grid will send a request to the server and fetch the 10 records for that specific page from the database.

In remote data binding, the data adaptor is used to send requests that the server can understand and process. The server's response is handled accordingly. The adaptor can be specified using the adaptor property of the DataManager. We offer several adaptors, such as JSON Adaptor, Url Adaptor, OData, WebAPI, and WebMethod, among others.

We have prepared a sample using the WebAPI adaptor, where the page settings are configured with pageSize set to 10, pageCount set to 8, and pageSizes set to true. Initially, only 10 records are fetched from the database and displayed in the Grid using the WebAPI adaptor. When you navigate to page 4, a new request is sent to the server, and the records for that page are retrieved from the database.

Please refer to the code and sample for more information.

Code Example : 

 ngOnInit(): void {

    this.data = new DataManager({

      url: 'http://localhost:5030/api/Orders',

      adaptor: new WebApiAdaptor()

    });

    this.editSettings = { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' };

    this.toolbar = ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'Search'];

    this.initialPage =  { currentPage: 1, pageSize: 10, pageCount: 8, pageSizes: true };

  }

Sample : Please find the sample attached.

Documentation Link : 

1. Adaptors :  Adaptors in Angular Data component | Syncfusion
2. Paging : Paging in Angular Grid component | Syncfusion
3. API PageSettings : Angular Grid API component - Syncfusion 

Steps to Run the sample :

1. Download the sample.
2. Extract the file.
3. Open it in VS Code.
4. Navigate to the client folder and install the node modules using npm i.
5. Move out of the client folder and navigate to the server folder.
6. Start the server using the dotnet watch run command.
7. It will build the link. Copy and paste the link into your browser to run the sample.

Please get back to us if you need further assistance.

Regards,

Sivaranjani R.

Attachment: WebApiAdaptorAngular_a1008ba5.zip