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. Image for the cookie policy date

How to pass a data from parent to child in Vue Grid

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. 

1 Reply

TS Thavasianand Sankaranarayanan Syncfusion Team 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. 


Loader.
Up arrow icon