Questions on Kendo UI for Vue Forum

1 answer

41 views

No groupHeaderCell option to specify slot name

I've been using Kendo UI for jQuery for several years and I'm now in the process of migrating to Kendo UI for Vue. Mostly things are going well, but there are certain things that seem massively over complicated.

I want to customize the group header cells. There doesn't appear to be a way of providing a slot name like you can for a normal cell. The example given in the documentation seems rediculously over complicated.

Surely there's a simpler way to customise a group header cell, in a similar way to how a cell can be customised with a slot and template?

Grid

answered on 14 Oct 2024

1 answer

46 views

GridPdfExport in Vue export base64

Hi!

I would like to know how it would be possible to export base64 from the `save` function when exporting from a component.

this.$refs.gridPdfExport.save(itemsToExport);

The default behavior is to just download a pdf, I dont want this functionality.

Thanks!

Grid

answered on 24 Sep 2024

1 answer

83 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

106 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

124 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

156 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

105 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

95 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

132 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

87 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