API for Pagination in grid

[Nikitha]

Hello,

My requirement is

1) to load first 10 records into the grid in page-1 as soon as application page loads using api call - this part is done

2) in the api's response, along with the data list there is total count of records which should be shown in the bottom-right corner of the grid(marked red)

2) click on page-2 another set of 10 records are requested and added to the grid. - page 2 button is not shown as there is only first 10 items in the grid.

I got the above UI working, using these settings,

<ejs-grid #grid id="grid" [dataSource]="data"

allowPaging="true" allowSorting="true"

[allowGrouping]="true" [groupSettings]="groupOptions"

showColumnChooser="true" allowResizing= "true"

[gridLines]="Both" [toolbar]="toolbar"

[pageSettings]="pageSettings" allowReordering="true"

height="280" (dataBound)="dataBound($event)"

(actionComplete)="actionComplete($event)">
   <e-columns>
      <e-column field='id' headerText='ID' width=120></e-column>
      <e-column field='name' headerText='Name' width=150></e-column>
      <e-column field='status' headerText='Status' width=150></e-column>
      <e-column field='percentComplete' headerText='Overall % Complete' width=150></e-column>
      <e-column field='critical' headerText='Critical' width=120></e-column>
      <e-column field='start' headerText='Start' width=150></e-column>
      <e-column field='finish' headerText='Finish' width=150></e-column>
      <e-column field='totalFloat' headerText='Total Float' width=150></e-column>
   </e-columns>
</ejs-grid>

this.toolbar = ['ColumnChooser'];

this.groupOptions = { showGroupedColumn: false };
this.pageSettings = {
                      pageSizes: true,
                      pageSize: 10,
                      pageCount: 4,
                      totalRecordsCount: 39
                    };

I got an working example from a forum thread which matches my requirement, "https://stackblitz.com/edit/angular-gdmmju?file=remote-data.component.ts"
In the example a "WebApiAdaptor" is used which requires only the "url".
I use a service call, which has headers, params, body, pageNo and pageSize along with the url. I don't know how to add them in the WebApiAdaptor.

getList(body, pageNo, pageSize): Observable<any> {
        let currentUser = JSON.parse(localStorage.getItem('currentUser'));
        let headers = new HttpHeaders({ 'Authorization': 'Bearer ' + currentUser.token });
        headers = headers.append("Content-Type", "application/json; charset=utf-8");
        let params = new HttpParams().append('pageid', '21').append('action', 'at');
        let url = '/enterprise/list/' + pageNo + '/' + pageSize;
        return this.http.put(url, body, { headers: headers, params: params
 }).do((response: any) => {

 });

}

Or do I have to use a different adaptor?

I need help on this.

Thank you,

Nikitha R

[Nikitha]

Hello,

Update:

Forgot to add these requirement,

- api request type is PUT

- request body is an object type

Thank you,

Nikitha R

[Rajapandiyan Settu]

Hi Nikitha, 

Greetings from syncfusion support. 

 

Query :   in the api's response, along with the data list there is total count of records which should be shown in the bottom-right corner of the grid(marked red) click on page-2 another set of 10 records are requested and added to the grid. - page 2 button is not shown as there is only first 10 items in the grid. 

 

we have validated the provided details and created a sample with urlAdaptor which is used to perform all the on-Demand actions of grid in server side. when using the UrlAdaptor, you need to return the data as JSON from the controller action and the JSON object must contain a property as result with dataSource as its value and one more property count with the dataSource total records count as its value. 

By default the grid’s pagination totalRecordsCount is depends on the returned count (grid’s datasource length) from the server. Clicking next page sends the request to the server with query of skip and take  value and return the data of JSON object with (result and count). 

The CRUD operation in grid can be mapped to server-side Controller actions using the properties InsertUrl, RemoveUrl, UpdateUrl. please refer the below sample and documentation from more information. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/angular_core_url_adaptor-723502739.zip 

Please refer the below documentation which illustrates the different type of adaptors used in the grid. 

https://ej2.syncfusion.com/angular/documentation/grid/data-binding/?no-cache=1#remote-data 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/data-binding/#remote-data 

https://ej2.syncfusion.com/aspnetcore/documentation/grid/edit/#url-adaptor 

please get back to us if you need further assistance on this. 

Regards, 

Rajapandiyan S.