Telerik Forums
Kendo UI for Vue Forum
0 answers
13 views

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>


Shashwat
Top achievements
Rank 1
 asked on 04 Jan 2022
1 answer
11 views

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?

<editor :resizable-content="true"
                    :resizable-toolbar="true"
                    v-model="footerBody"
                    style="height:280px;"
                    value=""
                    rows="10"
                    contenteditable="true"
                    cols="30"
                    ref="editor"
                    :tools="tools">
            </editor>
Plamen
Telerik team
 answered on 27 Dec 2021
1 answer
6 views

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?)

Petar
Telerik team
 answered on 22 Dec 2021
2 answers
10 views

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.

Daniel
Top achievements
Rank 2
Iron
 answered on 20 Dec 2021
1 answer
9 views
  • How does the spreadsheet component get the coordinates of the currently selected cell

Petar
Telerik team
 answered on 08 Dec 2021
1 answer
9 views
Hello, I would like to ask if there is a corresponding method to support me to obtain the data of selected rows or columns when using the spreadsheet
Petar
Telerik team
 answered on 07 Dec 2021
1 answer
17 views

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.

Petar
Telerik team
 answered on 03 Dec 2021
1 answer
12 views

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.

[
  {
    id: 0,
    type: "buttonGroup",
    text: "group1",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [
      {
        text: "G1button1",
        icon: "",
        title: "button1",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "G1button2",
        icon: "",
        title: "button2",
        enabled: "true",
        togglable: "true",
      },
    ],
  },
  {
    id: 1,
    type: "splitButton",
    text: "splitButton1",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [
      {
        text: "Insert above",
        icon: "insert-up",
        title: "Insert above",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "Insert between",
        icon: "insert-middle",
        title: "Insert between",
        enabled: "true",
        togglable: "true",
      },
      {
        text: "Insert below",
        icon: "insert-down",
        title: "Insert below",
        enabled: "true",
        togglable: "true",
      },
    ],
  },
  {
    id: 2,
    type: "button",
    text: "Button1",
    icon: "",
    enabled: "true",
    togglable: "true",
    overflow: "auto",
    items: [],
  },
  {
    id: 3,
    type: "separator",
    text: "",
    icon: "",
    enabled: "true",
    togglable: "false",
    overflow: "auto",
    items: [],
  },
  {
    id: 4,
    type: "button",
    text: "Button2",
    icon: "",
    enabled: "false",
    togglable: "true",
    overflow: "always",
    items: [],
  },
]
Petar
Telerik team
 answered on 02 Dec 2021
1 answer
17 views

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!!

Petar
Telerik team
 answered on 26 Nov 2021
1 answer
23 views

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.

Petar
Telerik team
 answered on 19 Nov 2021
Narrow your results
Selected tags
Tags
+? more
Top users last month
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Bernd
Top achievements
Rank 3
Iron
Iron
Iron
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
CHIHPEI
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Richard
Top achievements
Rank 2
Iron
Iron
Iron
Bernd
Top achievements
Rank 3
Iron
Iron
Iron
Matthias
Top achievements
Rank 5
Bronze
Bronze
Iron
Benedikt
Top achievements
Rank 3
Iron
Iron
Iron
CHIHPEI
Top achievements
Rank 1
Iron
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?