How to access currently edited row data

[Hiski]

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]

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> 

@import "https://cdn.syncfusion.com/ej2/material.css"; 

</style> 

 

 

Sample: https://codesandbox.io/s/150970-modify-data-g6gc9 

 

Please let us know, if you need further assistance. 

 

Regards, 

Balaji Sekar. 

[Hiski]

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]

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> 

. . . 

 

Sample: https://codesandbox.io/s/150970-modify-data-g6gc9 

 

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

 

Regards, 

Balaji Sekar. 

[Hiski]

That seems to fix it. Thank you!

[Balaji Sekar]

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]

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]

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> 

 

 

Sample: https://codesandbox.io/s/150970-modify-data-g6gc9 

 

Please get back to us, If you need further assistance. 

 

Regards, 

Balaji Sekar.