Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 145073 | Jun 5,2019 11:47 AM UTC | Jun 13,2019 08:45 AM UTC | Vue | 1 |
|
Tags: Data Grid |
|
<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
};
});
} |
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.
This page will automatically be redirected to the sign-in page in 10 seconds.
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.
