Thread ID: |
Created: |
Updated: |
Platform: |
Replies: |
| 150970 | Jan 26,2020 05:12 PM UTC | Jan 30,2020 12:03 PM UTC | Vue | 7 |
|
Tags: Data Grid |
|
<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>
|
This post will be permanently deleted. Are you sure you want to continue?
Sorry, An error occured while processing your request. Please try again later.
This page will automatically be redirected to the sign-in page in 10 seconds.
You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.
