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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Data Grid Pager refresh

Thread ID:

Created:

Updated:

Platform:

Replies:

145073 Jun 5,2019 11:47 AM UTC Jun 13,2019 08:45 AM UTC Vue 1
loading
Tags: Data Grid
sayali saitawdekar
Asked On June 5, 2019 11:47 AM UTC

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 [Syncfusion]
Replied On June 13, 2019 08:45 AM UTC

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, 


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. 

Regards, 
Hariharan 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon