Questions on Kendo UI for Vue Forum

0 answers

15 views

Latest Online Resources about Kendo UI for Vue

Hello everyone,

Here are the highlights of the new online resources we published this week from 10 Nov 2025 to 17 Nov 2025:

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/grid-search-bar
Summary: Explains how to implement a global search bar for the Kendo UI for Vue Grid that filters rows across multiple columns. Place an Input in the GridToolbar, build a CompositeFilterDescriptor with logic "or" (using contains for strings and appropriate operators per type), and apply it client-side with @progress/kendo-data-query’s filterBy or send it to your API for server-side filtering; covers clear/reset and optional debouncing.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/chart-stop-animation
Summary: This article shows how to stop and disable animations in Kendo UI for Vue Charts. Set the Chart transitions prop to false to prevent animations on initial render and data updates; for pie/donut series, also disable per-series animation with seriesDefaults.animation.visible = false. It includes Vue examples for toggling these settings at runtime when data changes frequently.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/chart-color-by-category
Summary: Explains how to color Kendo UI for Vue Chart data points by category by defining a ChartSeriesItem that binds to your data and using colorField to read a per-item color, alongside categoryField for category labels. For chart types without colorField support, use the series visual callback to set fill/stroke based on args.category or args.dataItem.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/checkbox-simulate-group
Summary: Learn how to simulate a checkbox group with Kendo UI for Vue CheckBox components by controlling each checkbox’s checked state from a shared array of selected values and updating that array in the change handler. The article covers defining per-checkbox value props, initializing defaults, and integrating the group into forms for validation and submission. Use this pattern when you need grouped checkbox behavior without a dedicated CheckboxGroup component.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/grid-reduce-header-height
Summary: Learn how to reduce the Kendo UI for Vue Grid header height via CSS by adjusting header cell padding and line-height in .k-grid-header/.k-table-th, while keeping sort and filter icons aligned. The article provides concrete selectors that work with kendo-theme-default/Bootstrap/Material and shows how to apply them in a Vue SFC to achieve a more compact header row.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/menu-open-url-in-new-window
Summary: Learn how to make Kendo UI for Vue Menu items open URLs in a new tab/window. You can either render the item link with target="_blank" (and rel="noopener noreferrer") using the Menu’s custom link/item slot, or handle the Menu select event and call window.open with the item’s url. The article shows how to access the item data from the event and safely open external links.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/grid-pdf-export-show-message
Summary: This article shows how to display a “Generating PDF…” message while exporting the Kendo UI for Vue Grid by using a ref to GridPDFExport and a reactive loading flag. Set the flag before calling save(), then clear it in the async completion handler (promise resolve/catch or pdfExport event), so the message is shown only during the PDF export.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/grid-customize-no-records-component
Summary: Learn how to customize the Kendo UI for Vue Grid empty state by replacing the default “No records available” view. Use the Grid’s no-records slot/GridNoRecords component to render custom content (messages, icons, actions) when data-items is empty, and conditionally vary it based on filtering or loading state.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/listview-scrolling-to-specific-item
Summary: Learn how to programmatically scroll the Kendo UI for Vue ListView to a specific item by index or identifier. The article shows how to access the ListView content via a Vue ref, locate the target .k-listview-item, and use its offsetTop or scrollIntoView to update scrollTop after nextTick. It also covers timing considerations so scrolling runs after data binding and rendering completes.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/radiogroup-disable-specific-options
Summary: You can disable specific options in the Kendo UI for Vue RadioGroup by adding a disabled flag to your data items and rendering the radios via the item slot to set :disabled per option. This approach prevents selection of certain choices without disabling the whole group and maintains value binding, keyboard navigation, and accessibility.

Feel free to check them out and share your thoughts!

The Telerik Team

General Discussions

updated question on 17 Nov 2025

1 answer

15 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

0 answers

14 views

Kamal Hinduja : How to implement custom cell templates with Kendo UI Vue?

Hi,

I am Kamal Hinduja based Geneva, Switzerland(Swiss). Can anyone share their experience How to implement custom cell templates with Kendo UI Vue?

Thanks, Regards

Kamal Hinduja Geneva, Switzerland

General Discussions

asked on 15 Oct 2025

1 answer

20 views

Scheduler day view prevent long events from always rendering first when overlapping

Hi,

