Followed the below steps:

1. pnpm create vite
2. give name for project, select vue-ts template
3. pnpm install @progress/kendo-vue-popup @progress/kendo-licensing
4. Change App.vue as mentioned below
   
5. pnpm dev (works)
6. pnpm build (fails with type errors)

I have also added a sample project on github

Am I missing something?

Type errors:

c:\temp\kendo-popup-with-vite>pnpm build

> kendo-popup-with-vite@0.0.0 build c:\temp\kendo-popup-with-vite
> vue-tsc --noEmit && vite build

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:2:57 - error TS2307: Cannot find module 'vue/types/options' or its corresponding type declarations.

2 import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
                                                          ~~~~~~~~~~~~~~~~~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:63:72 - error TS2304: Cannot find name 'Vue'.

63 export interface PopupAll extends PopupMethods, PopupState, PopupData, Vue {
                                                                          ~~~

node_modules/.pnpm/@progress+kendo-vue-popup@2.7.1_acc43b21ea211aeeda51cec780f114cb/node_modules/@progress/kendo-vue-popup/dist/npm/Popup.d.ts:68:37 - error TS2304: Cannot find name 'Vue'.

68 declare let Popup: ComponentOptions<Vue, DefaultData<PopupData>, DefaultMethods<PopupAll>, {}, RecordPropsDefinition<PopupProps>>;
                                       ~~~


Found 3 errors.

 ELIFECYCLE  Command failed with exit code 2.

App.vue

<script lang="ts">
import { defineComponent } from 'vue';
import { Popup } from '@progress/kendo-vue-popup';

export default defineComponent({
  components: {
    'k-popup': Popup,
  },
  data() {
    return {
      show: false,
    }
  },
  methods: {
    onClick() {
      this.show = !this.show;
    }
  }
});

</script>

<template>
  <div>
    <button class="k-button" @click="onClick" ref="buttonWithPopup">Click Me</button>
    <k-popup :anchor="'buttonWithPopup'" :show="show">Popup content.</k-popup>
  </div>
</template>

Hello all,

I am using kendo Editor.

<editor :resizable-content="true"
                    :resizable-toolbar="true"
                    v-model="footerBody"
                    style="height:280px;"
                    value=""
                    rows="10"
                    contenteditable="true"
                    cols="30"
                    ref="editor">
            </editor>

This one is going to have the default toolbar set.

What I want to do is to add one more tool to the default toolbar set.

What I have noticed is that when I set the tools like below, it is overwriting the default toolbar and putting there only the tools I put in the tools property. So, is there a way to add or remove a specific tool without altering and overwriting all the others from default?

I see you have the hybrid library. Is that included with the JavaScript package (Jquery, Angular, VUE, React)?

If so, how does the library work with Ionic Capacitor? (does it work great and does the application function as expected?)

Hello all, I am using Kendo Editor and have the below setup:

<editor :resizable-content="true"
                :resizable-toolbar="true"
                contenteditable="true"
                style="height:360px"
                rows="10"
                cols="30"
                v-model="editorBody"
                @input="setBodyOnChange"
                @keyup="setBodyOnKeyUp"
                @execute="setBodyOnExecute"
                @select="onSelect"
                ref="editor">
        </editor>

I would like to retrieve the cursor position when someone clicks in the editable area. Specifically I think I should use the select event. But I can't find a way to do so....

Any help would be appreciated.

• How does the spreadsheet component get the coordinates of the currently selected cell

I'm trying to have the Kendo DropDownList wrapper component expand to the viewport height so that there's a maximum amount of items on screen without having a scrollbar on <body>

I'm currently trying it with this approach but I'm wondering if there's a better way:

1seoqu (forked) - StackBlitz

The main downside of this approach is that it relies on setting the 'height' prop to a number that is larger than the data source would take up when fully rendered.  In this case a height of 999px won't work, while a height of 9999px will work. So when I set the height to 9999px I get the desired result but it feels hacky and I'm wondering if there's a better way.

It's possible to generate toolbar item based on array of object as below sample? I try but I hit v-for & v-if not allowed to use together.

Hi,

I know the single Vue Grid can export to excel like this.
https://www.telerik.com/kendo-vue-ui/components/grid/excel-export/

And I also know Vue Grid can do master-detail template like this.

https://www.telerik.com/kendo-vue-ui/components/grid/custom-rendering/hierarchy/

So I want to know Can I export Vue Grid to Excel with detail template?

Thanks!!

With Kendo-UI being more of a widget framework as opposed to a css framework, are there any recommended css frameworks out there that will suite kendo-ui? Looking for a material based css framework to handle layout/grid setup. Also looking for a Vue3 based framework, which unfortunately Vuetify is not at that level yet (still alpha).

I you have implements other css frameworks, were there any pitfalls/hurtles to get both frameworks working together? Issues like clashing themes/styles, build issues, etc.

As mentioned before, I predominantly need this css framework for the layout/grid setup, so technically I don't really need a 'full on' css framework as setups like simple grid or flexbox are probably all I need, buuuuuuut .... other css frameworks like Vuetify, Vue Material, Chakra, etc do have alot of other components that either aren't in kendo or are a bit more user friendly.