Data Grid Pager refresh

[sayali saitawdekar]

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

[Hariharan J V]

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 paging, grouping, sorting, 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, 

<template> 

    <div class="col-lg-12 control-section"> 

        <div> 

            <ejs-grid :dataSource="data" 

                      :allowPaging="true" 

                      :pageSettings="pageOptions" 

                      :allowSorting="true" 

                      :dataStateChange="dataStateChange"> 

                <e-columns> 

 

                       ... 

 

               </e-columns> 

            </ejs-grid> 

        </div> 

    </div> 

</template> 

<script> 

import Vue from "vue"; 

import { 

  GridPlugin, 

  Page 

} from "@syncfusion/ej2-vue-grids"; 

import { OrderService } from "./order-service"; 

 

Vue.use(GridPlugin); 

 

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 }; 

    this.dataStateChange(state); 

  }, 

  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] 

  } 

}); 

</script> 

orderService: 

 

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 = `${ 

                this.BASE_URL 

                }?${pageQuery}&$inlinecount=allpages&$format=json`; 

            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, 

Sample: https://codesandbox.io/s/vue-template-lmsc1 

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, 

 

https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#custom-binding 

https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#handling-grid-actions 

https://ej2.syncfusion.com/vue/documentation/grid/data-binding/#perform-crud-operations 

 

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. 

Regards, 

Hariharan