Questions on Kendo UI for Vue Forum

1 answer

37 views

Trying to use 3.14.2 NumbericTextbox with Vue 3.4+

Unfortunately, due to bandwidth constraints I'm currently stuck on Kendo Vue Native 3.14.2.

I've tried to update my Vue version to 3.4 or 3.5 but I see in the changelog that this will break the NumericTextbox component:
Changelog - Kendo UI for Vue - Kendo UI for Vue (telerik.com)

Is there maybe a workaround possible so that I can still use Kendo 3.14.2 and Vue 3.4+ at the same time?
Or could this fix (from v4.3.2) maybe be backported to a special 3.14.2 version?

Thanks in advance

NumericTextBox

answered on 16 Sep 2024

0 answers

40 views

[vue3] calendar selected

Hi, I am using vue3.

I want to make a choice, not a focus.

Is there a way?

:value allows you to select a date, but no other date.

There are so many types of events that it's hard to find..

Is there a way?

const onCalendarClick = event => {
  console.log(event) //event.target.value X //event.value X
}

<Calendar         v-model="modelDate"
                  mode="range"
                  :views="2"
                  :focusedDate="today"
                  :allowReverse="true"                >

Calendar

asked on 01 Aug 2024

1 answer

52 views

multiselect :value error

HI,

I want to erase the 'MultiSelect' data by pressing the button.

If I put:value in a multi-select

There is an error in the following parts.

Except for :value, everything is fine.

I followed the code in url below.

https://www.telerik.com/kendo-vue-ui/components/dropdowns/multiselect/binding/

The tagList in multiselect has an error

TypeError: Cannot read properties of undefined (reading 'toString')
at Proxy.<anonymous> (TagList.js?v=28c65b14:115:67)

TagList.js

MultiSelect

answered on 31 Jul 2024

1 answer

64 views

How to customize the editing task page for Gantt

How to customize the editing task page for Gantt, like this

Gantt wrapper

answered on 12 Jul 2024

1 answer

45 views

DropFownLists in the text editor do not do anything

Hello,

I am attempting to implement the Kendo Vue Editor for text editing. All of the tools in the toolbar work great, besides the drop down options. Specifically: font size, font name, font color, format, background.

When highlighting text, they do not update. When making a selection in the drop down, nothing happens, and no events fire.

I have all needed packages installed that are listed on the getting started page https://www.telerik.com/kendo-vue-ui/components/editor/get-started/

I have tried:

both controlled and uncontrolled modes
both div and iframe rendering
Creating my own custom tool renderers for the drop downs

Here is the component:

<template>
  <Editor
    v-bind="$props"
    :tools="tools || defaultTools"
    :value="modelValue"
    @change="onChange"
  >
    <template #FontName="{ props: fontNameProps }">
      <FontName v-bind="fontNameProps" />
    </template>
  </Editor>
</template>
<script setup lang="ts">
import {
  Editor,
  type EditorChangeEvent,
  type EditorProps,
  EditorToolsSettings,
  FontName
} from '@progress/kendo-vue-editor'
interface EditorPropsExtended extends EditorProps {
  modelValue: string
}
defineProps<EditorPropsExtended>()
const emit = defineEmits(['update:modelValue'])
const availableFonts = [ 'Segoe UI', 'Arial', 'Calibri', 'Cambria', 'Tahoma', 'Times New Roman' ]
const customFontNameTool = {
  render: 'FontName',
  props: {
    ...EditorToolsSettings.fontName,
    commandName: 'FontName',
    items: availableFonts.map(font => ({ text: font, value: font, style: { fontFamily: font } }))
  }
}
const defaultTools = [
  [ 'Bold', 'Italic', 'Underline', 'Subscript', 'Superscript' ],
  [ 'AlignLeft', 'AlignCenter', 'AlignRight' ],
  'FontSize', customFontNameTool, 'FormatBlock', 'ForeColor', 'BackColor',
  [ 'Indent', 'Outdent' ],
  [ 'OrderedList', 'UnorderedList' ],
  [ 'Link', 'Unlink' ]
]
const onChange = (e: EditorChangeEvent) => {
  emit('update:modelValue', e.html)
}
</script>

Edit: Grammar, added component

DropDownList

Editor

answered on 05 Jul 2024

1 answer

56 views

Scheduler Monthly View - Move The Event

Hey! We're trying to display events on the Scheduler Monthly view, but we cannot move it so we can see which day of the month it actually is.

We've tried editing the margins of the SchedulerViewItem and that works, however, then we have a gap between each one of the events of the calendar, but we'd like just the first event to move down, just so we can see which day of the month it actually is.

Thanks!

Scheduler

answered on 01 Jul 2024

1 answer

50 views

Spreadsheet Excel

Hello,

Spreadsheet how to get excel blob? Or print or export excel and upload the file stream yourself?

Button

answered on 20 Jun 2024

1 answer

50 views

ComboBox item-render drop down position way off.

using ComboBox and a custom item render, the .k-animation-container is way off.

When you hit full screen on the browser it goes to the correct position.

ComboBox

answered on 18 Jun 2024

1 answer

40 views

Can the datetimepicket time icon click call a custom function

I am using Kendo datetimepicker in a VueJS app.

Is there a way to display the Calendar and Time icons as below, but change the Time icon "click" to call a custom function?

I still want the calendar icon to work as normal. I just want the time icon to call one of my functions and not to display the time values.

DateTimePicker

answered on 14 Jun 2024

0 answers

73 views

Dropdows - Wrong position of popup

We have the problem that the popup of dropdowns (DropDownList, ComboBox,...) are displayed in the wrong position. This only happens if the data is an object and the display property is a long text. As the drop-down list is moved to the left, the error disappears. How far to the left depends on how long the texts are.

DropDownList

asked on 14 Jun 2024