Get the emitted column template value in Vue Grid component

22 Oct 202413 minutes to read

The Syncfusion Grid component enables effective communication between different components through an event bus. This functionality is particularly useful for managing emitted values from template column, allowing one component to emit values and other components to listen to these emitted values. This functionality is achieved using eventHub, a global event bus used for communication between any components.

In the following example, a template column in the Syncfusion Grid is defined, which emits a value when a button is clicked. The emitted value is then captured in the created event of the Grid component.

<template>
    <div id="app">
      <div id="message"></div>
  
        <ejs-grid ref="grid" :dataSource="data" height="272px" :created="created">
           <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="columnTemplate"
                ></e-column>
            </e-columns>
        </ejs-grid>
    </div>
  </template>
  <script setup>
  import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
  import { data } from './datasource.js'
  import { createApp } from "vue";
  const app = createApp();
  import mitt from "mitt";
  var bus = mitt();
  const columnTemplate = function() {
                  return {
                      template: app.component("columnTemplate", {
                          template: `<button v-on:click="click()">button</button>`,
                          data: function () {
                              return {
                                  data: {},
                              };
                          },
                          methods: {
                              click: function () {
                                  bus.emit("detail", this.data.index);
                              },
                          },
                      }),
                  };
              }
      const created = () => {
          bus.on("detail", (event) => {
            document.getElementById("message").innerText="passed value:" + event;
          });
      }
  </script>
  <style>
    @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
    #message
    {
      color:red;
      text-align: center;
      padding-bottom: 20px;
    }
  </style>
<template>
    <div id="app">
      <div id="message"></div>
        <ejs-grid ref="grid" :dataSource="data" height="272px" :created="created">
           <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="columnTemplate"
                ></e-column>
            </e-columns>
        </ejs-grid>
    </div>
  </template>
  <script>
  import Vue from "vue";
  import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
  import { data } from './datasource.js'
  Vue.prototype.$eventHub = new Vue();
  export default {
  name: "App",
  components: {
  "ejs-grid":GridComponent,
  "e-columns":ColumnsDirective,
  "e-column":ColumnDirective,
  },
    data() {
        return {
            data: data,
            columnTemplate: function(){
                return {
                    template: Vue.component("columnTemplate", {
                        template: `<button v-on:click="click()">button</button >`,
                        data: function () {
                            return {
                                data: {},
                        };
                        },
                        methods: {
                            click: function () {
                                this.$eventHub.$emit("detail", this.data.index);
                            },
                        },
                    }),
                };
            },
        };
    },
    methods:{
        created() {
            this.$eventHub.$on("detail", (event) => {
            document.getElementById("message").innerText="passed value:" + event;
            });
        },
    }
  };
  </script>
  <style>
    @import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
    @import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
    #message
    {
      color:red;
      text-align: center;
      padding-bottom: 20px;
    }
  </style>