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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

How to access currently edited row data

Thread ID:

Created:

Updated:

Platform:

Replies:

150970 Jan 26,2020 05:12 PM UTC Jan 30,2020 12:03 PM UTC Vue 7
loading
Tags: Data Grid
Hiski
Asked On January 26, 2020 05:12 PM UTC

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? 

Balaji Sekar [Syncfusion]
Replied On 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 { GridPluginPageToolbarEdit } 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; 
      } 
    }, 
    getTemplateValuefunction(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: [PageEditToolbar] 
  } 
}; 
</script> 
 
<style> 
</style> 
 

 
 
Please let us know, if you need further assistance. 
 
Regards, 
Balaji Sekar. 


Hiski
Replied On 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"
from this line:
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.

Balaji Sekar [Syncfusion]
Replied On 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: [PageEditToolbar] 
  } 
}; 
</script> 
. . . 

 
 
Please get back to us, if you need further assistance. 
 
Regards, 
Balaji Sekar. 


Hiski
Replied On January 29, 2020 07:47 AM UTC

That seems to fix it. Thank you!

Balaji Sekar [Syncfusion]
Replied On 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. 


Hiski
Replied On 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!

Balaji Sekar [Syncfusion]
Replied On 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. 


CONFIRMATION

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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon

Live Chat Icon For mobile
Live Chat Icon