|
Parent Component:
<template>
<ejs-grid ref='grid' id='Grid' :actionBegin='actionBegin' :editSettings='editSettings' :toolbar='toolbar' :dataSource="localData" :allowPaging="true">
...
</ejs-grid>
</template>
<script>
import Vue from 'vue';
import vueColumnTemplate from "./columntemplate.vue"
import { GridPlugin, Page, Edit, Toolbar } from '@syncfusion/ej2-vue-grids';
import { data } from '../datasource.js';
Vue.use(GridPlugin);
Vue.prototype.$eventHub = new Vue();
export default {
provide: {
grid: [ Page, Edit, Toolbar ]
},
data() {
return {
customerID: ""
}
},
methods: {
editTemplate: function() {
return {
template: vueColumnTemplate,
};
},
actionBegin: function(args) {
if(args.requestType == "beginEdit") {
this.$eventHub.$on('CustomerID', this.getTemplateValue);
};
if(args.requestType == "save") {
args.data.CustomerID = this.customerID; // Changed the CustomerID value by using the global variable
}
},
getTemplateValue: function(e) {
this.customerID = e; // collected the dropdownlist selected value and stored it in global Vue variable
}
}
}
</script>
Child Component:
<template>
<div class="attribute-container">
<div class="row">
<ejs-dropdownlist :dataSource="options" :change='change' v-model="$data.data.CustomerID" :fields='fields'></ejs-dropdownlist>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(DropDownListPlugin);
export default {
data() {
...
},
methods: {
change: function(args) { // dropdownlist change event
this.$eventHub.$emit("CustomerID", args.itemData.CustomerID); // emitted the event from child component
}
}
};
</script> | 
