Get parent column instance in Vue Grid component
16 Mar 20235 minutes to read
Emit values from one component and listen to emitted values in other component by using the eventHub
. The eventHub
is a global event bus used to communicate between any components.
In the following example, we have defined a template column in the grid column definition which emits a value and listens the emitted value in the created event of the Grid component.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height="272px">
<e-columns>
<e-column
field="OrderID" headerText="Order ID" textAlign="Right" width="100" isPrimaryKey="true"
></e-column>
<e-column
field="CustomerID" headerText="Customer ID" width="120"
></e-column>
<e-column
field="ShipCity" headerText="Ship City" width="100"
></e-column>
<e-column
field="ShipName" headerText="Ship Name" width="100" :template="cTemplate"
></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { data } from './datasource.js'
Vue.use(GridPlugin);
Vue.prototype.$eventHub = new Vue();
export default {
data() {
return {
data: data,
cTemplate: function(){
return {
template: Vue.component("columnTemplate", {
template: `<button v-on:click="click(event)">button</button>`,
data: function () {
return {
data: {},
};
},
methods: {
click: function (event) {
this.$eventHub.$emit("detail", this.data.index);
},
},
}),
};
},
};
},
created() {
this.$eventHub.$on("detail", (event) => {
alert("passed value:" + event);
});
},
};
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>