|
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource='data' :allowFiltering='true' :allowPaging='true' :filterSettings='filterOptions' :pageSettings='pageOptions'
:allowSorting='true' :allowGrouping='true' :dataStateChange='dataStateChange'>
<e-columns>
<e-column field= "OrderID" headerText="Order ID" width="130" textAlign='Right' ></e-column>
<e-column field= "EmployeeID" headerText="Employee ID" foreignKeyValue="Extension" :dataSource="colData" width="150"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script lang="js">
import Vue from "vue";
import { GridPlugin, DataStateChangeEventArgs,Edit,Filter, Sorts,Toolbar, Sort, Group, Page, ForeignKey, DataResult } from "@syncfusion/ej2-vue-grids";
import { Ajax } from '@syncfusion/ej2-base';
import { data } from './datasource';
import { OrderService } from "./OrderService.ts";
import { EmployeeService } from "./EmployeeService.ts";
Vue.use(GridPlugin);
export default Vue.extend ({
name: "app",
data() {
return {
data: {},
colData:[{EmployeeID:1,Extension:23},
{EmployeeID:2,Extension:34},
{EmployeeID:3,Extension:12},
{EmployeeID:4,Extension:37},
{EmployeeID:5,Extension:342}],
filterOptions: {
type: 'Excel'
},
pageOptions: { pageSize: 10, pageCount: 4 },
orderService: new OrderService(),
data1: OrderService,
};
},
mounted() {
let state = { skip: 0, take: 10 };
this.dataStateChange(state);
},
provide: {
grid: [Page,Filter, Edit, Toolbar, ForeignKey]
},
methods: {
dataStateChange: function (state) {
if (state.action && (state.action.requestType === "filterchoicerequest" || state.action.requestType ==="filtersearchbegin")) {
this.orderService.execute(state).then((e) => {
state.dataSource(e.result); // bind the result value to the grid
});
} else {
this.orderService.execute(state).then(( gridData ) => this.data = gridData );
}
}
}
})
</script>
| 
