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. Help rendering a vue component in a column

Help rendering a vue component in a column

Hi,

I'm trying this example:



The combox-box that is shown in the first column is not set with a particular value and every column appears as not set.
Suppose in the grid datasource we have for each record a property named "OrderStatus".
How could we automatically bind each record's property to the corresponding cell's combobox so that each combobox automatically selects the corrisponding record's value?

Thank you.


11 Replies
HJ Hariharan J V Syncfusion Team June 26, 2019 10:08 AM UTC

Hi Silvio, 

Thanks for contacting Syncfusion support. 

From your query, we found that you want to provide value to the dropDownList in its initial rendering. You can use the value property of the dropDownList to achieve this requirement. Please refer the below code snippet and sample for more details, 

dropdownTemplate: function () { 
            return { 
              template: Vue.component('bindDropdown', { 
                template: `<ejs-dropdownlist id='dropdownlist' :value='dropdownInitialData' :dataSource='dropData'> </ejs-dropdownlist>`, 
                data: function() { 
                  return { 
                      dropData: ['VINET', 'TOMSP', 'HANAR', 'VICTE', 'SUPRD', 'HANAR', 'CHOPS', 'RICSU'], 
                  } 
                }, 
                computed: { 
                  dropdownInitialData: function(e) { 
                    return this._data.data.CustomerID; 
                  } 
                } 
              }) 
            } 
          } 


In this sample we have provided the respective row data “CustomerID” key value to the dropDownList. 

Regards, 
Hariharan 


SI Silvio June 27, 2019 08:23 PM UTC

Thank you for your help.
In your sandbox it seems everything simple and correct and it works.
But as soon as I make a simple my test using VUE CLI 3, the component is not rendered inside the custom cell of the grid.
I've simplified very much the example, only a static "p" element is now inserted in the component.
But, in my example the component is not rendered in the custom cell!
I attach here the simple project I've created with VUE CLI and a screenshoot that shows you the component is not rendered.
Are you able to detect what I'm missing?
Thank you !


Attachment: Syncfusion_90c676dd.zip

SI Silvio June 27, 2019 08:49 PM UTC

Solved !!!

I've found this thread that explains the problem.


SI Silvio June 27, 2019 10:03 PM UTC

I'm sorry, but, solving the previuos problem, I still have another problem.

Now I'm able to insert in grid's column one simple component and one component made by syncfusion.
But I'm not able to insert a component made by me.
I'm not able to understand what I'm missing.

Consider the project I've attached made with VUE CLI.

In the component HelloWorld I use another component HelloWorld2, very very simple.
If a render HelloWorld2 in the main template of Helloworld it is rendered correctly.
Otherwise if I use the same component in the template returned to customize the column in the datagrid, the component is not rendered.
What's wrong in what I tried ?

Thank you.

Attachment: customgrid_1ad533c0.zip

HJ Hariharan J V Syncfusion Team July 1, 2019 12:06 PM UTC

Hi Silvio, 

From your sample we found that you want to use referred Vue component (i.e HelloWorld2) in Grid column template. So, we suggest to directly provide that referred view component (i.e HelloWorld2) in template property instead of  again creating the new Vue component. To resolve this issue, please change your column template code like as below code snippet, 

import HelloWorld2 from './HelloWorld2.vue'; 
 
myComponentTemplate: function () { 
        return { 
            template: HelloWorld2 
        } 
    } 

We have modified your sample with this code and you can find that modified sample from the below link, 


Regards, 
Hariharan 


SI Silvio July 7, 2019 12:44 PM UTC

Thank you for your answer.
Now it works.
But now suppose I add  a prop in my child component Helloworld2 and also an event that is emitted but the component itself.
How is it possibile with this your solution to pass a computed property to the child component, using v-bind directive, or joining the emitting event using the v-on directive ?


HJ Hariharan J V Syncfusion Team July 8, 2019 12:08 PM UTC

Hi Silvio, 

We have analyzed your query. We are not certain about your requirement. We suspect that, you would like to trigger an event with the added props accessed inside that event. Based on this, we have prepared a sample in which we have bind a button click event in the child component, and inside that click handler we have accessed the added props. 

[HelloWorld2.Vue] 

  <template> 
    <div class="hello" id="hello"> 
      <p>{{msg}}</p> 
        <button v-on:click="Click">Add 1</button> 
    </div> 
  </template> 

  <script> 
  export default { 
    name: 'HelloWorld2', 
    props: { 
      msg: {type:String, default:"HelloWord2"}, 
    }, 
    methods:{ 
      Click(args){ 
        alert("click triggered"+ this.$props.msg)    //Accessed the props 
      } 
    } 
  } 
  </script> 


 
