1. Home
  2. Forum
  3. Vue
  4. How to send a general variable to the column template?

How to send a general variable to the column template?

I want to send a variable that is not in the row object, to the template.

<ejs-grid ref='grid' id='Grid' :dataSource="data" :allowSorting='true' :sortSettings='sortOptions'>
     <e-columns>
          <e-column :headerText="__('general.actions')" width="180" minWidth='270' :template='buttonsTemplate' textAlign='Right' :allowSorting='false'></e-column>
     </e-columns>
</ejs-grid>

Attached found an image with the code part where you see the variable and template.

I want to send the variable canViewActions to the buttonsTemplate template


Attachment: Screenshot_20200214_at_15.36.38_696a51c.zip

7 Replies
PK Prasanna Kumar Viswanathan Syncfusion Team February 17, 2020 05:51 PM UTC

Hi Pop, 
 
Thanks for contacting Syncfusion support. 
 
Before we proceed with your query we need some clarifications based on the attached screenshot 
 
1. In your query you need to send a variable to the template. But in your code example you have render three buttons in the template and you have called a function in a button click event. In that click event you send some value as a parameter. So, please share what data do you need to share in that event? 
 
2. Do you need to perform CRUD operation using that buttons? 
 
Please share the exact requirement it will help us to provide solution ASAP. 
 
Regards, 
Prasanna Kumar N.S.V 


PA Pop Alex February 19, 2020 07:36 AM UTC

Hi,

The canViewActions variable is boolean and will help me display the buttons or not. Taking into account whether or not the user has the right to see the buttons.

This variable is not defined in data table, as in the example:

