Kendo UI for Vue

What's New R2 2023

What's New History

Design System Documentation Site Launch

One of the key release items in R2 2023 is the launch of a dedicated design system documentation site. It offers a wide range of resources, design assets and frontend documentation specifically tailored for the Telerik and Kendo UI libraries.  

With this initial release, we have included related design and frontend documentation for nearly 20 of the most crucial components.  

Our ongoing dedication is to expand this site further, aiming to provide you with all the necessary tools to craft seamless and visually captivating digital experiences and design systems utilizing the power of the Telerik and Kendo UI component libraries

Design System Documentation

Vue DateTimePicker Components: New Events

With the new Open/Closed events in the DatePicker, DateTimePicker, TimePicker and DateRangePicker components, you now have even greater control over user interactions and can create dynamic and user-friendly date and time pickers in your Vue applications. The new events empower you to customize the behavior of the picker to meet your specific needs. Now you can effortlessly implement complex logic, perform API calls, update UI elements or trigger other related events when the picker opens or closes. 

See the Vue DateRangePicker Events demo as an example

New Components: Vue GridLayout and StackLayout

The Kendo UI for Vue is now enriched with two new layout components that simplify the process of organizing and aligning elements within web applications: GridLayout and StackLayout. Whether you need to tackle the precise positioning of components on a grid or the alignment of elements in a stack, the Vue GridLayout and StackLayout  components enable you to easily create visually appealing and responsive layouts.

See the Vue GridLayout demo
See the Vue StackLayout demo

Grid Layout overview

Vue AutoComplete: Popup Selection Event

The Vue AutoComplete now includes a new Popup Selection event, which is triggered when a user selects an item from the dropdown menu. With this event, you have the ability to respond to the user's selection and perform any necessary actions, such as updating other UI elements, making API calls or handling data manipulation. 

See the Vue AutoComplete demo 

Migration from Font to SVG Icons

With the R2 2023 release, the default icon type in the Kendo UI for Vue components and Kendo UI themes is changed from Font to SVG. By eliminating the font icon inline scripts present in the themes, we have managed to reduce the security risk and improve the overall CSP compliance.   

Learn More About the Font to SVG Icon Migration 

New Component: Vue MultiSelectTree

The new Vue MultiSelectTree component helps you to enable users to select one or more items from a hierarchical list of data. The component automatically organizes your data in a tree format and displays it in a dropdown enabling users to easily access and select items. 

See the Vue MultiSelectTree demo  

MultiSelectTree Overview

Visual Studio Code Scaffolders

The Kendo UI Productivity Tools have been enhanced with a scaffolding option for the Kendo UI for Vue components. With the scaffolding feature, you can effortlessly create new pages in your Vue.js applications with the most used data-bound Kendo UI for Vue components, including the Data Grid, Scheduler, Chart and Form components. When adding a new project item, the scaffolder will guide you to input the service and model names and also provide the flexibility to configure various component-specific properties.  

Vue VS Scaffolder

New Component: Vue DropDownTree

The new DropDownTree component enables you to easily visualize hierarchical data in a tree-like structure. 

The key features include: 

  • Filtering  - enable users to easily find the desired items in a large dataset with the built-in filtering functionality. 

  • Custom rendering  - customize the rendering of the drop-down tree elements.  

  • Forms support  - use the components with HTML form elements or with the Kendo UI for Vue Form component.

  • Keyboard navigation  - easily deliver seamless keyboard navigation support, enabling users to interact with the tree using familiar keyboard shortcuts. 

  • Accessibility - built-in accessibility for screen readers and supports WAI-ARIA attributes. 

See the Vue DropDownTree demo 

DropDownTree Overview

Vue DateRangePicker: Events

The Vue DateRangePicker component now supports a variety of events, allowing you to modify the component behavior based on your needs. 

See the Vue DateRangePicker Events demo 


Vue DropDown Components: Grouping

The Vue DropDown components (incl. AutoComplete, ComboBox, MultiSelect and DropDownList) now provide the possibility to group similar data items in logical categories to help users easily navigate through the drop-down list.   

See the Vue AutoComplete Grouping demo as an example  

AutoComplete Grouping

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