|
[App.vue]
<template>
<div id="app">
<ejs-grid
ref="grid"
:dataSource="data"
:editSettings="editSettings"
height="270"
:toolbar="toolbar"
:load="load"
>
<e-columns>
<e-column
field="OrderID"
headerText="Order ID"
textAlign="Right"
:isPrimaryKey="true"
width="100"
></e-column>
<e-column
field="CustomerID"
headerText="Customer ID"
width="120"
></e-column>
<e-column
field="Freight"
headerText="Freight"
textAlign="Right"
width="120"
format="C2"
></e-column>
<e-column
field="ShipCountry"
headerText="Ship Country"
width="150"
></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
Vue.use(GridPlugin);
export default {
data() {
return {
data: data,
editSettings: {
allowEditing: true,
allowAdding: true,
allowDeleting: true,
},
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel", "Search"],
};
},
methods: {
load: function (args) {
var isPermitted = false;
if (!isPermitted) {
// disable the editing actions in the Grid
this.$refs.grid.$el.ej2_instances[0].editSettings = {
allowEditing: false,
allowAdding: false,
allowDeleting: false,
};
// define the toolbar buttons
this.$refs.grid.$el.ej2_instances[0].toolbar = ["Search"];
}
},
},
provide: {
grid: [Page, Edit, Toolbar],
},
};
</script>
|