I’m using Kendo UI Scheduler for Vue in day view.
I need to control the order of overlapping events (e.g. show isPrivate=true events to the right side, and public ones to the left).

Right now, I can sort my eventList in Vue before passing it to the Scheduler, but the rendered order is not respected. The Scheduler seems to:

Render events by start time first.
Then order them internally by duration (longer events get positioned to the left, shorter ones to the right).
If two events share the same start time, the order is taken from an internal index, not from my sorted data.

This results in long, all-day or multi-hour events always being drawn first (on the left), pushing shorter events to the right — even if my sorted array has the shorter events first.

My question:
👉 Is there a built-in way to disable duration-based sorting of overlapping events in the Scheduler, or to explicitly control the rendering order of events (e.g. by a custom field like isPrivate)?

I already tried:

Sorting the data source before binding.
Using custom templates (eventTemplate, dayTemplate).

But the layout order still follows Scheduler’s internal logic.

Any guidance or workaround (config, event hook, or customization point) would be appreciated!

Thanks!

Calendar

Scheduler

answered on 07 Oct 2025

1 answer

35 views

Request for Customization and Licensing Clarification Regarding Kendo Script and YouTube API

This is the Code

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="MassEditVCR.aspx.cs" Inherits="NGC.Web.Application.MassEditVCR" %>
<%@ Import Namespace="NGC.Language" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title><%=NGC.Language.LM.GetString("LBL_MASS_EDIT_VCR")%></title>
		<%--<meta id="dataTableName" name="dataTableName" content="productionorder" runat="server" />--%>

		<meta id="securityID" name="securityID" content="60316" runat="server" />
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

	<link  rel="preload"  href="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"  as="script"/>
	<link  rel="preload"  href="https://unpkg.com/@progress/kendo-vue-intl@2.7.3/dist/cdn/js/kendo-vue-intl.js"  as="script"/>
	<link  rel="preload" href="https://unpkg.com/@progress/kendo-vue-grid@1.2.0/dist/cdn/js/kendo-vue-grid.js"  as="script"/>
	<link  rel="preload" href="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"  as="script"/>
	<link  rel="preload" href="https://unpkg.com/@progress/kendo-vue-excel-export@1.2.0/dist/cdn/js/kendo-vue-excel-export.js"  as="script"/>
	<link  rel="preload" href ="https://unpkg.com/@progress/kendo-theme-default@4.43.0/dist/all.css" as="style" />

	<link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@4.43.0/dist/all.css" />
    
