Kendo UI for Vue Forum RSS

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

Cs Garuda Indonesia

Anda bisa menghubungi layanan pelanggan Garuda Indonesia di (O899-979-1983) untuk pengajuan refund tiket Garuda Indonesia.

Cara pembatalan Pinjaman Akulaku 100% Berhasil

Hubungi Call Center (Akulaku) di nomor (083848484874) atau melalui email ke cs@akulaku.com. Sampaikan permintaan pembatalan pengajuan pinjaman dan berikan alasan anda melakukan pembatalan...

cara pembatalan pinjaman tunaiku!

Berikut Cara Membatalkan Pinjaman (Tunaiku) Kamu bisa menghubungi layanan Live Chat via WA/(+62838-4848-4874.), ikuti Arahan customer service Layanan real-time 24/7.

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

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

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!

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

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.

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>

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?

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).

[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.

Issue with Data Columns Not Displaying Properly During Horizontal Scrolling (Vue 3)

Hello,

I'm currently using Vue 3 with Kendo UI Grid for Vue (version 4.3.3).
My grid has Multiple columns and Multi-headers.

However, when I scroll horizontally, the data columns are not displayed correctly.
They either appear misaligned or are not rendered properly.

Could you please advise how to resolve this issue?

Any help would be greatly appreciated.

<template style="table-layout: fixed;">
    <div class="row">
      <div class="col m-3">
        <Button @click="loadItems">Load 100 000 items</Button>
      </div>
    </div>
    <div class="row">
      <div class="col m-3">
        Virtual Scrolling
        <Switch @change="handleSwitchChange" :on-label="''" :off-label="''" />
        Paging
      </div>
    </div>
    <Grid
      :key="isPagingOn"
      :style="{ height: '440px' }"
      :scrollable="isPagingOn ? 'scrollable' : 'virtual'"
      :column-virtualization="true"
      :skip="skip"
      :take="take"
      :total="numberOfRows"
      :data-items="items"
      :columns="columns"
      :row-height="27"
      :pageable="isPagingOn ? pagerSettings : false"
      @pagechange="pageChange"
      :sortable="true"
      @sortchange="sortChange"
      :sort="sort"
      @cellclick="cellClick"
      @rowclick="rowClick"
      :page-size="10"
      :edit-field="'inEdit'"
      :data-item-key="'id'"
      @itemchange="itemChange"
    >
    </Grid>
  </template>
  <script>
  import { orderBy } from '@progress/kendo-data-query';
import { Button } from '@progress/kendo-vue-buttons';
import { Grid } from '@progress/kendo-vue-grid';
import { Switch } from '@progress/kendo-vue-inputs';
  export default {
    components: {
      Grid,
      Button,
      Switch,
    },
    data: function () {
      return {
        dataItems: [],
        data: [],
        numberOfColumns: 100,
        numberOfRows: 100000,
        pagerSettings: {
          info: true,
          type: 'input',
          previousNext: true,
        },
        columns: [],
        expandColumn: 'expanded',
        expandField: 'expanded',
        skip: 0,
        take: 20,
        isPagingOn: false,
        sort: [],
        items: [],
      };
    },
    created: function () {
      this.columns = this.createColumns();
      this.data = this.getData();
    },
    methods: {
      itemChange: function (e) {
        e.dataItem[e.field] = e.value;
      },
      cellClick: function (e) {
        if (e.dataItem.inEdit && e.field === this.editField) {
          return;
        }
        this.editField = e.field;
        e.dataItem.inEdit = e.field;
      },
      rowClick: function (e) {
        this.items.forEach((d) => {
          if (d.inEdit) {
            if (e.dataItem !== d) {
              d.inEdit = undefined;
            }
          }
        });
      },
      loadItems() {
        this.dataItems = this.data;
        this.items = this.dataItems.slice(this.skip, this.skip + this.take);
      },
      createColumns() {
        const columns = [
          {
            field: 'id',
            width: '150px',
          },
          {
            field: 'Field-1',
            width: '150px',
          },
          {
            title: 'test',
            children: [
              {
                field: 'Field-2',
                width: '150px',
              },
              {
                field: 'Field-3',
                width: '150px',
              },
              {
                field: 'Field-4',
                width: '150px',
              },
              {
                field: 'Field-5',
                width: '150px',
              },
              {
                field: 'Field-6',
                width: '150px',
              },
              {
                field: 'Field-7',
                width: '150px',
              },
              {
                field: 'Field-8',
                width: '150px',
              },
              {
                field: 'Field-9',
                width: '150px',
              },
              {
                field: 'Field-10',
                width: '150px',
              },
              {
                field: 'Field-11',
                width: '150px',
              },
              {
                field: 'Field-12',
                width: '150px',
              },
              {
                field: 'Field-13',
                width: '150px',
              },
              {
                field: 'Field-14',
                width: '150px',
              },
              {
                field: 'Field-15',
                width: '150px',
              },
            ]
          }
        ];
        /* for (let c = 1; c <= this.numberOfColumns; c++) {
          columns.push({
            field: 'Field-' + c.toString(),
            width: '150px',
          });
        } */
        return columns;
      },
      pageChange(event) {
        this.skip = event.page.skip;
        this.take = event.page.take;
        this.items = this.dataItems.slice(this.skip, this.skip + this.take);
      },
      handleSwitchChange(e) {
        this.isPagingOn = e.value;
      },
      sortChange(e) {
        this.dataItems = orderBy(this.data, e.sort);
        this.items = this.dataItems.slice(this.skip, this.skip + this.take);
        this.sort = e.sort;
      },
      getData() {
        const page = [];
        for (let r = 1; r <= this.numberOfRows; r++) {
          const row = {
            id: r,
          };
          for (let c = 1; c <= this.numberOfColumns; c++) {
            row['Field-' + c] = 'R' + r + ':C' + c;
          }
          page.push(row);
        }
        return page;
      },
    },
  };
  </script>

Thank you.

How to mark specific dates in the calendar component

The project requires marking activities dates , so I want to highlight the corresponding event dates in the calendar component by displaying them with a red background. Are there any relevant methods for this?

I've checked the customization options in the documentation:

- The `CalendarCell` method only allows selecting dates within the current month and cannot select dates from other months.
- The `slot` method does not support selecting dates, months, or years.

Is there another way to achieve this?

Datepicker Custom Date allowed - All other dates should be disabled

Hi All,

I have a query which goes as below -

We have min and max dates already applied to this datepicker.
But we want to go one step ahead and disable all the dates of the month save the last date between the min and max dates.

Thanks,
Ronnie

Using kendo-wrapper packages throw dependencie issue on npm install

Hi there,

I'm updating my kendo components which works fine.

"@progress/kendo-data-query": "^1.7.1",
"@progress/kendo-drawing": "^1.21.2",
"@progress/kendo-licensing": "^1.5.1",
"@progress/kendo-theme-default": "^10.3.1",
"@progress/kendo-theme-material": "^10.3.1",
"@progress/kendo-ui": "^2025.1.227",
"@progress/kendo-vue-animation": "^6.1.0",
"@progress/kendo-vue-data-tools": "^6.1.0",
"@progress/kendo-vue-dateinputs": "^6.1.0",
"@progress/kendo-vue-dropdowns": "^6.1.0",
"@progress/kendo-vue-grid": "^6.1.0",
"@progress/kendo-vue-inputs": "^6.1.0",
"@progress/kendo-vue-intl": "^6.1.0"

But when I try to install the wrapper packages:

@progress/kendo-charts-vue-wrapper
@progress/kendo-datasource-vue-wrapper
@progress/kendo-dropdowns-vue-wrapper
@progress/kendo-inputs-vue-wrapper

I get dependency issues (see image attached). The wrapper packages expect kendo-ui 2024.3.806

Questions:

Is it save to use --force or better --legacy-peer-deps?
Can you please update these package dependencies to kendo-ui@latest?
Or are the wrapper packages of no use anymore?

Thank you very much

Oliver

Question about Grid Grouping and Live Aggregate Updates

Hi,

I am using grid grouping and aggregates. I tried to place the aggregated values in the header of the group instead of the footer but was not successful. Is there a way to do this?

Additionally, is it possible to update the aggregated values live? For example, if a user changes a value in a cell, the aggregate value is also updated live?

Thank you in advance.

Best regards, Ziggy De Caluwé

Escape backslash in a Kendo Template for a v-model Vue directives

How do you backslash escape Vue directives in a Kendo UI Template.

I want to escape a v-model on my Kendo UI template.

This is how I tired to escape them but it did not work.

<input type="checkbox"  \# v-model="checked" \# > EDIT:

I tried using a double escaped \# like this:

 <input type="checkbox"  \\# v-model="checked" \# >

But it did not work, when I examined the page via chrome dev tool, this is how the input is displayed:

 
<input type="checkbox" #="" v-model="checked">
The reason for the v-model is that I am trying to do an 'if conditional' in my Vue.js model
. i.e
<script>
    const mixin = {

        data: function() {
            return {
               checked:true
       }

  created() {
    this.checked = this.addGoals();
   },
  methods: {
    addGoals() {
	if (test === 3){
        return true;
        }else{
	return false;
     }
  }

</script>

I did try this method to escape the values but it did not work:

<input type="checkbox" #:v-model="checked">

The error message:

Uncaught Error: Invalid template:'

Issue with Grid custom filterCell

Hello all,

Facing some issue with rendering filterCell with a custom component. This was working fine with Vue 2, and seems broken after we upgraded our application to Vue 3 and latest Kendo UI.

https://stackblitz.com/edit/dwpfqucx?file=src%2Fmain.vue%3AL18

Requesting for help, as we are stuck upgrading to latest Kendo UI

There is a significant problem with MultiSelect, since updating Chrome

Hi, kendo

I used Kendo Ui for Vue.

I found a problem in multiSelect.
You can enter the link - https://www.telerik.com/kendo-vue-ui/components/dropdowns/multiselect
This is demo page for multiSelect provide by kendo.

After chrome update for 133.0.6943.99 since 12 feb 2025, If you click on the item, an error occurs.

click "Cricket"
Then, moved next image

I think there is a error in default tag-render.
Because when I used tag-render (include your demo page for MultiSelect used tag-render),
the error no longer occurs.

Please check tag-render in multiSelect
My pages can't use the multiSelect now...

And, I use multiSelect in v4.1.1, it was fixed, windows OS

Kendo UI Globalization issue for the Grid Widget

Hi All,

I tried following the tutorial https://www.telerik.com/kendo-vue-ui/components/wrappers-globalization/ to enable the internalization for my app. As we all know, the default language is en-US and I used kendo.culture("en-AU") to apply the new culture. After it is done, when debugging, the new feature did apply to the DatePicker like this: (which is dd/MM/yyyy as the Australia Date Format)

However, I found the new feature did not apply correctly to the Filter feature in Grid Widget, see the screenshot below: (which is still the US format)

In theory it can be applied correctly based on the tutorial. May I ask the reason for this? Much appreciated for the answer, thanks!

TextEditor - Paragraph / Font Size / Font familly do not do anything

Hello,

I use last version of kendo vuejs editor with vuejs 3 . Paragraph / Font Size / Font familly do not do anything.

You can test it on your own documentation :

https://www.telerik.com/kendo-vue-ui/components/editor/

How do I manually trigger the change event in the numeric textbox in vue after setting its value?

I found the way to trigger the change event manually in jQuery but I need a way to access the widget in vue. I am using an on screen keyboard (https://www.npmjs.com/package/simple-keyboard) to insert the values into the numeric textbox. I am struggling to access the widget to raise the change event. I am using the Vue Native Numeric Textbox. Below is how to trigger it using jQuery.

$("#numeric").kendoNumericTextBox();

var numerictextbox = $("#numeric").data("kendoNumericTextBox");
function changeValueFromCode(){
numerictextbox.value(40785);
numerictextbox.trigger('change');
}

How to automatically focus the input after clicking for in-cell Grid Editing

How to automatically focus the input after clicking for in-cell Grid Editing like jquery

Customise Column Menu to use a dropdown list for filter

I can't find anything in the docs that demonstrates how to customise the filter component of a column menu. I need to replace the filter's input with a dropdown list. I'm trying to replicate functionality that was fairly straight-forward using Kendo UI for jQuery.

Any advice is much appreciated.

Filter component - custom dropdown editor doesn't show selected value

I'm using the Filter component with Grid -- both bound to the same filter value, similar to the example shown in the docs here: Vue Data Tools Library & Filter - Custom editors - Kendo UI for Vue Docs & Demos

However, as in the example given, I can't get the custom dropdown to show the value of the currently aplied filter for the corresponding field.

In the example, if you change the operator of the Product Name filter using the filter row, the operator dropdown in the Filter component is updated to match. However, if you change the filter value in the filter row to, for example 'Chang', the dropdown in the Filter component is not updated to match the applied filter.

If you remove the custom dropdown, the value field in the Filter component will reflect the value aplied in the filter row. This is the two-way binding I'm trying to achieve with a custom filter component.

Please advise.

Custom template for locked cell

I'm trying to implement the locked feature of a Grid cell that's using a cell template.

I've found the Knowledge Base article that describes this scenario: Learn how to implement a locked column with a custom cell template inside the Native Grid but it doesn't work: not just in my implementation -- the demo doesn't work.

The ID cell in the demo should be locked, but isn't.

It may help if there was a documented list of the props available in a cell template somewhere, but I can't find one.

Any suggestions?

Checkbox List rendering from multiselect dropdown: [Vue warn]: Property "customItemRender" was accessed during render but is not defined on instance.

Hi Team,

I was tried to custom render from Multiselect dropdown as a checkboxlist but while rendering I am getting the [Vue Warn]. Could you please help me to resolve the issue and help me out to get the checkbox list instead of multielect dropdown in the UI. Also please suggest the best practice to deal with this implementation.

I have added the screenshot what I have tried with customItemRender method. Please guide me to achieve what I have tried for.

Thanks In advance.

Thanks

Gunasundari

v6.0.1: Incorrect type definitions?

I have just upgraded from version 5 to 6. Now the problem is that many types of events resolve to “(((...args: any[]) => void) | undefined”. In version <6, these were named events, which are also listed accordingly in the documentation.
As a result, the projects can no longer be build. This also happens if version 6 is installed directly in an empty project.

Examples:

Are we doing something wrong here or are the type definitions incorrect?

Warning in KendoFontName when using Editor

Hello,
I've upgraded my Kendo to version 6.0.1. and i has two warnings in console when using the component Editor.

`[Vue warn]: Methods property "onChange" is already defined in Props. at <KendoFontName view=undefined dir=undefined key=119 ... > at <KendoToolbar class="k-editor-toolbar" keyboardNavigation=true > at <KendoEditor key=0 ref="kendoEditorElement" value=.....`

and

` Methods property "onDown" is already defined in Props.

at <KendoPopupGrid rows=6 columns=8 createTableMessage="Créer un tableau" ... > at <Popup anchor="eda4e46c-418d-4558-bc72-9b8737cd5c57" anchorAlign=

popupAlign=

`

Do you know the reason of this warnings?

Thanks advance.

Native Grid AutoFitColumn

I can't seem to find anything in the docs about how to make the columns auto-fit the width of the container. In the grid wrapper, I've found https://docs.telerik.com/kendo-ui/knowledge-base/grid-autofit-all-columns-width and can use the dataBound event to access the autoFitColumn method. However, I just can't find anything similar in the docs for the native grid.

Thanks for any help I can get!!

Dymanic Grid height

How can you programatically change the height of the Grid?

My Grid is displayted within a container that can optionally switch to full-screen. The height of the Grid remains fixed, and applying a reactive style based on container height has no effect.

Window with initialheight and initialWidth is not centered in the viewport

I'm setting both the initialWidth and initialHewight (600 and 400) to the Windows is large enough for the content, but it's not initially positioned at the center of the viewport when opened.

It displayed at the correct size, but it's too far to the right and too close to the bottom.

Any ideas why?

Typescript documentation?

Hi,

I am trying to evaluate the Vue Components but I cannot find any documentation about the data types. For example what is

the data type of a scheduler item?

Is it still supported this product? Is it Typescript supported?

Every example looks really old using javascript and the options API and most of the links on the documentation are dead ...

Tab focus Calendar vs DatePicker

Why are you allowed to tab focus onto the Month/Year selector at the top of the calendar control but cannot do the same with the DatePicker? With the DatePicker, focus is placed directly on the grid and only arrow keys work. Is there some way to override this and tab onto the Month/Year selector?

Filter component needs an Apply button

There's no option for an Apply button on the Filter component.

The FilterChangeEvent fires with every action, so adding a new criteria triggers the event before the operator and values have been set.

If you've got the Filter hooked up to a Grid, this causes the rows to change in an unwanted way. This is particularly problematic if the data is coming from a remote API as it causes multiple GET requests, often with invalid filter configurations.

I can probably come up with a workaround that stores the value of the filter and only applies it when I click a button, but this shouldn't be necessary.

How does incell editing work with custom cell templates

I've creted a Grid that uses a custon cell template for a number of columns.

I'm now trying to implement incell editing, following the example in the documentation, but the @cellclick event is not triggering when I click on a cell that uses a custom template.

How can I get the @cellclick event to fire?

Grid filtering using Filter Row is unresponsive

You can see this issue in the documentation for the Filter Row.

You need to type really slowly into the filter field for the correct text to be applied. This is probably something to do with filtterchange being triggered immediately -- the input os not debaoiunce and there's no option for an 'Apply' button.

How to customize the group title and bind events to it?

In the Native Components grid of kendo ui for vue, how can I customize the group title and bind events to it? For example, I need to select all the items under a group when the group title is clicked. How can this be achieved?

D9gxzs (forked) - StackBlitz

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?

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!

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

[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"                >

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

How to customize the editing task page for Gantt

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

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

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!

Spreadsheet Excel

Hello,

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

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.