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.

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, 

Sample: https://codesandbox.io/s/vue-template-3g74z 

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

Regards, 

Hariharan 

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 !

I've found this thread that explains the 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.

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, 

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

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/CUSTOM~1-401773816.zip 

Regards, 

Hariharan 

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 ?

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. 

Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/tocustomer1403273946 

 

If we have misunderstood your query, please get back to us with the following details for better assistance. 

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

Regards, 

Hariharan