</head>
<body>
	<div id="sg1">
		<div id="maintoolbar" data-ngc-toolbartable="productionorder" data-ngc-role="toolbar">
				<div class="section">
				<h1><%=NGC.Language.LM.GetString("LBL_MASS_EDIT_VCR")%></h1></div>
		<div class="defaults noPrint">
	<input type="button" name="btn_boxtoggle" id="btn_boxtoggle" title="Collapser" value="Collapser" class="noPrint btncollapse BtnLayoutIcon BtnActive BtnIconExpand"  @click="toogleExpandedRows" >
		<button  @click="save" class="k-button BtnLayoutIconText BtnIconSave DoPost"><%=NGC.Language.LM.GetString("LBL_SAVE")%></button>
		<button  @click="saveAndSubmit" class="k-button BtnLayoutIconText BtnIconSave DoPost"><%=NGC.Language.LM.GetString("LBL_SAVE_SUBMIT")%></button>
		<button @click="refreshData" class="k-button BtnLayoutIconText BtnIconCancel DoPost"><%=NGC.Language.LM.GetString("LBL_CANCEL")%></button>
		<div class="custombutton">
		<button   @click="loadRecords" class="k-button BtnIconDownload  BtnLayoutIconText DoPost" id ="loadRecords"><%=NGC.Language.LM.GetString("LBL_LOAD_MORE")%></button>		
		<button @click="exportExcel" class="k-button BtnIconFileExcel  BtnLayoutIconText"><%=NGC.Language.LM.GetString("LBL_EXPORT_EXCEL")%></button>
		<button id="btn_configure" @click="configure" class="k-button BtnIconConfigure  BtnLayoutIconText" style="display: none;"><%=NGC.Language.LM.GetString("LBL_SELECT_COLUMNS")%></button>
		</div>
	</div>
	</div>
		<div id="toolbarSeparator"></div>
			<div class="otheritems">
				<NGC:Field ID="view" Label="LBL_VIEW" runat="server" IsDisabled="true" DataSource="viewname" Validation="ReadOnly" />
	</div>
		<kendo-grid :style="{height:  '600px', width: '100%'}" 
			id="renderedData"
			:data-items="gridData"
			:cell-render="cellFunction"
			:row-render ="rowRender"
			:resizable="true"
			:pageable="true"
			:skip= "skip"
			:take="take"
			:total="total"
			:sortable="true"
			:sort= "sort"
			:selectable="true"
			:selected-field="selectedField"
			:filter="filter"
			:filterable="true"
			:groupable="{footer: 'visible'}"
			:group= "group"
			:expand-field="'expanded'"
			:columns = "columns"
			 :edit-field="'inEdit'"
			:reorderable="true"
			@columnreorder="columnReorder"
			@datastatechange="dataStateChange"
			@selectionchange="onSelectionChange"
			@headerselectionchange="onHeaderSelectionChange"
			@expandchange="expandChange"
			@pagechange="pageChangeHandler" 
			>
			<template v-slot:myreasonCell="{props}">
			<td>
			<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'" class="field"  data-ngc-hint="search"   :class="classObject(props)">
				<input  data-ngc-datatype="text" :value="props.dataItem[props.field]" v-on:change="setDataFields(props, event)" />
				<span   v-on:click="openSearch(props)">&nbsp;</span>
			</div>
			</td>
			</template>
			<template v-slot:checkboxCell="{props}">
				<td>
					<div :data-item="props.field"  v-if="props.rowType !== 'groupFooter'"  :class="classObject(props)">
					<input type="checkbox"   data-ngc-datatype="bit" :value="props.dataItem[props.field]" :checked="props.dataItem[props.field]" @change="setDataFields(props, event)"/>
					</div>
				</td>
			</template>
			<template v-slot:textareaCell="{props}">
				<td>
					<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field"  :class="classObject(props)">
					<textarea class="font" data-ngc-datatype="text" cols="60" rows="4" style="height: 50px; min-width: 200px; width: 100%;"  :value="props.dataItem[props.field]" v-on:change="setDataFields(props,event)"></textarea>
					</div>
				</td>
			</template>
			<template v-slot:dateCell="{props}">
			<td>
				<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field "	data-ngc-hint="datepicker"   :class="classObject(props)" >
				 <input  type="text" :id="(props.dataIndex === -1 ?  props.dataItem.value : props.dataIndex) + props.field" maxlength="10" :value="setFieldValue(props,'date')" 
				 data-ngc-datatype="date"   v-on:change="setDataFields(props ,event)">
				<span  data-ngc-role="datepicker"  v-on:click="__NGCdatepickerMethods.callDatePicker((props.dataIndex === -1 ?  props.dataItem.value : props.dataIndex) + props.field)">&nbsp;</span>
				</div>
			</td>
			</template>
			<template v-slot:intCell="{props}">
			<td>
					<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field " data-ngc-datatype="int"  :class="classObject(props)">
					 <input type="number"  :value="props.dataItem[props.field]"  min="0.0000" max="1000000000.0000" data-ngc-role="field" 
					data-ngc-validation="Number" data-ngc-datatype="number" v-on:change="setDataFields(props ,event)" ></div>
			</td>
			</template>	
				<template v-slot:moneyCell="{props}">
				<td>
					<div :data-item="props.field" v-if="props.rowType !== 'groupFooter'"  class="field "  data-ngc-datatype="money"  :class="classObject(props)">
					 <input type="number"   data-ngc-datatype="money"   :value="props.dataItem[props.field]"   min="0.0000" max="1000000000.0000" data-ngc-role="field" 
					data-ngc-validation="Number|Decimal|Money" step="0.0001" data-ngc-precision="4"  v-on:change="setDataFields(props ,event)" ></div>
			</td>
			</template>	
		     <grid-toolbar>
			<button  @click="copy(event)" class="k-button BtnLayoutIconText BtnIconCopy DoPost"><%=NGC.Language.LM.GetString("LBL_COPY")%></button>
			<div class="checkBox">
			<input type="checkbox" v-model="filterModifiedRow"  @change="showModifiedRows(event)"/><label id="label_showModifiedRow" for="showModifiedRow"><%=NGC.Language.LM.GetString("LBL_FILTER_MODIFIED_LINES")%></label>                 
			</div> 
			<div class="freezefields"><input type="number" id="freezedcolumns" name="freezedcolumns" v-model="freezeColumns"  min="0.0000" max="1000000000.0000" @change="updatefreezeColumns(event)"   data-ngc-validation="Number" step="any" data-ngc-precision="0" title="4" class="">
			</div>
			<div class="labelBox"><label id="label_freezefields" for="freezefieldscolumn"><%=NGC.Language.LM.GetString("LBL_FREEZE_COLUMNS")%></label></div>
			<div class="inputFilter customfilter ">
					<input id="filter_filterobj" name="filter_criteria" type="text"  v-model="searchWord"><input id="dashboarditems_clear" type="button" class="inputClearButton"  @click="searchClear()" value="Clear">
				</div>
			
			</grid-toolbar>
