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
ref="grid"
id="Grid"
:dataSource="data"
. . .
<e-column
field="ShipCountry"
headerText="Ship Country"
width="150"
:editTemplate="editTemplate"
. . .
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, Page, Toolbar, Edit } from "@syncfusion/ej2-vue-grids";
import { gridData } from "./data";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { DatePickerPlugin } from "@syncfusion/ej2-vue-calendars";
import UserDropdown from "./child";
Vue.use(GridPlugin);
Vue.use(DropDownListPlugin);
Vue.use(DatePickerPlugin);
Vue.prototype.$eventHub = new Vue();
export default {
components: {
UserDropdown
},
data() {
return {
shipCountry: "",
. . .
},
toolbar: ["Add", "Edit", "Delete", "Update", "Cancel"]
};
},
methods: {
editTemplate: function() {
return { template: UserDropdown };
},
actionBegin: function(args) {
if (args.requestType === "beginEdit") {
// event hub emit listener for dropdown
this.$eventHub.$on("ShipCountry", this.getTemplateValue);
}
if (args.requestType === "save") {
args.data.ShipCountry = this.shipCountry;
}
},
getTemplateValue: function(e) {
var editModule = this.$refs.grid.ej2Instances.editModule;
this.shipCountry = e;
// here we can get the current Edited row data
var currentRowData = editModule.getCurrentEditedData(editModule.formObj.element,{});
// to select other input field -- grid element id + field name
editModule.formObj.element.querySelector("#Grid" + "CustomerID").value = e;
}
},
provide: {
grid: [Page, Edit, Toolbar]
}
};
</script>
<style>
</style>
|
|
<template>
<div id="app">
<ejs-grid
ref="grid"
id="Grid"
:dataSource="data"
:editSettings="editSettings"
:actionBegin="actionBegin"
. . .
methods: {
editTemplate: function() {
return { template: UserDropdown };
},
actionBegin: function(args) {
if (args.requestType === "beginEdit") {
this.$eventHub.$on("ShipCountry", this.getTemplateValue);
}
if (args.requestType === "save") {
args.data.ShipCountry = this.shipCountry;
//turn off the event listener once we have start to save the value
this.$eventHub.$off("ShipCountry", this.getTemplateValue);
}
},
getTemplateValue: function(e) {
this.shipCountry = e;
var editModule = this.$refs.grid.ej2Instances.editModule;
var currentRowData = editModule.getCurrentEditedData(editModule.formObj.element,{});
// to select other input field -- grid element id + field name
editModule.formObj.element.querySelector("#Grid" + "CustomerID").value = e;
}
},
provide: {
grid: [Page, Edit, Toolbar]
}
};
</script>
. . .
|
|
<template>
<div id="app">
<ejs-grid
ref="grid"
id="Grid"
:dataSource="data"
:actionComplete="actionComplete"
:editSettings="editSettings"
:actionBegin="actionBegin"
. . .
methods: {
. . .
actionComplete: function (e) {
if (e.requestType === 'save') {
// here you can get all the data after updating
console.log('Data',this.$refs.grid.ej2Instances.dataSource);
}
},
. . .
};
</script>
|
