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 id="app">
<ejs-grid id="Grid"
ref="grid"
:dataSource="data"
:editSettings="editSettings"
:allowPaging="true"
:toolbar="toolbar"
>
<e-columns>
<e-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="90"></e-column>
<e-column field="CustomerID" headerText="Customer ID" width="120"></e-column>
<e-column field="Freight"
headerText="Freight"
editType="numericedit"
:validationRules="customerIDRules"
type="number"
width="90"></e-column>
<e-column field="ShipCountry" headerText="Ship Country" width="120"></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { DropDownButtonPlugin } from "@syncfusion/ej2-vue-splitbuttons";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data } from "./datasource";
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
Vue.use(DropDownListPlugin);
Vue.use(DropDownButtonPlugin);
export default {
data() {
return {
waterMark: "Select a export option",
height: "220px",
data: data,
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true
},
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"],
customerIDRules: { required: true, min: 0, max: 1000 }
};
},
provide: {
grid: [Page, Toolbar, Edit]
},
methods: {}
};
</script>
|
