Ajax Call and Pagging Issue

[sundar sambandam]

Hi there,

I am trying to load the grid data on click of button using ajax(axios)  call but I am unable to handle paging events?

I really appreciate if you show me some example to handle this situation.

Thanks & Regards

Sundar

[Pavithra Subramaniyam]

Hi sundar, 

 

Greetings from Syncfusion. 

 

You can catch the Grid Paging action by using the “actionBegin” and “actionComplete” events which will be triggered before and after the page action is done. Please refer to the below code example, documentation link and sample link for more information. 

 

[vue.js] 

new Vue({   

              el: '#app', 

              template: ` 

    <div id="app"> 

    <ejs-button id='collapse' cssClass='e-flat' @click.native='click'>Data</ejs-button> 

        <ejs-grid id="Grid" ref="grid" :actionBegin="Begin" :actionComplete="Complete" :allowPaging='true' height='315px'> 

          <e-columns> 

             .  .  . 

          </e-columns> 

        </ejs-grid> 

    </div> 

`, 

 

   

   methods: { 

     click: function() { 

       axios.get('https://js.syncfusion.com/demos/ejServices/Wcf/Northwind.svc/Orders') 

    .then(function (response) { 

    this.$refs.grid.ej2Instances.dataSource=response.data.d; 

    }) 

       

   }, 

   Begin: function(e){ 

     if(e.requestType == 'paging'){            // triggers before Paging action 

       console.log("BeforePaging"); 

     }      

   }, 

   Complete: function(e){ 

     if(e.requestType == 'paging'){      // triggers after Paging action 

       console.log("AfterPaging"); 

     } 

    } 

   }, 

    provide: { 

    grid: [Page] 

  } 

 

Documentation: https://ej2.syncfusion.com/vue/documentation/api/grid/#actionbegin  

                              https://ej2.syncfusion.com/vue/documentation/api/grid/#actioncomplete  

 

Sample               : https://plnkr.co/edit/NxT5YEINUoyD0mGJuGGa?p=preview  

 

Please get back to us if you need further assistance. 

 

Regards, 

Pavithra S.