I'm trying to make a grid with custom rows by passing a custom vue row component to the :row-render prop like so:


Lsjacl (forked) - StackBlitz

However there's a problem when I'm inserting new rows at the top. It seems the row that's newly created re-uses the row data from the row below it instead of the completely blank data a new row starts out with. When I insert a row at the bottom of the list this problem doesn't occur and the values are all completely blank. 


You can reproduce this issue with the following steps:

1: open the stackblitz.

2: click on 'add row to end'.

3: see that there's a newly created row at the bottom of the list. 

4: in the field meta it says the initalValue is null

5: now add a row to the beginning of the list with the 'add row to beginning' button

6: The field meta says it's initialValue is 'Lemon' the same value as the row below it. 


I'm figuring this has something to do with the loop that's generating all rows using generic indexes instead of unique ID's as described in this video:

https://youtu.be/-6fO2qUmf7I?t=412 


Is there a way to fix this so I can insert the row at the beginning of the list and have it start out as a completely fresh vue component?

Hi,

We are currently developing the Kendo Grid Wrapper Component with Vue3.0 compositon API and typescript  but we have encountered a problem.The problem is  that when I enable some configuations such as editable or groupable will trigger setoptipn method and redraw the grid,it causes the toolbar custom button click event failure.I need to rebind the custom button click event after grid redraw,is there any way to watch grid setoption method execution completion or how to make custom button events not invalid?

Thank you very much and greetings

Currently I have a website that runs Kendo for jQuery which uses multiple cultures in the old Wrapper Components way. I want to re-use these files to change the culture of the new Kendo Native Components. Is that possible? If not, how can I do this with the new culture implementation.

Below I have added a Stackblitz with jQuery culture and Native Components which isn't working atm.

https://stackblitz.com/edit/nlfavc?file=src/main.vue

I want to use the rowRender grid prop with a custom vue component to add additional logic per each row

In this example it's done with a Vue render function:

Vue Grid Component & Styling | Kendo UI for Vue Docs & Demos (telerik.com)

However for my use case I'm trying to use vee-validate's useForm() composable on each row for validation. This composable has to be ran inside a script setup thus requiring me to use a custom vue component for rowRender.

So is it possible to use rowRender with a custom component and still retain the automatic cell rendering like in the render function example?


So something like this (but working of course):

CustomRow.vue:

<template>
   <tr>
      <slot><!-- render cells here automatically--></slot>
   </tr>
</template>

I'm trying to add a custom class name to the DropDownList popup div like so:

Qtavuz (forked) - StackBlitz

But the custom class name isn't applied, while the custom width is. Is there a way to make this work?

I've tried to make it work by modifying this official example, here's my code.

Unfortunately when I try to select a single row it throws the following error (both in stackblitz as well as local dev environment)

Error in /turbo_modules/@progress/kendo-vue-grid@3.2.9/dist/npm/utils/index.js (401:23)
Cannot read properties of undefined (reading 'items')

Is there a way to make grouped rows + checkboxes work in Kendo Native Grid?

Thanks in advance

Hi,

  When server paging is enabled, in addition to using the options in transport-read to set the total, are there any methods like 'dataSource.data()' to set the total?

I am trying to add a tooltip in the App.vue so that I can use title attribute in children and see kendo tooltips.

I have 3 issues I want to get help on:

1. The callout pointer (small triangle above tooltip) isn't at the center of the element's width. How can I show the callout in the center of the element's width?
   
2. If I have an icon button (the icon could be svg or feather icon etc.) then the tooltip doesn't show when hovering on the icon inside a button. When I hover out of the icon but still within the bounds of the button, the tooltip shows up again
3. In case of an icon button with a label, when I hover over and out of it, the tooltip gets stuck and doesn't show on any other element

Here is a sample project. I tried with bootstrap icon, kendo icon and an svg from bootstrap icon. In all three cases, the issue is the same.

https://stackblitz.com/edit/vue-apr7tr?file=public%2Findex.html
I tried uploading a gif file showing different interactions, but that format isn't allowed. Please see this:
https://pasteboard.co/jVX76H5FoOmF.gif