Pagination over REST

[Marko]

Hi Team,

I have tried setup pagination on client site with syncfusion grid and I did not succeed.

I have use WebApi adaptor and I have turn on fiddler and I see that WebApiAdaptor insert some query params. (?$inlinecount=allpages&$skip=0&$top=12)

My 2 question is:

I have my own routes and I follow route standard, could I changed this without changing source code of grid?

If yes, please give me example. When I changed query params, did grid trigger grid event when I click on next page. For example

My url is localhost:3333/api/persons?page=1&pageSize=10.

So, when I click on next button then need to be changed query params to localhost:3333/api/persons?page=2&pageSize=10.

It's possible to do it with syncfusion grid? If yes, please give me example

[Venkatesh Ayothi Raman]

Hi Marko, 

Thanks for contacting Syncfusion support. 

We have checked your query and you can achieve your requirement by using the customAdaptor feature in Datamanager.  We have prepared a simple sample in which we have used customAdaptor which is extended from webApiAdaptor. In this new customAdaptor class we have replaced the ‘skip’ and ‘top’ parameters with ‘page’ and ‘pageSize’ and you can also change the values for that parameters by using the ‘convertToQueryString()’ method in the same class. Please refer to the below code example, Screenshot, Documentation link and sample link.  

 

[component.ts] 

 

class CustomAdaptor extends WebApiAdaptor { 

    public options = { 

        sortBy: '$orderby', 

        select: '$select', 

        skip: 'page', 

        take: 'pageSize', 

        count: '$inlinecount', 

        . . . 

    }; 

    public convertToQueryString(request: any, query: Query, dm: DataManager): string { 

        request.page = (request.page / request.pageSize) + 1; 

        let res: string[] | string = []; 

        let table: string = 'table'; 

        let tableName: string = request[table] || ''; 

        let keys: string[] = Object.keys(request); 

        for (let prop of keys) { 

            (<string[]>res).push(prop + '=' + request[prop]); 

        } 

        res = (<string[]>res).join('&'); 

       return res.length ? tableName + '?' + res : tableName || ''; 

    } 

} 

 

export class FetchDataComponent { 

  @ViewChild('grid') 

  public grid: GridComponent; 

 

  ngOnInit(): void { 

    this.data = new DataManager({ 

        url: 'api/Orders', 

        adaptor: new CustomAdaptor, 

    }); 

  } 

} 

[Request] 

 

Documentation: https://ej2.syncfusion.com/angular/documentation/data/adaptors.html#writing-custom-adaptor  

Sample               : http://www.syncfusion.com/downloads/support/directtrac/general/ze/page_query-1337913762  

Please let us know if you have any further assistance on this. 

 

Regards, 

Venkatesh Ayothiraman. 

[Marko]

Hi Raman,

Thank you for your sample and it works well.

I have one more question, Could you please explain why you use table and table name, I don't see purpose of that.

Many thanks

[Venkatesh Ayothi Raman]

Hi Marko, 

 

Thanks for the update. 

The ‘table’ and the ‘tableName’ variables are provided for specify the resource name or table name from where the data should be retrieved. Please refer to the below documentation link.  

Documentation: https://ej2.syncfusion.com/documentation/data/querying.html?lang=typescript  

Regards, 

Venkatesh Ayothiraman.