If we have misunderstood your query, please get back to us with the following details for better assistance. 
  1. Share a detailed description of your exact requirement.
  2. Share with us a video demo explaining your complete requirement or the problem you are facing.

The provided information will help us analyze the problem, and provide you a solution as early as possible. 

Regards, 
Hariharan 


TN Thomas Neuberger May 20, 2021 07:34 AM UTC

Hi,

I have a similar problem as Silvio. The solution you provided seems to work only with static data.

The problem is that I need to listen to an event that is fired inside of the custom template and in that event handler I need to use a data property from the component that contains the grid (the array passed to the grid as dataSource). I see three options to achieve this:

  • Pass the property value to the cusom template
  • Bind to an event of the custom template
  • Access the grid data from inside of the custom template
I there any way to use one of these options?

SK Sujith Kumar Rajkumar Syncfusion Team May 25, 2021 11:02 AM UTC

Hi Thomas, 
 
Greetings from Syncfusion support. 
 
Based on the query we could understand that your requirement is to access the current row data(of the Grid) in the template element’s event function. You can achieve this by accessing the data as demonstrated in the below code snippet, 
 
<template> 
    <div class="hello" id="hello"> 
        <button v-on:click="Click">{{idData}}</button> 
    </div> 
</template> 
 
<script> 
export default { 
  name: 'HelloWorld2', 
  data() { 
    return { 
      // Define the variable for accessing current row data 
      data: {}, 
    }; 
  }, 
  computed: { 
    idData: function() { 
        ... 
    } 
  }, 
  methods:{ 
    // Button’s click event function 
    Click(args){ 
      alert("Customer ID - "+ this.data.CustomerID)    // Accessed the row data 
    } 
  } 
} 
 
Using this approach the data can be retrieved as shown in the below image, 
 
 
 
We have prepared a sample based on this for your reference. You can find it below, 
 
 
Please get back to us if you require any further assistance. 
 
Regards, 
Sujith R 


PS Pieter Swart November 25, 2021 11:28 AM UTC

How would you do this for Vue 3?


PS Pavithra Subramaniyam Syncfusion Team November 26, 2021 10:48 AM UTC

Hi Pieter, 
  
For your reference we have prepared a sample with column Template in Vue 3. Please refer the below sample for more information. 
  
  
<template> 
  <div id="app"> 
    <ejs-grid :dataSource='data' :allowPaging="true"> 
      <e-columns> 
          .  .  .  .  .  .  .  .  . 
          .  .  .  .  .  .  .  .  . 
          <e-column headerText='Employee Image' width='150' textAlign='Center' :template='colTemplate'></e-column> 
      </e-columns> 
  </ejs-grid> 
    </div> 
</template> 
  
<script> 
import { GridComponent, ColumnsDirective, ColumnDirective, Page } from '@syncfusion/ej2-vue-grids'; 
import { createApp } from "vue"; 
  
const app = createApp(); 
  
// Template declaration 
var colVue = app.component("colTemplate", { 
data() { 
    return { 
      data: {}, 
    }; 
  }, 
  computed: { 
    idData: function() { 
        return this.data.OrderID; 
    } 
  }, 
  methods:{ 
    Click(){ 
      alert("Customer ID - "+ this.data.CustomerID)    //Accessed the row data 
    } 
  }, 
  template: `<button v-on:click="Click">{{idData}}</button> `, 
}); 
  
  
export default { 
  name: 'App', 
  components: { 
// Register Component 
    'ejs-grid' : GridComponent, 
'e-columns' : ColumnsDirective, 
'e-column' : ColumnDirective 
  }, 
  data() { 
return { 
  data:  [ 
    { 
       "OrderID":10248, 
       "CustomerID":"VINET", 
       "ShipCountry":"France" 
    }, 
    { 
       "OrderID":10249, 
       "CustomerID":"TOMSP", 
       "ShipCountry":"Germany" 
    }], 
    colTemplate: function () { 
        return { template: colVue }; 
      } 
}; 
  }, 
  // module injection 
  provide: { 
grid: [Page], 
  } 
}; 
</script> 
  
<style> 
</style> 
  
  
  
This below article explains how to use Syncfusion Vue components in Vue 3 application. Please refer the below documentation for more information. 
  
  
  
Regards, 
Pavithra S 


Loader.
Up arrow icon