Paginate with Web API

[Verum Genus]

I am trying to do searching and pagination with a Web API that is not mine, i have the basic working for it to talk, but when want to paginate I need to use different GET params than what Vue is sending.  When someone presses Page two, I need to get to: example.com/api/data?page=2&items=15

How do I jimmy that into this please, and ad a bonus, how do i also do something like this:  example.com/api/data?page=2&items=15 &name=test

export default({

  data() {
    return {
      data: new DataManager({
        url: 'example.com/api/data',
        adaptor: new WebApiAdaptor(),
        crossDomain: true
      })
    };
  },
  provide: {
    grid: [Page]
  }
});

[Pavithra Subramaniyam]

Hi Verum Genus,

Thanks for contacting Syncfusion support.

By default, the WebApiAdaptor will send top and skip parameters for pagination. If you want to customize these parameters in your API request, then we suggest the “Custom Adaptor” feature which provides an option to override the default adaptor functions. Please refer to the below code example and documentation link for more information.

class customAdaptor extends WebApiAdaptor {  //extend the WebApiAdaptor

  processQuery() {

    // Executing base class processQuery function

    var original = super.processQuery.apply(this, arguments);

    console.log(original);

    // Here you can customize the 'original' request as per your need and return it

    return original;

  }

};

.  .  .

export default ({

 

  data() {

    return {

      data: new DataManager({

        url: 'example.com/api/data',

        adaptor: new customAdaptor(),

        crossDomain: true

      })

    };

  },

  provide: {

    grid: [Page]

  }

});

 

https://helpej2.syncfusion.com/vue/documentation/grid/data-binding/remote-data#custom-adaptor

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

Regards,

Pavithra S

[Verum Genus]

Hello Pavithra, I saw this, but I was not sure how to get from a Grid action like Pagination, Sort, Search, Filter to a customAdaptor request.  Do you have a example of something like this?

ta

[Pavithra Subramaniyam]

Hi Verum Genus,

We could not get the current Grid action inside the CustomAdaptor. However, we can identify the actions using parameters which is passed to the “processQuery” method. Please refer to the below parameter lists, its corresponding actions and screenshot.

• skip, top - paging
• orderby – sorting
• filter – filtering, searching

Regards,

Pavithra S