Hi, kendo

I used the grid for reference "https://www.telerik.com/kendo-vue-ui/components/grid/columns/locked/"
At the same time, I added resizable props.

like this,

I resized "Name" column, then I could see the bug that a gap has occurred between Name and CategoryName.

Can I fix it?

Kendo-Vue-grid vs Kendo-grid-Vue-Wrapper

What is the difference between the two as in what would be the scenarios in which one would be better than the other? I would like to understand in detail please.

Also prop 'GridColumn' is only available in the grid wrapper and not the native grid. What is the reason behind that?

Are there any components in Kendo UI for VUE that do not support Typescript?

Thanks for your time,
Hiba

Hi,

Is it possible to initialize the grid (native) via the CDN service? I've only tried the grid wrapper in this way :(

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

In the native grid for Vue, how to lock a custom column with resizable=true, which will cause two problems. One is that although the grid header can be locked, the underlying data is not locked. The other is that when changing the column width of the locked column, styling issues will occur when moving left and right. You can see the specific case below：

Uaevwg (forked) - StackBlitz

We use data-testids (an attribute) for our test automation.  It looks like on an internal component like buttons in popup boxes and rows in a grid that we can no longer add these.  Is there some way in KendoUI that we can add these tags for our automation testing.  KendoMenu items  is an example where we like to add them for each menu item that it seems like we can't

Thank You,
Anthony Rizzolo