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

I'm using a trial of kendo for vue.

According to documentation these are the files that need to be added.

<script src="https://unpkg.com/@progress/kendo-vue-charts@latest/dist/cdn/js/kendo-vue-charts.js"></script>
  <script src="https://unpkg.com/@progress/kendo-vue-intl@latest/dist/cdn/js/kendo-vue-intl.js"></script>
  <script src="https://unpkg.com/@progress/kendo-drawing/dist/cdn/js/kendo-drawing.js"></script>
// Load the Kendo Default Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css">

    // Load the Kendo Bootstrap Theme
    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-bootstrap@latest/dist/all.css">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

I'm getting this error.

https://jsfiddle.net/xw2v3dce/2/

Hi，

I tried to use "MultiColumnComboBox", but there was an error. “Module '@progress/kendo-dropdowns-vue-wrapper' has no exported member 'MultiColumnComboBox'”.

I am trying to setup a blank project using Vite and Vue 3 since Vite is suggested tooling for new Vue 3 projects.

I am getting type errors despite "skipLibCheck": true in the tsconfig.

Environment:

> node -v
v16.14.2

> pnpm -v
6.32.4

> pnpm tsc -v
Version 4.6.3

Reproduction steps:

1. Checkout https://github.com/shashwatsingh/kendo-vite
2. cd dropdown
3. pnpm install
4. pnpm dev # this works
5. pnpm build # this fails
   

... more lines...
node_modules/.pnpm/@progress+kendo-vue-popup@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-popup/dist/npm/additionalTypes.ts:9:68 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
                                                                     ~~~~~~~~
Found 6 errors in 3 files.

Errors  Files
     2  node_modules/.pnpm/@progress+kendo-vue-common@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-common/dist/npm/additionalTypes.ts:9
     2  node_modules/.pnpm/@progress+kendo-vue-dropdowns@3.2.4_4d853744181ba70ddba87c6a33341cef/node_modules/@progress/kendo-vue-dropdowns/dist/npm/additionalTypes.ts:9
     2  node_modules/.pnpm/@progress+kendo-vue-popup@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-popup/dist/npm/additionalTypes.ts:9

Same steps, but tooltip folder in the repository root gives different errors:

node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9:10 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
           ~~~~~~~~~~~~~~~
node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9:68 - error TS1205: Re-exporting a type when the '--isolatedModules' flag is provided requires using 'export type'.

9 export { DefineComponent, RecordPropsDefinition, ComponentOptions, Vue2type };
                                                                     ~~~~~~~~
Found 2 errors in the same file, starting at: node_modules/.pnpm/@progress+kendo-vue-tooltip@3.2.4_d36bad9df0c973a5805fa10278317f29/node_modules/@progress/kendo-vue-tooltip/dist/npm/additionalTypes.ts:9

All this works in a vue cli project without issues. However, due to the size of our project, the build times are increasing. So we're looking at alternatives.

I have two questions:

1. Is s something wrong in the above code? Am I using something unsupported?
   
2. Does Kendo for Vue product suite support Vite?
   

Hi,

I am trying to create a nav menu using the kendo Menu Component. My requirement is to make this nav menu similar to the dashkit nav menu. There are two major problems that I am currently facing

1. Show Active navs [showing the active url]
2. Make this NavMenu work in both web and mobile versions.

Problem with Making Responsive: In the web version, if we hover on a nav item that has children in the nav menu, it opens a submenu on the right side of that nav item. In the Mobile version, if we click on a nav item that has children, it opens a submenu on the right side same as the web version, but the submenu is outside of the viewable frame.

Showing Active navs: I looked for this in the forum, but unfortunately, I didn't find any proper solution for making the kendo menu nav items active.

DashKit Theme Reference: https://dashkit.goodthemes.co/index.html

Customize Setting:

• Color Scheme: Light Mode
• Navigation Position: SideNav
• SideNav Sizing: Icons
• Navigation Color: Default

Sample Vue Project: https://github.com/iamAdarshh/Kendo-Menu-Responsive

Hi. The documentation (https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/custom-headers/) shows how to make custom headers, but there is no example of a custom header with functional sorted colums (like the first grid on this page -> https://www.telerik.com/kendo-vue-ui/components/grid/sorting/ ).

I want to have a custom header template and I also want to click on it to sort the column. I actually managed to do that, but the arrows are missing. Here's a code sample:

<template #headerTemplate="{props}">
   <span @click="headerTemplateClickHandler(props)">{{ props.title }}</span>
</template>

headerTemplateClickHandler(props){
      const existentRuleIndex = this.sort.findIndex(rule => rule.field === props.field);
      if (existentRuleIndex >= 0) {
        this.sort[existentRuleIndex ].dir =
          this.sort[existentRuleIndex ].dir === "desc" ? "asc" : "desc";
      } else{
        this.sort.push({
          dir: 'desc',
          field: props.field
        })
      }
      props.sortchange({
         sort: this.sort
      });
    }

With this code I managed to sort the column, but the arrow indicators do not show up in the header.

Hello,

I'm trying to use the custom kendo scss theme inside my Vite project but I'm getting errors when it tries to compile the theme.

Here I've made a reproduction of the problem:

Vitejs (forked) - StackBlitz

Does anyone know what I'm missing here?

Thanks in advance,

Vincent

I want to know how could I customize the default tooltip shown by the column menu (https://stackblitz.com/run/?file=src/main.vue):

On this example, instead of the "ProductName Column Menu" tooltip text,  I'd like to display some other user friendly text, or just have this tooltip removed. Is it possible?