Telerik Forums
Kendo UI for Vue Forum
1 answer
19 views

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


Filip
Telerik team
 answered on 12 Jul 2024
1 answer
13 views

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

Konstantin Dikov
Telerik team
 answered on 05 Jul 2024
1 answer
22 views

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!

MILAN
Top achievements
Rank 1
Iron
 answered on 01 Jul 2024
1 answer
22 views

Hello,

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

Vessy
Telerik team
 answered on 20 Jun 2024
1 answer
15 views

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. 

Vessy
Telerik team
 answered on 18 Jun 2024
1 answer
16 views

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.

 

Konstantin Dikov
Telerik team
 answered on 14 Jun 2024
0 answers
35 views

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.

 

RIS Team
Top achievements
Rank 1
 asked on 14 Jun 2024
1 answer
15 views

Hi there, I was wondering if there is any exposed props or any way to change the way the default list items look when rendering. 

What I am trying to achieve is each item showing a background color of the value of the data-item.

Essentially this


          <combo-box
            :data-items="sports"
          >
            <template #item="{ props }">
              <div :style="`background: ${props.item}`">
                {{ props.item }}
              </div>
            </template>
          </combo-box>

Dan
Top achievements
Rank 1
Iron
 updated answer on 14 Jun 2024
0 answers
21 views

Hi,

I'm using a DropDownTree with an applied filter, and it works well.

However, when you click on the drop-down tree, the dropdown doesn’t close. It does close when you remove the filter. Is this intended behavior or a bug?

http://https://stackblitz.com/edit/yqd6w4?embed=1&file=src%2Fmain.vue

Thanks,
Ziggy

 

Ziggy
Top achievements
Rank 1
 asked on 12 Jun 2024
1 answer
16 views

Hello, 

I want to append the DatePickerPopup to the div#app component in Vue, in order to style it and prevent some bugs, but I can't get it to work. 

This is the Datepicker component, contains popupSettings:


				<k-datepicker
					:id="id"
					ref="datepickerInstance"
					v-model="dateObj"
					:name="name"
					:placeholder="''"
                                        :popup-settings="popupSettings"
					:label="labelText"
					:required="required"
...

This is in <script> in data() 


		data() {
			return {
				popupSettings: {
					animate: false,
					appendTo: document.getElementById('app'),
					popupClass: 'k-datepicker-popup-test',
				},

animate and popupClass do work, but appendTo gives the following warning and doesn't work:

[Vue warn]: Invalid prop: type check failed for prop "appendTo". Expected String with value "[object HTMLDivElement]", got HTMLDivElement  

Looking at the API documentation, appendTo needs a HTMLElement, am I missing something? Thanks

Konstantin Dikov
Telerik team
 answered on 05 Jun 2024
Narrow your results
Selected tags
Tags
Grid
General Discussions
DropDownList
Editor
DatePicker
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
Editor wrapper
MultiSelect
DateInput
NumericTextBox
Scheduler wrapper
Styling / Themes
Calendar
DataSource wrappers (package)
DateTimePicker
Gantt wrapper
Chart
Chart wrappers (package)
ComboBox
Localization
Pager
Checkbox
Upload
DropDownList wrapper
Popup
Window
Error
Form
Tooltip
TreeView
Dialog
MultiSelect wrapper
NumericTextBox wrapper
Slider
Toolbar wrapper
Upload wrapper
Validator wrapper
ColorPicker
Accessibility
AutoComplete
AutoComplete wrapper
Button wrapper
ComboBox wrapper
ContextMenu wrapper
Licensing
ListBox wrapper
ListView wrapper
Map wrapper
MaskedTextBox
Menu wrapper
MultiColumnComboBox wrapper
Splitter wrapper
TabStrip wrapper
TimePicker
TreeView wrapper
TabStrip
Card
FloatingLabel
TextArea
Drawer
Stepper
Gauge
Splitter
PanelBar
Notification
RangeSlider
Menu
TreeList
Toolbar
Button
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
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Top users last month
Michael
Top achievements
Rank 2
Iron
Wilfred
Top achievements
Rank 1
Alexander
Top achievements
Rank 2
Iron
Iron
Matthew
Top achievements
Rank 1
Iron
ibra
Top achievements
Rank 1
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?