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.
BoldSignEasily embed eSignatures in your .NET applications. Free sandbox with native SDK available.
|
<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
};
});
} |
