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

Edit Template sharing data with parent template

Thread ID:

Created:

Updated:

Platform:

Replies:

144841 May 24,2019 08:39 PM UTC May 27,2019 10:38 AM UTC Vue 1
loading
Tags: Data Grid
Eric Albino
Asked On May 24, 2019 08:39 PM UTC

I am currently using the ejs-dropdown list as a custom vue template like in the documentation https://ej2.syncfusion.com/vue/documentation/grid/edit/#using-template that uses editTemplate. I am trying to share data between the two components I am wondering if there is a way. 

Thavasianand Sankaranarayanan [Syncfusion]
Replied On May 27, 2019 10:38 AM UTC

Hi Eric, 

Greetings from Syncfusion support. 

We suggest to use Vue Global Event Bus concept to achieve this requirement. By default this EventBus allows us to emit an event from one component and listen for that event in another component. So we can easily communicate with two Vue components by using this EventBus concept. In the below code we have showed how to use this concept to achieve your requirement, 

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> 

For your reference we have prepared the sample with the above code and you can find that sample from the below link, 

 
General link for Vue Event Bus concept: https://alligator.io/vuejs/global-event-bus/ 
 
Regards, 
Thavasianand S. 


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