How to access currently edited row data
I have a dropdown list as a custom vue template and I'm using eventbus to send the selected value to the parent. Based on this value I would like to set some default values to the other columns on this added/edited row. How can I modify/access the current row data?
SIGN IN To post a reply.
7 Replies
BS
Balaji Sekar
Syncfusion Team
January 27, 2020 01:13 PM UTC
Hi Hiski,
Thanks for contacting us.
Query: Based on this value I would like to set some default values to the other columns on this added/edited row. How can I modify/access the current row data?
You can get the current edited data and other columns value while editing as like the below code example. Please refer the below code example and sample for more information.
|
<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>
|
Please let us know, if you need further assistance.
Regards,
Balaji Sekar.
HI
Hiski
January 28, 2020 05:20 AM UTC
Thank you for fast support!
Modifying the data works great, even when I'm getting following error sometimes to console:
"TypeError: Cannot read property 'ej2Instances' of undefined"
"TypeError: Cannot read property 'ej2Instances' of undefined"
from this line:
var editModule = this.$refs.grid.ej2Instances.editModule;
var editModule = this.$refs.grid.ej2Instances.editModule;
After page reload there is no error, but if I navigate to other page and back I get it.
BS
Balaji Sekar
Syncfusion Team
January 29, 2020 07:34 AM UTC
Hi Hiski,
Thanks for your update.
We suspect that the event bus handler was not removed after editing complete, so that it gets called again even after the component destroyed that causes the reported error. To resolve this error, we need to turn off the event listener after saving the value in row data. Please refer the below modified code example and sample.
|
<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>
. . .
|
Please get back to us, if you need further assistance.
Regards,
Balaji Sekar.
HI
Hiski
January 29, 2020 07:47 AM UTC
That seems to fix it. Thank you!
BS
Balaji Sekar
Syncfusion Team
January 29, 2020 11:19 AM UTC
Hi Hiski,
We glad that your issue has been fixed.
Please get back to us if you require further other assistance from us.
Regards,
Balaji Sekar.
HI
Hiski
January 29, 2020 11:54 AM UTC
One more question. How to access all data after editing? I need to send the data array to the parent component. The dataSource is not updated after editing. Thank you in advance!
BS
Balaji Sekar
Syncfusion Team
January 30, 2020 12:03 PM UTC
Hi Hiski,
Thanks for your update.
You can use actionComplete event for this requirement, which triggers after the data is saved to the dataSource. Please find the below code example and sample for more information.
|
<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>
|
Please get back to us, If you need further assistance.
Regards,
Balaji Sekar.
SIGN IN To post a reply.
