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.
Maximize productivity with
30% off* for a limited time
using BOOSTDEV30.
Includes 3- and 5-packs.
*Some exclusions may apply.
New Product LaunchBoldDesk: Help desk ticketing software starts at $10 for 3 agents.
Try it for free.|
<template>
<div id="app">
<ejs-grid ref='grid' id='grid' :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :editSettings='editSettings' :toolbar='toolbar'
:actionComplete="actionComplete">
<e-columns>
. . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin,Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids";
Vue.use(GridPlugin);
export default {
name: "App",
data: () => {
return {
data: data,
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Dialog' },
. . .
};
},
methods: {
actionComplete: function(e) {
if (e.requestType === "save") { //need to check e.requestType == “batchsave” for Batch editing
// you can do your code here
}
}
},
provide: {
grid: [Toolbar, Edit, Page]
}
};
</script>
|
|
<template>
<div id="app">
<ejs-grid ref='grid' id='grid' :dataSource="data" :allowPaging='true' :pageSettings='pageSettings' :editSettings='editSettings' :toolbar='toolbar'
:actionBegin="actionBegin">
<e-columns>
. . .
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin,Toolbar, Edit, Page } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js';
Vue.use(GridPlugin);
export default {
. . .
methods: {
actionBegin: function(e) {
if (e.requestType === "save") {
console.log(e.form.querySelector("#gridCustomerID").value);
console.log("save");
console.log(e.rowData);
}
}
};
</script>
|
