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

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.