09 Mar to 16 Mar 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/chart-classification-banners
Summary: Learn how to add a classification banner/watermark (e.g., Confidential, Internal) to a Kendo UI for Vue Chart by drawing a rotated text strip on the chart surface in the render event with @progress/kendo-drawing. The article computes the plot area bounds, centers and rotates the banner, and redraws it on resize so it scales with the chart and is included in image/PDF export, unlike a CSS overlay. This pattern works across chart types without modifying series data.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/dialog-close-on-outside-click
Summary: This article shows you how to close a Kendo UI for Vue Dialog on outside/backdrop click by detecting clicks on the modal overlay (k-overlay) and toggling the Dialog’s open state. You add a document listener with proper cleanup and wire it to the same onClose handler used for the close icon and Escape key, so all close paths are handled consistently in Vue 2 or Vue 3 with @progress/kendo-vue-dialogs.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/upload-position-drop-zone-hint-next-to-button
Summary: Position the Kendo UI for Vue Upload drop zone hint (“Drop files here to upload”) next to the Select files button by overriding the component’s CSS. You’ll switch the .k-dropzone container to a horizontal flex layout and adjust the .k-dropzone-hint order and spacing so the hint renders inline with the button while preserving drag-and-drop behavior.

---------------------------------------------------------------------------------------------------------------------------------------------------------

09 Feb to 16 Feb 2026: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-vue-ui/components/grid/rows/row-span
Summary: This guide shows you how to implement row spanning in the Kendo UI for Vue Grid to merge cells vertically within a column. You configure the GridColumn row-span callback to compute how many rows each cell should span and suppress duplicate cells (for example, merging consecutive equal values), with a clear example you can adapt to your data and sorting/filtering logic.

Article: https://www.telerik.com/kendo-vue-ui/components/grid/columns/spanned
Summary: Learn how to add column spanning to the Kendo UI for Vue Grid by using the GridColumn colSpan function to conditionally merge a cell across multiple adjacent columns based on the row data. The article shows the required column setup, how the Grid hides the spanned-over cells (including in group and footer rows), and the rules and limitations for spanning (only across adjacent sibling columns and within the same grid section).

Article: https://www.telerik.com/kendo-vue-ui/components/grid/paging/basic-paging
Summary: This article shows how to enable and control basic paging in the Kendo UI for Vue Grid: set the pageable option, bind skip/take and total, and handle the pageChange event. It demonstrates client-side pagination by slicing data or using @progress/kendo-data-query process, and outlines server-side paging by updating skip/take and fetching only the current page.

Article: https://www.telerik.com/kendo-vue-ui/components/grid/paging/custom-paging
Summary: This article shows you how to implement custom paging in the Kendo UI for Vue Grid by managing the pagination state (skip, take, total) yourself and syncing it with your own pager UI and data loading logic. You will disable the built-in pager, handle Grid state changes, and update Grid props to support client-side or server-side paging, including issuing API requests based on the current page.

Article: https://www.telerik.com/kendo-vue-ui/components/grid/sorting/multi-sorting
Summary: Learn how to enable and control multi-column sorting in the Kendo UI for Vue Grid by setting :sortable="{ mode: 'multiple', allowUnsort: true }", maintaining an array of SortDescriptor objects in the sort prop, and handling the sortchange event to update state. The article covers Shift-click interactions for adding/removing sort columns, initializing sort state, and applying descriptors with @progress/kendo-data-query (orderBy) or sending them to your API for server-side sorting.

Article: https://www.telerik.com/kendo-vue-ui/components/grid/sorting/single-sorting
Summary: Learn how to implement single-column sorting in the Kendo UI for Vue Grid: enable sorting with :sortable="true" (or :sortable="{ mode: 'single' }"), bind the :sort array of SortDescriptor objects, and update it in the @sortchange handler. If you manage data locally, apply orderBy(data, sort) from @progress/kendo-data-query and optionally control behavior such as allowUnsort or set an initial sort (e.g., [{ field: 'ProductName', dir: 'asc' }]).

Article: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/basic-filtering
Summary: You’ll enable basic filtering in the Kendo UI for Vue Grid by setting filterable, binding the filter state via the filter prop, and handling the filterchange event. The article shows how to apply filter descriptors to your data with @progress/kendo-data-query’s process for client-side filtering and how to configure per-column operators, types, and default filters.

Article: https://www.telerik.com/kendo-vue-ui/components/grid/filtering/global-filtering
Summary: Implement a global search box for the Kendo UI for Vue Grid that filters across multiple columns. You will build a CompositeFilterDescriptor with an "or" group for the target fields and combine it with existing column filters using "and", then bind it to the Grid via the filter prop and update it in the filterchange event (or v-model:filter).

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/editor-readonly-mode
Summary: Learn how to configure the Kendo UI for Vue Editor in read-only mode so users can view rich text without making changes. You’ll disable editing in the content area and optionally hide or disable the toolbar, with a pattern you can toggle at runtime based on component state.

