This is a migrated thread and some comments may be shown as answers.

rowTemplate in Vue Grid (native)

6 Answers 46 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Minas
Top achievements
Rank 1
Minas asked on 26 Jan 2019, 09:42 PM

Hello,

 

I am trying the Kendo Grid Vue (native) and trying to see if it covers our needs. So far I really enjoyed how usable it is, however, could not figure out how to use a rowTemplate for the native grid.

Alternatively, I could use a row double-click event or find a way to add a clickable button with a link on the row.

 

I would appreciate any help or alternative solutions on this.

 

Thank you!

 

 

6 Answers, 1 is accepted

Sort by
0
Plamen
Telerik team
answered on 28 Jan 2019, 11:12 AM
Hello Minas,

Its great to hear that you are checking our Kendo Vue Native Grid.

The row template as all the other templates in the current version can be set with either Component, Slot or a renderFunction. I have created a sample StackBlitz project where all three cases are implemented.

RowTemplate is a bit specific template because of the fact that it contains the 'td' default elements and in cases with Component and Slot you will have to define and add them manually inside of it. So far we have added the possibility to use the default render the default internal slots(a.k.a the cell) only in the renderFunction case by using the 'defaultSlots' property. If you have further questions please let me know.

We are also open for all any other feedback regarding the component so if you think of something else that could be improved please don't hesitate to let us know.

Regards,
Plamen
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Minas
Top achievements
Rank 1
answered on 04 Mar 2019, 03:01 PM

Thank you very much for your answer @Plamen!

 

And how to render an HTML passed to the function below;

```

cellFunction: function (h, tdElement , props, clickHandler ) { return h('td', ['<a target="_blank">' + props.dataItem.UnitPrice] + '</a>'); }

```

This works nicely however I am getting the cell value as string, it is not being rendered as html.

Code copied from https://www.telerik.com/kendo-vue-ui/components/grid-native/custom-rendering/custom-cells/#toc-using-the-render-function

0
Accepted
Plamen
Telerik team
answered on 05 Mar 2019, 08:10 AM
Hi,

In case with templates as renderFunction you should return a usual Vue render function as it is described in the Vue documentation here. Here you can find a sample with a link and a text that you are trying to set. If you have further questions please let us know.

Regards,
Plamen
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
Minas
Top achievements
Rank 1
answered on 05 Mar 2019, 01:14 PM
Great examples and great support @Plamen! Thank you very much!
0
Ken
Top achievements
Rank 1
answered on 22 Apr 2019, 08:14 PM

Plamen,

What should be done differently if I need to make an api call in my cell render function? In one of my cells, I need to make an API call to get the info I need to build a tooltip/hover message. However, when I have the return inside of the then method of my call, the cell just never gets rendered? I tested this in your stackblitz example by adding a setTimeout function around the return of cellFunction and got the same result.

Thanks,

Ferg

0
Plamen
Telerik team
answered on 23 Apr 2019, 10:04 AM
Hello,

We are using the native render functions of Vue here and they have to be synchronous as for example it is explained in this forum thread. In such case the recommended approach would be to trigger your async request outside of the render function and change some prop that will trigger another render function and cause the rendering that you want to achieve. Here is an updated example with a simple update of an item base on one of its properties.

Regards,
Plamen
Progress Telerik
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
Grid
Asked by
Minas
Top achievements
Rank 1
Answers by
Plamen
Telerik team
Minas
Top achievements
Rank 1
Ken
Top achievements
Rank 1
Share this question
or