
<template>
    <div id="app">
        <ejs-grid ref="grid" :dataSource='data' height='315px' :created = 'created'>
            <e-columns>
                <e-column field='OrderID' headerText='Order ID' textAlign='Right' :isPrimaryKey='true' width=120></e-column>
                <e-column field='OrderDate' headerText='Order Date' width=130 textAlign='Right' format='yMd'></e-column>
                <e-column field='ShipCountry' headerText='Ship Country' width=120></e-column>
                <e-column field='Freight' headerText='Receipt Amount'  width=120 :template='cTemplate'></e-column>
            </e-columns>
        </ejs-grid>
    </div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, parentsUntil } from "@syncfusion/ej2-vue-grids";
import { data } from './data.js';

Vue.use(GridPlugin);

export default {
  data() {
    return {
      data: data,
      cTemplate: function () {
          return { template : Vue.component('columnTemplate',{
             template: `<div class="image">
                     <input :id='id' :value='value' class='custemp' type='text' style='width: 100%'/>
                </div>`,
                data: function() {
                    return {
                        data: {}
                    }
                },
                computed: {
                    id: function() {
                        return this.data.OrderID;
                    },
                    value: function() {
                        return this.data.Freight;
                    }
                }
          })}
      }
    };
  },
  methods: {
    created(args) {
        this.$refs.grid.ej2Instances.element.addEventListener('keyup', function (e) { // Bind the keyup event for the grid.
            if (e.keyCode == 13) { // Based on this condition, you can find whether the target is an input element or not.
                //e.preventDefault()
            }
        });
    }
  },
}
</script>
<style>
</style>