Kendo UI for Vue

What's New R3 2022

What's New History

New Vue Component: TreeList

The Vue TreeList component is perfect for data that is homogenous and hierarchical, which means all data items have the same fields and each level aligns its columns with the parent and child elements. You will find the same features you know and enjoy in the Vue Data Grid including sorting, filtering, paging, editing, row and column virtualization and much more.

See the Vue TreeList demo

New Component: Vue FlatColorPicker

The Vue FlatColorPicker component helps your users choose colors from a gradient or palette view. It’s a complete color editor that gives users interactive controls for simply selecting a color or altering its opacity, hue, RBG, and Hex values. This component is an alternative to the Vue ColorPicker. The ColorPicker component displays the color editor in a popup while the FlatColorPicker renders the editor right on the page.

See the Vue FlatColorPicker demo

New Component: Vue ColorPalette

The Vue ColorPalette renders a set of predefined colors from which users can select. You can choose from the built-in color presets or define your own. A simple use case for the Vue ColorPalette component is enabling users to preview the available colors for a product they are buying online. A more complex example is using the ColorPalette within a full-featured color picker tool such as the Vue ColorPicker component.

See the Vue ColorPalette demo

New Component: Vue ColorGradient

The Vue ColorGradient helps users select colors by rendering a gradient map users can click on to select a shade of a particular color. The component also included a hue slider for selecting the base color, opacity slider and inputs for RBG or HEX values.

See the Vue ColorGradient demo

ColorGradient - Overview

New Component: Vue ColorPicker

The Vue ColorPicker component helps your users choose colors from a gradient or palette view. It’s a complete color editor that gives users interactive controls for simply selecting a color or altering its opacity, hue, RBG, and Hex values. This component is an alternative to the Vue FlatColorPicker. The ColorPicker component displays the color editor in a popup while the FlatColorPicker renders the editor right on the page.

See the Vue ColorPicker demo

New Vue Component: Badge

The Kendo UI for Vue Badge component renders a visual indicator common to many apps. It attaches to any element or Vue component and shows the user critical information such as online status or unread messages. A common scenario is the online status displaying your avatar in popular messaging apps.

See the Vue Badge demo

ThemeBuilder and ThemeBuilder Pro

The ThemeBuilder has long been a popular tool for developers using Kendo UI to customize the style of their components without having to write CSS. It has now been rebuilt for better performance and time-saving features such as the ability to save work and reuse it for multiple projects. For those of you who want to take customization to the next level, we are also introducing ThemeBuilder Pro!

Learn more about the new ThemeBuider

New Vue Theme: Microsoft Fluent Design System

With R3 2022, we are excited to announce that the new Fluent theme is officially available for all Telerik and Kendo UI libraries and their web UI components! Just like our other themes, the new Fluent theme follows the guidelines of the official Fluent Design System so that all components are immediately styled with the Fluent Design System just by including the new theme.

To see the theme in action, visit the Data Grid demo and choose the Fluent theme.

New Vue Dashboard Sample App

We have rewritten our popular dashboard sample to include 100% native components. Previous versions included a mix of jQuery and native Vue components. Now that we have a well-rounded set of native Vue components, we have been able to make this improvement.

See the Kendo UI for Vue Dashboard Sample Application

New Vue Data Grid Demo: Live Updating Data

Many developers need to bind the Vue Data Grid to streaming data in order to show updates in real time. While this has many use cases, the most common is stock pricing. This new demo shows how the Data Grid can instantly reflect changes in the data.

See the Vue Data Grid Live Update demo


Vue Data Grid Enhancement: Loading Indicator

The Kendo UI for Vue Data Grid includes a built-in indicator that displays when data operations are in progress. Any time data is loading, the user will see a spinning icon. Custom indicators are supported in cases where you need to implement your own.


Vue Data Grid Enhancement: Filtering, Dynamic Column Display

The Vue Data Grid supports scenarios where developers need to update columns when the underlying data model changes. This can include both showing and hiding columns as well as applying filters.

See the Vue Data Grid Dynamic Column Display demo

Vue Data Grid Enhancement: Add All Option to the Pager

When the pager is implemented, users can choose how many records they’d like to see per page. With this release, users can now opt to see all results rather than being limited to sets such as 10, 20 and 50.

See the Vue Data Grid Pager demo

New Vue Data Grid Demo: Performance

​ When implementing data grids, performance is a top concern. We address it in various ways with native architecture and features such as virtualization and paging. To help you assess performance and see how these features work, we have added a demo that you can use to set item count and toggle various features.

See the Vue Data Grid Performance demo

Vue Data Grid: Updated Filtering Examples

The Vue Data Grid supports many filtering scenarios, from the most basic to the most complex. To ensure you can successfully satisfy requirements, we have added various examples to the documentation. These include using the column menu to filter data and using an external interface for filtering.

See the Vue Data Grid Filtering demos

Grid – Filter Rows

New Vue Grid Demo: Sticky Rows

The Vue Data Grid allows you to specify rows to be pinned to the top or the bottom of the viewport. When that is done, they will “stick” to the top or the bottom and remain visible when the user scrolls the view above or below them. The demo shows how this works and how to enable the feature.

See the Vue Data Grid Sticky Rows demo

Vue Inputs Enhancement: Suffixes and Prefixes

The Kendo UI for Vue Input components now feature the ability to add custom elements before the input element (a prefix) or after the input element (suffix). This new feature, also called “adornments,” lets you customize all Kendo UI for Vue input elements without needing to deeply modify the components through source code, making these input components extremely flexible.

Vue Documentation Enhancement: API Redesign

We have revamped the remainder of the API docs to make them more detailed and user-friendly.

See the Vue Data Grid API documentation

Vue API Enhancement: valuePrimitive Property Added to DropDownList, ComboBox and MultiSelect Components

Due to popular demand, we have updated the API for select components to include the valuePrimitive property. This will allow you to specify the value-binding behavior. When true, the field will be updated with the selected item text field. When false, the field will be updated with the selected item.

See the Vue DropDowns API documentation

Visual Studio Code Snippets

Via a brand-new extension, Kendo UI Productivity tools for Visual Studio Code, you will now see suggestions for creating Vue components. This means you will be able to add components from the Kendo UI for Vue suite with only a few keystrokes.

Learn about Vue Code Snippets

Various Vue Components: Accessibility Improvements and WCAG 2.1 Compliance

The Kendo UI for Vue team reviews and updates compliance for accessibility standards with each release and this is no exception. You will find many updates that focus on WCAG 2.1 compliance.

Read the Vue Accessibility documentation

Telerik ASP.NET Core ColorPalette Component Accessibility

All Vue Components: Vue 2.7.x Compatibility

Kendo UI for Vue is one of the few Vue UI libraries that supports both Vue 3.x and Vue 2.x simultaneously. While Vue 3.x support gets the most attention since it is the newer version of the Vue library, Vue 2.7.x was released on July 1st, 2022. With this update, the Kendo UI for Vue components have updated their compatibility with Vue 2.x to officially support 2.7.x.

Of course, the latest version of Vue 3.x is fully supported by Kendo UI for Vue as well.

Kendo UI for Vue

Product overview Demo Buy Try

New features & Roadmap

Have a feature request?

Post your feedback via: Vue Feedback Portal

Previous Product Releases

Detailed Release Notes List for the Past 19 Years

See History