export default {
data: function() {
return {
canViewActions: false, // the general variable that I want to use in a component
data: data // the data that is sent in the grid,
                                buttonsTemplate: () => { //template for actions column
                                   return { template : Vue.component('columnTemplate',{
template: `<div class="btns-actions-table">
<button class="main-action-row" v-if="canViewActions">EDIT</button>
                                                <button class="main-action-row" v-if="canViewActions">DELETE</button>
</div>`,
data: function() {
return {
data: {}
}
},
})}
},
}
},

PK Prasanna Kumar Viswanathan Syncfusion Team February 20, 2020 12:38 PM UTC

Hi Pop , 
 
Greetings from Syncfusion support 
 
Query : Display buttons based on condition in column template. 
 
We have analyzed your query and we suggest to follow the below steps to achieve your requirement. Here we have taken the “canViewActions” variable as Boolean type. This variable checks the condition(true or false) and render the button element based on that. Please refer to the below code snippet and sample for more reference.  
 
App.vue 

<template> 
  <div id="app"> 
    <ejs-grid :dataSource="data" height="310"> 
      <e-columns> 
        <e-column field="action" headerText="Discontinued" :template="cTemplate" ></e-column> 
… 
      </e-columns> 
    </ejs-grid> 

export default { 
  data: () => { 
    return { 
      data: data, 
      cTemplate: function() { 
        return { 
          template: Vue.component("columnTemplate", { 
            template: `<div v-if=canViewActions class="template"> 
                    <button class="secondary-action-row" @click="editFranchise">ADD</button> 
                </div> 
                <div v-else class="template"> 
                    <button class="secondary-action-row" @click="editFranchise">DELETE</button> 
                </div>`, 
            }, 
            computed: { 
              canViewActions: function() { 
                return this.data.action; 
              } 
}; 

 
Data.ts 

export let data: Object[] = [ 
  { 
    OrderID: 10248, 
    CustomerID: "VINET", 
    EmployeeID: 5, 
    action: true, 
    OrderDate: new Date(), 
  }, 
  { 
    OrderID: 10249, 
    CustomerID: "TOMSP", 
    EmployeeID: 6, 
    action: false, 
… 
]; 
 
 
 
Please get back to us if you need further assistance 
 
Regards 
Prasanna Kumar N.S.V 


PA Pop Alex February 21, 2020 10:02 AM UTC

Hi, 
I don't want to send the action parameter to each object.

I want to use a variable outside of the data variable.



PK Prasanna Kumar Viswanathan Syncfusion Team February 24, 2020 11:49 AM UTC

Hi Pop , 
 
Thanks for the update. 
 
Query : Use variable instead of sending action parameter. 
 
We have analyzed your query and prepared a sample according to that. In that sample we have declared a global variable called “Val” and assigned a value to that. In the canViewActions function we have checked the variable to some condition and return the boolean value to the template. 
 
Please refer the below code snippet and sample for more reference. 
 
App.vue 

<template> 
  <div id="app"> 
    <ejs-grid :dataSource="data" height="310"> 
      <e-columns> 
        <e-column  field="action" headerText="Discontinued"  width="150"  textAlign="Center"  :template="cTemplate"></e-column> 
… 
      </e-columns> 
    </ejs-grid> 

export default { 
  data: () => { 
      cTemplate: function() { 
        return { 
          template: Vue.component("columnTemplate", { 
            template: `<div v-if=canViewActions class="template"> 
                    <button class="secondary-action-row" @click="editFranchise">ADD</button> 
                </div> 
                <div v-else class="template"> 
                    <button class="secondary-action-row" @click="editFranchise">DELETE</button> 
                </div>`, 
            data: function() { 
              return { 
                data: {}, 
                val: 5 
              }; 
            }, 
            computed: { 
              canViewActions: function() { 
                var temp = this.val > 4; 
                return temp; 
              } 
            } 
}); 
 
 
Please get back to us if you need further assistance 
 
Regards 
Prasanna Kumar N.S.V 


NW Nicolas Wild February 25, 2020 12:33 PM UTC

I have the same problem and that solution doesnt really help.
Here you just use data passed in via the dataset/node data.

I just want to pass some eventbus to the tree which I can use in template to indicate a button click (button got rendered in template).
The template component has no root or parent, so no idea how to get back the click event to my page component.
Or how to inject some other global variable to template component - something which is not related to the actual node...

MS Magesh Sabapathi Syncfusion Team February 26, 2020 01:45 PM UTC

Hi Nicolas, 
 
Query : pass some eventbus to the tree which I can use in template to indicate a button click. 
 
We have analyzed your query and prepared a sample. In the sample, initially we have rendered the button component using column template. Then, we have emit an event from column template(one component) and listen emitted values in other component by using eventHub. Please refer the below code and sample for more reference. 
 
Index.js 

 
import Vue from "vue"; 
import { GridPlugin, Page, Sort, Filter, Group, Aggregate, Edit, Toolbar, CommandColumn  } from "@syncfusion/ej2-vue-grids"; 
import { closest } from "@syncfusion/ej2-base"; 
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" :allowSorting='true' :allowFiltering='true' 
:pageSettings='pageSettings':editSettings='editSettings' :toolbar='toolbar'> 
         <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: [ 
          { OrderID: 10248, CustomerID: 'VINET', Freight: 32.38, OrderDate:new Date(8364186e5) }, 
          { OrderID: 10249, CustomerID: 'TOMSP', Freight: 11.61,OrderDate:new Date(836505e6)}, 
          { OrderID: 10250, CustomerID: 'HANAR', Freight: 65.83,OrderDate:new Date(8367642e5)}, 
          { OrderID: 10251, CustomerID: 'VICTE', Freight: 41.34, OrderDate:new Date(8367642e5)}, 
          { OrderID: 10252, CustomerID: 'SUPRD', Freight: 51.3, OrderDate:new Date(8379738e5)}, 
          { OrderID: 10253, CustomerID: 'HANAR', Freight: 58.17, OrderDate:new Date(8377146e5)}, 
      ], 
       cTemplate: function () { 
           return { 
               template: Vue.component('columnTemplate',{ 
                   template: `<button v-on:click="fun(event)">buttton</button>`, 
                   data: function(){ 
                       return { 
                           data:{} 
                       } 
                   }, 
                   methods: { 
                       fun: function(e){ 
                           debugger 
                           this.$eventHub.$emit('detail',this._uid); 
                       } 
                   } 
               }) 
           } 
       }, 
      pageSettings: { pageSize: 5 }, 
      editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true, mode: 'Normal' }, 
      toolbar: ['Add', 'Edit', 'Delete'], 
    }; 
  }, 
  methods: { 
     onClick: function(args) { 
        let rowObj= this.$refs.grid.ej2Instances.getRowObjectFromUID(closest(args.target, '.e-row').getAttribute('data-uid')); 
        let data = rowObj.data; 
        alert(JSON.stringify(data)); 
    } 
  }, 
  provide: { 
    grid: [Page, Sort, Filter, Group, Aggregate, Edit, Toolbar, CommandColumn] 
  }, 
  created() { 
      this.$eventHub.$on('detail', (e)=>{ 
          alert("passed value: "+ e); 
      }); 
  }, 
 
}); 



Please get back to us if you need further assistance 

Regards 
Magesh 


Loader.
Up arrow icon