rowTemplate in Vue Grid (native)

[Minas]

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!

 

 

[Plamen]

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

[Minas]

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

[Plamen]

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

[Minas]

Great examples and great support @Plamen! Thank you very much!

[Ken]

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

[Plamen]

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