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
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Help rendering a vue component in a column

Thread ID:





145495 Jun 25,2019 02:47 PM UTC Jul 8,2019 12:08 PM UTC Vue 7
Tags: Data Grid
Asked On June 25, 2019 02:47 PM UTC


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.

Hariharan J V [Syncfusion]
Replied On 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. 


Replied On 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

Replied On June 27, 2019 08:49 PM UTC

Solved !!!

I've found this thread that explains the problem.

Replied On 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

Hariharan J V [Syncfusion]
Replied On 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, 


Replied On 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 ?

Hariharan J V [Syncfusion]
Replied On 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. 


    <div class="hello" id="hello"> 
        <button v-on:click="Click">Add 1</button> 

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

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. 



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

Live Chat Icon For mobile
Live Chat Icon