</kendo-grid>
		<input type="hidden" id="productionOrderIDJSON" runat="server" />
		<input type="hidden" id="quantityreasoncodes" runat="server" />
		<input type="hidden" id="condition" runat="server" />
		<input type="hidden" id="isrequirefactorycommentsvcr" runat="server" />
	</div>
	<script src="https://unpkg.com/@progress/kendo-vue-intl@2.7.3/dist/cdn/js/kendo-vue-intl.js"></script>
	<script src="https://unpkg.com/@progress/kendo-vue-grid@1.2.0/dist/cdn/js/kendo-vue-grid.js"></script>
	<script src="https://kendo.cdn.telerik.com/2021.1.119/js/kendo.all.min.js"></script>
	<script src="https://unpkg.com/@progress/kendo-vue-excel-export@1.2.0/dist/cdn/js/kendo-vue-excel-export.js"></script>
<NGC:SearchResults runat="server" ID="ngcsearchresult" />
</body>
</html>

This error is coming in the console

The main kendo script is referencing a youtube.api interface, this is the reason the control will not work in China. We will need help to get support from Telerik to see if it is possible to customize the main script by removing all references to "youtube", and also to find out if we can distribute the script under the licensing terms (we would have to include the script in our Web/scripts folder - not import from the Telerik source).

Please give me some guidance and help to resolve that issue

Grid wrapper

answered on 06 Aug 2025

1 answer

33 views

Discontinued Wrapper Migration Q

First off: I know they are discontinued, not looking for support on them, this is a migration question

I'm investigating the possibility of migrating from vue2 to vue3 on our CMS, we have a bunch of vue2 kendoui vue2 wrapper widgets.

I have loaded the vue3 compat script and the widgets seem to still load (albeit with the warnings in the console). But will the continue to work if I fully move to vue3 or do they only work in the context of vue2.

General Discussions

answered on 01 Aug 2025

1 answer

30 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

25 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

22 views

Customizing the button 's appearance through the available Sass variables

Unless I'm mistaken, but I cannot customize the apperance of Button which have the properties: 'theme-color' and 'fill-mode'.
In my case, I would like change the variable kendo-button-focus-shadow in the button : fill-mode (outline) and theme-color(primary).

Button

Styling / Themes

answered on 24 Jul 2025

0 answers

55 views

[Vue 3] Update DatePicker value using vue-test-utils

Hello, I am using the DatePicker component from the @progress/kendo-vue-dateinputs package.

I am trying to update the value of the date picker in a unit test using vue-test-utils.

I have tried the following, which is how I would ordinarily update input values:

const input = wrapper.find('input[id="my-date-field"]');

endDateInput.setValue('01/01/2025');
await nextTick();
endDateInput.trigger('change');
await nextTick();

This does seem to update the value, but does not update it correctly.

A snapshot of the markup after setting the value this way shows that it appears to set the year based on the last 2 digits of the new value, but not correctly, and it is also missing the dd/mm parts:

<input role="combobox"class="k-input-inner" id="my-date-field" value="dd/mm/0025" etc...>

Is there a way in which I can update the date picker value correctly?

I appreciate that the calendar popup is appended to <body>, so setting the value using that programatically is not possible, but any way of being able to update the input value is fine.

Happy to provide a minimal repro if required.

DateInput

DatePicker

DateTimePicker

updated question on 25 Jun 2025