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?

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

Hi.  I have one reactive object that holds the data for all of tabs in a tabstrip.  I have dynamic fields in these tabs.  For example, the selection of an autocomplete field in Tab A updates the data that is in a list box in Tab B.  I'm not seeing the refresh of data when i navigate.  The data is all loaded at once.  How do I force a refresh of the tabs?

I've also tried using state management, but it's still not doing what I would like.

After upgrading vue wrapper components from 2022.2.621 to 2023.2.606 and @progress/kendo-ui from 2022.2.621 to 2023.1.425

and our native component from 3.3.3 to 3.11.0 we are getting an error Uncaught ReferenceError: jQuery is not defined

This literary stops us from working.

Is there any solution that we can try? Thanks!

I have a large project that uses BootstrapVue.  It also uses Vuelidate for validation.  Why should I consider using Kendo UI instead?  What are the major differences or pros/cons of one versus the other?  Would Kendo UI be able to completely replace BootstrapVue + Vuelidate?

Thanks.