Render image within Kendo Vue Grid Cell

[Hiba]

Hi,

I am using TypeScript and I am trying to display a grid in which three columns would be text and one column would be and image. How can insert a template for the fourth cell being and HTML image in each row? JSX is not enabled in my project so I need to come up with a solution using slots and props. I am using kendo-vue-grid and not the wrapper. My Grid.vue looks like this:

<template>
    <grid :data-items="imagesData.images"  :columns="columns"></grid>

</template>

<script setup lang="ts">

 import { ref } from 'vue';
import { Grid, type GridCellProps, type GridColumnProps } from '@progress/kendo-vue-grid';

    const customImageCell = (props: GridCellProps) => {
       return `<img src = "${props.dataItem}" alt="thumnailUrl" ></img>`       //if I log props.dataItem, its undefined
    } 

          const columns = ref([
                { field: 'name', title: 'Name' },
                { field: 'category', title: 'Category' },
                { field: 'artist', title: 'Artist' },
                { field: 'price', title: 'Price' },
                { title: 'Thumbnail', cell: (props: GridCellProps) =>  customImageCell(props) },
            ] as GridColumnProps[]);

</script>

My data looks like this

{
  "images": [
    {
      "id": 1,
      "name": "Multicolor Abstract",
      "category": "Abstract Art",
      "artist": "Artist 1",
      "price": 795.95,
      "numberSold": "567",
      "thumbnail": "/images/Abstract/AbstractArt1.jfif"

    },
    {
      "id": 2,
      "name": "Coral colors",
      "category": "Oil painting",
      "artist": "Artist 2",
      "price": 795.95,
      "numberSold": "567",
      "thumbnail": "/images/OilPaintings/AbstractOilPainting.jpeg"

    },
    {
      "id": 3,
      "name": "Forest",
      "category": "Landscape",
      "artist": "Artist 1",
      "price": 795.95,
      "numberSold": "567",
      "thumbnail": "/images/Landscape/ForestLandscape.jpg"

    }

}

Grid renders but the Thumbnail column just prints <img src = "undefined" alt="thumnailUrl" ></img>  as text.

I have verified that my data is available by printing it in console.log.

Help would be appreciated.

Thanks,

Hiba

[Konstantin Dikov]

Hi Hiba,

The first parameter in the "cell" will be the render function, the second one will be the defaultRendering and the props will be third:

cell: (h, defaultRendering, props) => customImageCell(props)

As for a named slot, here is an example demonstrating how to define custom cell for a column:

• https://stackblitz.com/edit/5wukae-ldwjma?file=src%2Fmain.vue

Hope this helps.

 

Regards,
Konstantin Dikov
Progress Telerik

[Hiba]

Thanks for the response. What would the customImageCell function look like?  I also get error Parameter 'defaultRendering' implicitly has 'any' type. Same with props and h. I have imported h. I can change props to props: GridCellProps . What type woud I  give for defaultRendering? I am using TypeScript and composition API.

I would like to do this on a specific column and not the whole grid so I wont be able to use GridProps.CellRender, correct? And it would have to be done in the script setup tag?

Thanks,
Hiba

 

[Konstantin Dikov]

Hi Hiba,

The customImageCell function should use the render function to return vnodes:

• https://vuejs.org/guide/extras/render-function

Here is an example demonstrating how to use the render function (h) for custom cell:

• https://stackblitz.com/edit/5wukae-3jlhnr?file=src%2Fmain.vue

As for the types, you can check them in the API reference for the cellRender:

• https://www.telerik.com/kendo-vue-ui/components/grid/api/GridProps/#toc-cellrender

(h: any, defaultRendering: any, props: GridCellProps, listeners: any)

[Hiba]

Thank you for the response but my apologies but I am a little more confused than before. Why is the example on stackblitz using a v-slot as well a render function where the image component is defined in the imageCell render function as well as the template v-slot?  I thought these are two different implementations and we could use one or the other?

Hiba

[Hiba]

Actually I removed the template v-slot completely and got it to work with the render function. Thank you so much for your help.

Best,
Hiba