Telerik Forums
Kendo UI for Vue Forum
1 answer
90 views

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


Filip
Telerik team
 answered on 12 Jul 2024
1 answer
71 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
68 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
80 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
59 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
52 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
97 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
Top achievements
Rank 1
Iron
 asked on 14 Jun 2024
1 answer
56 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
59 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
Iron
Iron
 asked on 12 Jun 2024
1 answer
127 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
DatePicker
Editor
Grid wrapper
Scheduler
DropDownTree wrapper
Spreadsheet wrapper
Input
MultiSelect
Calendar
NumericTextBox
Editor wrapper
DataSource wrappers (package)
DateInput
DateTimePicker
Scheduler wrapper
Styling / Themes
Chart wrappers (package)
Gantt wrapper
Localization
Chart
Checkbox
ComboBox
Window
Pager
Error
Upload
DropDownList wrapper
Popup
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
RadioButton
FloatingLabel
TextArea
Drawer
Stepper
DateRangePicker
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
RadioGroup
Hint
Loader
ProgressBar
Switch
Wizard
Skeleton
ScrollView
ColorGradient
ColorPalette
FlatColorPicker
ButtonGroup
TileLayout
ListBox
ExpansionPanel
BottomNavigation
AppBar
Signature
ChunkProgressBar
VS Code Extension
+? more
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Top users last month
Anislav
Top achievements
Rank 6
Silver
Bronze
Bronze
Jianxian
Top achievements
Rank 1
Iron
Marco
Top achievements
Rank 3
Iron
Iron
Iron
Jim
Top achievements
Rank 2
Iron
Iron
Nurik
Top achievements
Rank 2
Iron
Iron
Want to show your ninja superpower to fellow developers?
Want to show your ninja superpower to fellow developers?