Questions on Kendo UI for Vue Forum

1 answer

18 views

Kendo DropDownList fetching new dataItems on pagechange event

I'm trying to connect an external API that I manage via Tanstack query to a Kendo DropDownList.

For this I've tried to look at the docs here: https://www.telerik.com/kendo-vue-ui/components/dropdowns/dropdownlist/virtualization

And saw that the DropDownList has a pagechange event that I can listen to to know when I need to fetch new data.
With this knowledge I made the following attempt:
https://stackblitz.com/edit/yyrbvmlq-pnagnjwj?file=src%2Fmain.vue,src%2FdummyData.ts,src%2Fmain.js,index.html

However there's a problem:

When I scroll down to quick, not all 30 items are fetched and rendered, due to the early return in the pagechange handler function.
If I remove the early return, I run the risk of the same data being fetched multiple times which is also undesirable.

Is there an easy way to ensure all data is properly fetched on pagechange AND the same data is not fetched more than once?
I want both requirements to work nicely, even when the user scrolls down fast, slow, uses the scrollbar handle, pagedown, etc.

Or am I looking at this from completely the wrong angle and is there another, simpler way to achieve what I want?

Thanks in advance

DropDownList

answered on 11 Nov 2025

1 answer

33 views

How to populate dropdowntree with loadondemand

I am using Vuejs 2.x.

I am trying to use the dropdowntree to display a large hierarchy.

I am also trying to use the ValueMapper to pre load the checked items.

The problem I have is that the valueMapper is not being called until I start clicking on nodes.

How to I get the valueMapper to check the correct nodes when the page is rendered?

Here is my code:

<body>
    <input id="dropdowntree">
<script>
  $(document).ready(function () {

    var localData = [
        { id: 1, text: "Parent 1", items: [
            { id: 2, text: "Child 1.1" },
            { id: 3, text: "Child 1.2" }
        ]},
        { id: 4, text: "Parent 2", items: [
            { id: 5, text: "Child 2.1" },
            { id: 6, text: "Child 2.2" }
        ]}
    ];
    
    
    var dropDownTree = $("#dropdowntree").kendoDropDownTree({
      placeholder: "Select an item...",
      dataSource: {  
        data: localData,
      schema: {
        model: {
            id: "id", 
            children: "items",
            fields: {
                id: { type: "number" },
                text: { type: "string" }
            }
        }
      }      
      },
      loadOnDemand: {
//THIS IS NOT CALLED UNTIL I START CLICKING NODES
        valueMapper: function (options) {
        var value = options.value;
        var item = localData.find(function (dataItem) {
            return dataItem.id == value;
        });
        options.success(item ? [item.id] : []);
        }
      },
      dataTextField: "text",
      dataValueField: "id",		
      //value: [2,5],    //SETTING THIS DID NOT HELP
      checkboxes: true, 
      checkAll: true,   
      autoClose: false
    });

    dropDownTree.value = [5]; // Trying to manually set value and call the valuemapper
  });
</script>
    
</body>

DropDownList

answered on 31 Jul 2025

1 answer

26 views

Best way to display hierarchy dropdown with large data set

I am using Vue.js 2.x and Kendo controls.

Currently we are using the Kendo dropdowntree control to display hierarchy data.

Our control allows:

-1 or more items to be selected

-Also, once the data is saved, if the record is edited later, the dropdowntree will check each item that was previously checked.

-The properties we set in the dropdowntree:

      :data-source="items"
      tagMode="single"
      :autoClose="false"
      :checkboxes-check-children="checkChildren"
      :check-all="true"
      :placeholder="placeholder"
      dataTextField="text"
      dataValueField="id"
      @change="onChange"
      :value="selectedItems"
      style="width: 100%"
      height="400px"
      :load-on-demand="false"

The problem we have is that we have a scenario where a large hierarchy is being returned from the API with over 2000 rows.

This is causing the dropdowntree to take a long time to populate the control.

Is there a recommended way for the dropdowntree to handle large amounts of data?

Is there another control that can handle large amounts of data and display the data like the dropdowntree?

Is there another recommended way to display a hierarchy dropdown that acts like the dropdowntree?

DropDownList

DropDownTree wrapper

answered on 30 Jul 2025

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

0 answers

168 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

0 answers

98 views

DropDownTree won't close when filtering

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

DropDownList

asked on 12 Jun 2024

1 answer

89 views

I want to customize the filter of DropDownList

Hello, Kendo!

I use kedno UI for Vue3.
I have a question. When I use filter of DropDownList, can I customize the filter region like that?
I couldn't find filterRender Property.

thanks.

DropDownList

answered on 11 May 2024

1 answer

170 views

Filter with data item key and text field in dropDownList

Hello,

I have a queastion. When I use DropDownList in Navtive components of Vue3, I want to filter with both data item key and text field.
but the method I found is only using one field.

The field properties of a DropDownList are strings or functions.
I need Array<string> like ['dataItemKey', 'textFiled']. Can I?

example :

data-Item-list = [
{text : 'A', value : 1},
{text : 'B', value : 2},
{text : 'C', value : 3},
{text : 'D', value : 4}
]

When I put 3, C is searched.
At the same time I put D, D is searched.

DropDownList

answered on 27 Mar 2024

1 answer

644 views

DropDownTree - Allow selection of child node, but not parent nodes

Is it possible to prevent the user from clicking (selecting) a parent node, but still allow selection of any children. Or ideally change the behaviour of the parent node to expand / collapse the node. The current behaviour of the DropDownTree is that all children are selected, and I don't want this, only a single (child)node should be selectable

So in the example below, the user can select on Apple, Orange etc, but not Fruit / Vegetable

- Fruit
- Apple
- Orange
- Peach
- Vegetable
- Spinach
- Beans
etc

DropDownList

DropDownTree wrapper

answered on 24 Jan 2024

1 answer

113 views

Customize fields dropdownlist inside the Vue data tools filter

For the data tools filter is it possible to customize the dropdownlist component that is used to display the list of fields assigned to the :fields prop? I have followed the documentation for customizing the editors used for the fields input values , using slots, which works well. However I wanted to add the "filterable" attribute to the fields dropdown list as we have a large number of fields in the list and it would be good to be able to filter the list via a searchbox.

DropDownList

answered on 23 Nov 2023