We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Data Grid Pager refresh

I am getting current page number of pager in grid after i click on some page number, on that event i send axios call to the server and get 5 records depending on pagination i have given, the results get rendered in the grid, but then i again get the paging event unneccessarily, and the data gets refreshed and paging gets disabled. I have attached 2 screenshots.
In 1st screenshot i clicked on 2nd page, i get alert that current page is 2 , the data comes but then again i get current page as page 1(in screenshot2)? Why is this happening?

Attachment: grid_pager_b6ce17a2.rar

1 Reply

HJ Hariharan J V Syncfusion Team June 13, 2019 03:45 AM

Hi Sayali, 

Thanks for contacting Syncfusion support. 

From your query, we found that you want use your own service (i.e axios) to perform paging in Grid. We suggest you to use custom binding concept of the Grid achieve this requirement. While using this custom binding, the grid expect an object from your service. You service emitted value should be an object with properties result and count. 

At the initial Grid rendering please call your service in Vue mounted hook and please return the result like as “{result: […], count: …}” format to Grid. If you want to perform any Grid actions (like CURD, sorting, filtering, paging, grouping) then we suggest to use Grid dataStateChange and dataSourceChanged events. For grid actions such as paginggroupingsorting, etc., the dataStateChange event is invoked. You have to query and resolve data using your service in this event based on this event arguments. Please refer the below code snippet, 

    <div class="col-lg-12 control-section"> 
            <ejs-grid :dataSource="data" 
import Vue from "vue"; 
import { 
} from "@syncfusion/ej2-vue-grids"; 
import { OrderService } from "./order-service"; 
export default Vue.extend({ 
  data() { 
    return { 
      data: {}, 
      pageOptions: { pageSize: 5, pageSizes: true }, 
      orderService: new OrderService() 
  mounted() { // Used vue mounted hook to provide dataSource to Grid and handled the initial paging 
    let state = { skip: 0, take: this.pageOptions.pageSize }; 
  methods: { 
    dataStateChange: function(state) { // Handled the other Grid actions like paging, sorting etc.. by using dataState change event 
      this.orderService.execute(state).then(gridData => (this.data = gridData)); 
  provide: { 
    grid: [Page] 

public execute(state: DataStateChangeEventArgs): Promise < DataResult > { 
            return this.getData(state); 
        private getData(state: DataStateChangeEventArgs): Promise < DataResult > { 
            const pageQuery = `$skip=${state.skip}&$top=${state.take}`; // handled the page query 
            this.ajax.url = `${ 
            return this.ajax.send().then((response: any) => { 
                let data: any = JSON.parse(response); 
                return <DataResult>{ 
                    result: data["d"]["results"], 
                    count: parseInt(data["d"]["__count"], 10) // returned the rsult as result and count format 

For your convenience, we have prepared the sample demo with this custom binding concept and you can find that sample from the below link, 

Note: We must need to provide data source to Grid like as “{result: […], count: …}” format to achieve this custom binding concept. 

We have already discussed about this topic in our below help documentation. So please refer this documentation for more details, 

Documentation links, 

If we misunderstood your query please share more details about your requirement with your full Grid code snippet. This will help us to provide the better solution for requirement as early as possible. 


Live Chat Icon For mobile
Up arrow icon