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.