Article: https://www.telerik.com/kendo-vue-ui/components/grid/interactivity/loading-indicator
Summary: This article shows how to display and control the Kendo UI for Vue Grid loading indicator by binding the Grid’s loading prop to component state. You wire this flag to async operations such as remote data fetching triggered by paging, sorting, and filtering—set loading before the request and clear it when the data promise resolves.

---------------------------------------------------------------------------------------------------------------------------------------------------------

02 Feb to 09 Feb 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/vue-basics-comprehensive-guide-vue-3-directives
Summary: Learn how to use Vue 3 directives for bindings, events, conditional and list rendering, and forms: v-bind, v-on (with modifiers and dynamic arguments), v-if/v-else and v-show, v-for with keys, v-model (including on components), and class/style bindings. The article explains directive modifiers and dynamic arguments, v-html caveats, and how to create and register custom directives in Vue 3 using the updated hook API (beforeMount, mounted, updated, beforeUnmount, unmounted), with notes on differences from Vue 2 and common pitfalls.

---------------------------------------------------------------------------------------------------------------------------------------------------------

29 Jan to 05 Feb 2026: highlights of the new online resources that we published last week.

Blog: https://www.telerik.com/blogs/vue-basics-comprehensive-guide-vue-3-directives
Summary: Get a practical walkthrough of Vue 3 directives: syntax, shorthands (:, @, #), dynamic arguments, and modifiers, with correct usage of v-bind, v-on, v-if/v-else/v-show, v-for with keys, v-model (component v-model via modelValue/update:modelValue, multiple v-models and modifiers), v-slot, v-text/v-html, v-pre, v-once, and v-cloak. It also shows how to write and register custom directives with lifecycle hooks and highlights Vue 3 changes and pitfalls (e.g., .native removal, v-model changes, when to prefer v-show vs v-if, XSS with v-html) so you can pick the right directive and avoid bugs.

---------------------------------------------------------------------------------------------------------------------------------------------------------

15 Dec to 22 Dec 2025: highlights of the new online resources that we published last week.

Article: https://www.telerik.com/kendo-vue-ui/components/requirements
Summary: This page lists the prerequisites for using Kendo UI for Vue: supported Vue versions (Vue 3, with some packages also supporting Vue 2), dependency differences (native packages require only Vue and a Kendo theme stylesheet; wrapper components depend on Kendo UI for jQuery), and platform support. It also summarizes the required environment—modern evergreen browsers and a Node.js build setup such as Vite, Vue CLI, or webpack (with optional TypeScript)—so you can select the right packages and configure your project correctly.

Article: https://www.telerik.com/kendo-vue-ui/components/sample-applications
Summary: Use this page to access Kendo UI for Vue sample applications that demonstrate how to integrate grids, charts, forms, and other components in a real Vue app. Each sample links to a GitHub repo with steps to clone, install dependencies, configure themes, and run locally, so you can study practical patterns for data binding, routing, and state management.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/scrollview-lightbox
Summary: This article shows you how to implement an image lightbox with the Kendo UI for Vue ScrollView: render a thumbnail gallery, open a full-screen overlay (Dialog/Window or custom overlay) on click, and initialize the ScrollView at the clicked index. It provides Vue code that manages open state and currentIndex, configures ScrollView props (dataItems, initialIndex, pageable, arrows) and the pageChange event, handles Esc/overlay click to close, and prevents background scrolling.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/editor-reset-history
Summary: This article shows how to reset the Kendo UI for Vue Editor undo/redo history after programmatic content changes so users can’t undo back into a previous document. You’ll remount the Editor (for example, by updating a bound key or toggling v-if) to recreate its ProseMirror state and clear both undo and redo stacks.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/checkbox-group-implementation
Summary: This article shows how to implement a checkbox group in Kendo UI for Vue by rendering multiple CheckBox components from an options list and managing selection as an array of values. You control state with the component’s checked prop and change event, toggle items, handle disabled options and basic layout, and add fieldset/legend or aria attributes for accessibility; examples are provided for Vue 2 and Vue 3 with notes on form integration.

Article: https://www.telerik.com/kendo-vue-ui/components/knowledge-base/multiselect-select-all-checkboxes
Summary: This article shows how to add a Select All checkbox to the Kendo UI for Vue MultiSelect with checkboxes and keep it in sync with the current selection. You render a header checkbox via the header slot, compute its checked/indeterminate state from the value and filtered data, and on toggle update the value by selecting or clearing all matching items using dataItemKey. It also covers handling change and filterChange events, working with filtering/virtualization, and choosing whether Select All applies to the filtered subset or the full data.

---------------------------------------------------------------------------------------------------------------------------------------------------------

10 Nov to 17 Nov 2025: highlights of the new online resources that we published last week.

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

Hi,

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

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.

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.

Thank you.

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?

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

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:

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

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

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

Uncaught Error: Invalid template:'

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.

 <input id="numeric" value="123" />

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

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.