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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Thread ID:

Created:

Updated:

Platform:

Replies:

143189 Mar 8,2019 07:45 AM UTC Mar 11,2019 04:06 AM UTC Vue 3
loading
Tags: Data Grid
Jzy
Asked On March 8, 2019 07:45 AM UTC

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?

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


Jzy
Replied On March 11, 2019 03:36 AM UTC

Hi Pavithra,

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

Thanks,
Jzy

Pavithra Subramaniyam [Syncfusion]
Replied On 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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

;