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
  1. Home
  2. Forum
  3. Vue
  4. How to get the value from grid in one column template setting?

How to get the value from grid in one column template setting?

Hi,

I am trying to get one value from grid in one column template like this:

e-column :template='templatecomp'

data() {
    return {
        username: 'aa'
    }
}

templatecomp: function() {
    return {
        template: Vue.component('columnTemplate', {
                template:`<div></div>`,
                data: function () {
                  return {
                    data: {}
                  }
                },
                computed: {
                },
                methods: {
                  execute() {
                    
                   }
                }
         }
    }
}

How to get the username value in execute()  method?

3 Replies
PS Pavithra Subramaniyam Syncfusion Team March 8, 2019 11:26 AM UTC

Hi Jzy, 
 
Thanks for contacting Syncfusion support. 
 
We have validated your query and created a sample based on your requirement. Here, we have emit an event from main component and listen emitted values in column template(one component)  by using eventHub. The EventHub is a global bus used to communicate between any components. Please find the below code example and sample for your reference. 
 
[code example] 
... 
Vue.use(GridPlugin); 
 
Vue.prototype.$eventHub = new Vue(); 
 
new Vue({ 
    el: '#app', 
    template: ` 
    <div id="app"> 
        <ejs-grid id='grid' ref='grid' :dataSource="data" :allowPaging="true" :queryCellInfo='info' :pageSettings='pageSettings'> 
         <e-columns> 
            <e-column field='OrderID' headerText='Order ID' textAlign='Right' minWidth= 100 width=150 maxWidth=250 ></e-column> 
            <e-column field='CustomerID' headerText='Customer ID' width=120></e-column> 
            <e-column field='Freight' headerText='Freight' width=80></e-column> 
            <e-column headerText='columnTemplate' width='150' textAlign='Center' :template='cTemplate'></e-column> 
          </e-columns> 
        </ejs-grid> 
    </div> 
`, 
 
  data() { 
    return { 
      data: [ 
          ... 
      ], 
       cTemplate: function () { 
           return { 
               template: Vue.component('columnTemplate',{ 
                   template: `<button v-on:click="fun(event)">buttton</button>`, 
                   data: function(){ 
                       return { 
                           data:{}, 
                           usernameTemplate:"" 
                       } 
                   }, 
 
                 created() { 
                    this.$eventHub.$on('detail', (e)=>{      //listen emitted values in other component 
                     this.usernameTemplate =e; 
                       }); 
                    }, 
                   methods: { 
                       fun: function(e){ 
                          console.log("passed value: "+  this.usernameTemplate); 
                       } 
                   } 
               }) 
           } 
       }, 
      ... 
    }; 
  }, 
  methods: { 
     info: function(args) { 
        this.$eventHub.$emit('detail',this.username); //emit event 
    } 
  }, 
  provide: { 
    grid: [Page] 
  } 
 
}); 
 
 
Please find the sample in below link. 
 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Pavithra S. 


JZ Jzy March 11, 2019 03:36 AM UTC

Hi Pavithra,

Thank you so much for your help. It is very useful.

Thanks,
Jzy

PS Pavithra Subramaniyam Syncfusion Team March 11, 2019 04:06 AM UTC

Hi Jzy,  

Thanks for your update. 

We are happy to hear that the provided information helped you. 

Please contact us if you need any further assistance. As always, we will be happy to assist you.  

Regards,  
Pavithra S. 


Loader.
Up arrow icon