Telerik Forums
Kendo UI for Vue Forum
13 questions
Sort by
3 answers
97 views

Hi !

I'm using the kendo editor in the Vue environment.

I want to create a Kendo editor Custom tool using the following template.

I would like to create a Kendo editor custom tool for file upload using the template below. The internal logic is in place and we just want to see an example of creating a custom tool with a template.

--

 <input class="hide_file" type="file" @change="doUploadInput($event.target)"
            @drop="doUploadInput($event.target)" multiple>
          </input>

--

This is well enough in the official documentation but I would like to see a more detailed example.

thank you. have a good day

: )

Petar
Telerik team
 answered on 05 Dec 2019
3 answers
257 views
Hello,
We use KendoUI with our Vue app and recently upgraded the kendo resource we use.


Old resources included:
"@progress/kendo-charts-vue-wrapper": "2018.3.1025",
"@progress/kendo-dateinputs-vue-wrapper": "2018.3.1025",
"@progress/kendo-drawing": "1.5.12",
"@progress/kendo-dropdowns-vue-wrapper": "2018.3.1025",
"@progress/kendo-theme-default": "2.63.0",
"@progress/kendo-ui": "2018.3.1219",
"@progress/kendo-validator-vue-wrapper": "2019.2.621"


New resources include:
"@progress/kendo-charts-vue-wrapper": "2020.2.912",
"@progress/kendo-dateinputs-vue-wrapper": "2020.2.912",
"@progress/kendo-drawing": "1.9.2",
"@progress/kendo-dropdowns-vue-wrapper": "2020.2.912",
"@progress/kendo-theme-default": "4.22.1",
"@progress/kendo-ui": "2020.3.915",
"@progress/kendo-validator-vue-wrapper": “2020.2.912”


As you can see in the attached image, following this upgrade, the kendo validator error message is not rendered correctly.
Following this we have several questions:




1) Can you pinpoint us which of the modules in the list above is responsible for the customization of the error message? This way we will be able to revert this specific module to the old version while keeping the rest of the modules updated.


2) If we wish to keep the new modules - can you guide us how we can match the styling? As we use Kendo all over the app, we are worried there are going to be a lot of places where such update will be required.


3) Are there any breaking changes for upgrading from 2018.3 to 2020.2 or to any of the upgrades mentioned above? If there are - where can we see them?


4) In a general note: Are you aware of any problems when using the old versions (e.g. 2018.3) on updated browsers / smartphones or should it be considered safe to stick with the older versions for some more time?


Thanks!
Petar
Telerik team
 answered on 16 Oct 2020
0 answers
638 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
Iron
Iron
 asked on 04 Jan 2022
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Grid wrapper
DropDownTree wrapper
DatePicker
Spreadsheet wrapper
Scheduler
Editor
Editor wrapper
Input
DateInput
NumericTextBox
Scheduler wrapper
DataSource wrappers (package)
MultiSelect
Styling / Themes
Calendar
DateTimePicker
Gantt wrapper
Localization
Pager
Chart
Checkbox
Upload
Chart wrappers (package)
DropDownList wrapper
Window
Form
Tooltip
TreeView
ComboBox
Dialog
NumericTextBox wrapper
Popup
Toolbar wrapper
Upload wrapper
Validator wrapper
Error
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
MultiSelect wrapper
Slider
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
Menu
TreeList
Toolbar
ListView
FontIcon
SVGIcon
Animation
Barcode wrapper
ButtonGroup wrapper
Chat wrapper
ColorPicker wrapper
DateInput wrappers (package)
Diagram wrapper
Dialog wrapper
Gauges wrappers (package)
MaskedTextBox wrapper
MediaPlayer wrapper
Notification wrapper
Pager wrapper
PanelBar wrapper
PivotGrid wrapper
QRCode wrapper
RangeSlider wrapper
ScrollView wrapper
Security
Slider wrapper
Switch wrapper
Tooltip wrapper
TreeList wrapper
TreeMap wrapper
Window wrapper
Avatar
StockChart
Sparkline
RadioButton
RadioGroup
Hint
Loader
ProgressBar
DateRangePicker
Switch
Wizard
Skeleton
ScrollView
RangeSlider
ColorGradient
ColorPicker
ColorPalette
FlatColorPicker
Button
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
horváth
Top achievements
Rank 2
Iron
Iron
Steve
Top achievements
Rank 2
Iron
Erkki
Top achievements
Rank 1
Iron
Mark
Top achievements
Rank 2
Iron
Iron
Veteran
Jakub
Top achievements
Rank 1
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?