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