What’s New in R2 2022 With Kendo UI

With R2 2022, our Kendo UI JavaScript libraries offer toggleable dark mode, improved accessibility, new and enhanced components and more. See what’s new with your favorite jQuery, Angular, React and Vue UI suites.

We will start with a few updates that affect all four of our Kendo UI JavaScript libraries, but you can also jump to the library of your choice:

• Kendo UI for jQuery
• Kendo UI for Angular
• KendoReact
• Kendo UI for Vue

Dark Mode for All Docs & Demos

Dark Mode is an extremely popular preference for folks when interacting with their desktop or mobile devices. This goes beyond just creating a darker theme for a website—Dark Mode is now a toggleable option in many modern operating systems for desktop and mobile devices alike.

As another exciting update across several products, today we can announce that the Telerik and Kendo UI teams have worked hard over the last couple of months to give users the ability to toggle between light and dark modes within our documentation and demos!

When navigating through any of our web-based UI component library resources, you will see a toggle switch in the top-right corner of your screen. Interacting with this element will let you switch between dark mode and light mode.

New Ocean Blue Swatch Aimed at Better Accessibility

With this latest update, the Telerik and Kendo UI teams researched how we could improve accessibility of all our components out-of-the-box by making changes to the look and feel of the components. Specifically, we looked at the Telerik and Kendo UI Default theme to see how we could improve accessibility levels by focusing on aspects like contrast, which are very important in accessibility scenarios.

This research effort led to the new Telerik and Kendo UI Default Ocean Blue swatch. Rather than the traditional orange color of the Default theme, the Ocean Blue swatch offers blue as the primary color. The name might have given it away. 😉

The goal for this swatch is to help users choose accessibility-compliant colors for their application designs. This, along with the accessibility compliance of the UI components, will help developers incorporate accessibility standards in their applications. While the Telerik and Kendo UI components already adhere to a high level of compliance, using this swatch will help improve accessibility compliance even further.

If you’re not familiar with the concept of a “swatch” for the Kendo UI themes, these are predefined and curated color combinations that our design and user experience teams have collaborated on to offer variations in the look and feel of our various themes.

To see the new accessibility swatch in action, visit any of the online demos for the web-based UI component libraries.

jQuery Updates

New Component: ColorGradient

The first new UI component in Kendo UI for jQuery is the new jQuery ColorGradient component. This new component extends the color picking story in Kendo UI for jQuery by introducing a standalone element for selecting a color within a gradient. Before R2 2022, this functionality was only a part of the jQuery ColorPicker component, and with this recent release it is now available as a standalone UI component.

See the jQuery ColorGradient demo.

New Component: CircularProgressBar

Showing the progress of a process can be done in so many ways and the Kendo UI team wants to ensure we have got your back by having flexible options for all your UX requirements. This is why we are introducing the new Kendo UI for jQuery CircularProgressBar with R2 2022. In the case of the jQuery CircularProgressBar, the name does give it away: The component shows the current progress of a process using a circular element.

See jQuery CircularProgressBar demo.

New and Improved Visual Studio Code Productivity Tool for jQuery

Visual Studio Code took the IDE world by storm and has, over the last couple of years, solidly placed itself as the top IDE for all types of developers and especially web developers. Always on the hunt for how we can further increase the productivity of our users, we wanted to focus some effort on building our tooling for Visual Studio Code which can help all our users.

With R2 2022, we are excited to introduce the new Kendo UI Visual Studio Code Productivity Tools for jQuery. In this initial release, we have introduced two important features:

• Code snippets – These snippets can be accessed by typing kj which will prompt IntelliSense to kick in and provide a list of available pre-defined code snippets for Kendo UI for jQuery components. When you select one of the options, VS Code will spit out the code required to implement the Kendo UI component with popular configuration options pre-configured.
• Application Wizard – The Kendo UI for jQuery Application Wizard helps bootstrap your jQuery applications by using an interactive and guided wizard to set up your project and even add pages with Kendo UI for jQuery components ready to go.

This initial release is just the beginning, so you’ll be able to see more updates landing in this VS Code extension with future releases as well.

See the Kendo UI Productivity Tool for jQuery.

jQuery TreeView: loadCompleted Event

Expanding the list of events and features that we offer in popular Kendo UI components, with R2 2022 we have introduced the loadCompleted event to the jQuery TreeView. This event triggers when data in the jQuery TreeView has finished loading.

See jQuery TreeView completely loaded event.

ColorPickers: Organizing the Various Kendo UI ColorPickers

As mentioned with the new ColorGradient component, with R2 2022 we have focused on the color picking story within Kendo UI for jQuery. Through this effort, we have also taken the time to clearly separate the various color-picking components in our docs and demos to make the available options easier to find. This means components like the jQuery ColorPicker, FlatColorPicker and the new ColorGradient components have separate docs and demos to help you decide which component should be used and when.

See Kendo UI for jQuery demos for more information.

jQuery Knowledge Base Articles: Migrate From LESS to Sass

Earlier this year we announced that the Telerik and Kendo UI LESS themes will be deprecated with R1 2023. You can read more details in the blog post I just linked, but the summary is that our recommendation is to migrate any LESS-based designs over to one of our Sass-based themes.

As a part of this whole effort, we are also taking care to migrate all our available resources currently using LESS-based themes to instead use one of our Sass-based themes. For R2 2022, we did a thorough review of our examples provided in the Kendo UI for jQuery knowledgebase repository and updated them all to use Sass themes instead. This was no small feat, as we have hundreds of articles and in-depth examples, and we hope that this will help customers relying on these samples to make the migration to using Sass themes.

See jQuery knowledge base articles.

Kendo UI for jQuery: Large Bug Fixing Effort

Finally, the Kendo UI for jQuery team has been busy tackling bugs and issues that have been reported over the last couple of releases. While we always address bugs with every release, for this release cycle we specifically focused on this effort to make Kendo UI for jQuery as robust as possible.

In fact, between January and May of 2022, the team has tackled and resolved over 150 bugs. We will continue to tackle more bugs in future releases, and this recent effort has helped make R2 2022 the most stable release of Kendo UI for jQuery yet.

See jQuery release history here.

Various Components: Improved Accessibility

Over the last couple of months, the Kendo UI for jQuery team has been hard at work finding additional ways to improve the accessibility of various jQuery UI components. A lot of these improvements are more of a “behind-the-scenes” kind of effort, but the result is that the team has addressed accessibility-related bugs and improved many components when it comes to accessibility.

Updated jQuery VPAT Document

As mentioned above, accessibility is a very important part of all Kendo UI products, and Kendo UI for jQuery is no exception. As a part of this accessibility effort, we also want to ensure companies feel comfortable with the level of accessibility that Kendo UI for jQuery offers. To make this easier, we maintain and update a Voluntary Product Accessibility Template (VPAT) document.

For those not familiar, a VPAT is a document template offered by the Section 508 standards that helps products walk through a self-audit and fill out the template to report on the level of accessibility compliance with Section 508 standards.

While we have had a VPAT document in place for a while, for R2 2022 we have updated the Kendo UI for jQuery VPAT document to the latest VPAT format. As the time of writing this blog post, this VPAT is available on a per-request basis. Feel free to reach out to our support team, or one of our sales reps, to get ahold of the latest version of the Kendo UI for jQuery VPAT.

Kendo UI for jQuery Demos: Updated Feedback UX

The UI components, features and resources that we add to Kendo UI for jQuery are all driven by feedback that we hear from our customers. This is also true for our demos as well since this is often the primary place developers learn how to use our jQuery UI components.

To make the ability to submit feedback as easy as possible, we have updated the user experience for submitting feedback across all Kendo UI for jQuery demos. This new little widget will appear after a certain time on any of our demos.

See the Kendo UI for jQuery demos.

Kendo UI for jQuery NPM Package: Added License Key

This last update for R2 2022 only affects the Kendo UI for jQuery users who use npm to download and reference jQuery UI components. As a part of this release, we have introduced the concept of license keys that will need to be added to your applications when using the npm-based packages.

Just for some context, this follows the approach that we introduced in Kendo UI for Angular, Kendo UI for Vue and KendoReact over previous releases.

The license keys are as unobtrusive as possible and will display a warning message in the developer console of your browser. Adding a license key to your application will remove this message. This license key check will not break builds, which will help ensure that any automatic updates that may be in place will not accidentally break your applications.

An important note to make here is that you will only see this message if you update your npm packages to R2 2022 and beyond—older versions will not be affected.

For more information on how to retrieve and use this license key, you can refer to this documentation article.

As mentioned, this will only affect developers using npm to reference Kendo UI for jQuery. If you are using the CDN, Bower, the Telerik Control Panel or one of the other installers for Kendo UI for jQuery, nothing will change.

See more about the Kendo UI for jQuery and npm-based licensing here.

Angular Updates

All Kendo UI for Angular Packages: Full Migration to the Ivy Package Format

Angular v13 brought the idea of “Ivy Everywhere” (introduced in Angular v12) to the next logical step by removing the View Engine completely from Angular and reducing its reliance on the ngcc.

This update also brought in changes to the way libraries like Kendo UI for Angular are packaged. The new Angular Package Format (APF) brings a lot of improvements and removes the requirement to use ngcc for Angular packages.

While Kendo UI for Angular has been compatible with Angular v13 since Day Zero, we still had some work to do to offer our packages in the new APF format.

With this release, all the Kendo UI for Angular packages follow this new APF format. To take advantage of this new package format, users will just need to upgrade to the latest version of each referenced package.

New Component: Angular PivotGrid (Beta)

One of the bigger components we can announce with this release is the new Kendo UI for Angular PivotGrid! Released today in a beta format, the Angular PivotGrid aims to be the go-to data-bound component for handling pivoted data.

This new component has been built from the ground up for Angular with a distinct focus on a user experience and features related to pivoting data, rather than being a “pivot” feature added to the existing Angular Grid. This not only makes our current feature set great for pivoting scenarios, it also gives the flexibility of adding even more handy pivoting features in the future.

As mentioned, today’s release is our first beta release which contains the following features:

• Data binding to OLAP cubes
• Client-side data binding
• Etc.

Over the next few months, we will continue to add features to this component to work toward an official v1 release with our R3 2022 release in September.

See the Angular PivotGrid component.

New Component: Angular Map (Beta)

Expanding on the available visualization components with the R2 2022 release, I’m excited to announce the availability of the new Kendo UI for Angular Map component. This initial release will be marked as a beta version initially as we will continue to add functionality and address feedback from developers.

The Angular Map component can bind to various online providers like OpenStreetMap. There is also the option to bind to GeoJSON, a JSON format focused specifically on drawing geographical locations.

Additionally, the Kendo UI for Angular Map component has built-in support for layers, letting developers display a mix of a map, markers and custom drawings overlayed to show a unique map interface.

See the Angular Map component.

New Component: Angular ListBox

Another frequently requested UI component that we have managed to add with R2 2022 is the new Kendo UI for Angular ListBox component. For those not familiar with a ListBox, this is a UI component that can display a scrollable list of items. The Angular ListBox provides users with built-in mechanisms to reorder, drag and drop, delete and select items from said list.

The fun part begins when adding multiple Angular ListBoxes side by side, which opens the opportunity for users to move items between the ListBox elements. This can be done through mouse interactions like dragging and dropping, and the Angular ListBox can provide built-in navigation buttons rendered between the ListBoxes to help move single or multiple items between the various ListBoxes. There is no limit to how many Angular ListBox elements you add to a page, so developers can set up multiple areas to move items between.

See the Angular ListBox component.

New Component: Angular GridLayout

The new Kendo UI for Angular GridLayout component lets developers implement the functionality of a CSS grid layout without needing to write any CSS. Instead, developers can use a declarative way to define the columns and rows that make up their application’s layout.

See the Angular GridLayout demo.

New Component: Angular StackLayout

Adding to the list of layout-specific UI components with R2 2022, the new Angular StackLayout component helps developers create a fluid layout for content, allowing content to align horizontally or vertically. The StackLayout component can dynamically change its orientation by changing a single property, and developers can also nest StackLayout components. Traditionally developers would need to write custom CSS to offer this same functionality, which makes the Angular StackLayout component perfect for any developer who prefers to move this logic out of their CSS files.

See the Angular StackLayout demo.

Grid: Loading Template

Kicking off a long list of Grid-specific features introduced with R2 2022, the Kendo UI for Angular Data Grid added a template for the loading component used when data is actively being loaded to the Angular Grid. While a loading indicator is already built in to the Angular Grid, this functionality allows developers to create their own custom loading indicator. Using your own UI element for loading scenarios is as easy as defining a standard ng-template.

See the Angular Grid Loading Template demo.

Grid: No Records Template

Another template that was added with R2 2022 is the new Kendo UI for Angular Grid “No Records” template. This template is used when no data has been bound to the Angular Data Grid. As with all other templates within Kendo UI for Angular, the no records template can be customized by using ng-template.

The no records template feature has been available for a little while now, but it lacked proper documentation and was not easy to discover. This update adds more documentation and resources to make this feature easier to find.

See the Angular Grid No Records Template demo.

Grid: Sort Multiple Columns Using Modifier Key + Click

The Kendo UI for Angular Data Grid has had the ability to sort multiple columns for several years. However, there are many ways that end users of the Angular Grid expect this multi-column sorting to behave. This is why, with R2 2022, the Kendo UI for Angular team has added the ability for multiple columns to be sorted only when holding a modifier key, like CTRL, CMD, ALT, Shift, etc., and then clicking on each column header.

The previous behavior allowed any column to be sorted when clicked (without a key modifier) and to remove sorting a user would need to cycle through ascending and descending sorting. With this new multi-column sorting behavior, clicking on a column header without a modifier key pressed will immediately remove sorting from all other columns and only sort on the newly selected column.

A configuration option can be used to define which key should be the modifier key in question, which gives plenty of flexibility to fit any business requirements around sorting multiple columns.

Additionally, this is an optional configuration option and must explicitly be set to take advantage of this new behavior.

See Angular Grid Multi-Sort Columns demo.

Angular Grid Enhancements: Expand and Collapse All Groups

The Kendo UI for Angular Grid also received a big feature with R2 2022. Specifically, with this release we added the ability to expand and collapse all groups within the data grid. Letting users expand and collapse all groups can be done through a built-in user experience provided by the Angular Grid, or it can be done programmatically using the newly available API.

See Angular Grid Expand and Collapse All Groups.

Grid: Updated Performance Article

On the documentation and resource side of things, with R2 2022 we have also added a documentation article to discuss performance tips and tricks for the Angular Data Table. The Kendo UI for Angular Data Grid certainly is one of the fastest data grids available for Angular developers and, to help developers squeeze as much performance as possible out of the component, we want to have a single area that highlights features and approaches to help boost performance.

Additionally, we have provided a demo of the Angular Grid component loading a large set of data (100,000 rows with 100 columns) which employs some of these tips and tricks. We highly recommend looking into the source code of this sample and running it locally to see how the Kendo UI for Angular Grid handles large sets of data.

See the Angular Data Grid Performance article.

Grid: External Filtering Example

Speaking of documentation, another dedicated article that was created with R2 2022 is a demo showing how to use external UI elements to filter a Kendo UI for Angular Data Grid. Specifically, this example uses the Kendo UI for Angular Filter component to provide an external UX to filter the data in the Angular Data Grid.

For folks looking to create their own custom UX for filtering, the demo will also show how to handle filter expressions manually. So, this demo can be used as the basis for any external filtering requirements.

See the Angular Grid External Filtering example.

Angular Rich Text Editor Enhancements: Table Resizing and Paste Images

The Kendo UI for Angular Editor component also received some updates with the R2 2022 release. Specifically, with this release we added the following two features:

Table Resizing
This new feature allows end users to use built-in drag handlers to resize any table element within the Angular Editor’s content area. The table resizing supports column and row resizing, as well as resizing of the entire table element.

Paste Images
Another big update that landed with the Angular Editor is the ability for images to be pasted into the Editor’s content area. Previously images had to be uploaded separately with content, but with R2 2022 any images that are copied from other places (Word or website content) will be pasted into the Angular Editor’s content area without any extra steps.

Caret Color Corresponds to Font Color
The Angular Editor will now automatically update the color of the caret depending on the color of text. To see this in action, update the color of text to something different than the default and click inside of the text—you’ll see the caret adapt to the color of the text.

See the Angular Editor Tools demo.

Angular Scheduler: Highlight Events in Real Time

Another popular component that received an update with R2 2022 is the Kendo UI for Angular Scheduler. For this release, we added the ability to highlight ongoing events within the Angular Scheduler.

We see the Scheduler component used as a centralized location for organizing events in a calendar interface within Angular applications. Because of this, end users require behavior that they may find in their traditional calendar applications, like providing a special look and feel for ongoing events.

The style associated with highlighting events in real time can be customized through CSS or Sass as the style is built in to the Kendo UI for Angular themes.

See the Angular Scheduler highlight events in real time demo.

Angular Conversational UI: Input Area Customization

The Kendo UI for Angular Conversational UI component also received an update with R2 2022. Specifically, with this release developers can customize what type of input they expose to users to input text into the Angular chat component. By default, this is a single-line message, but this feature allows for multi-line text to be available, and developers can completely customize the input area to create a completely tailored experience.

With R2 2022 and beyond, developers can decide if the Angular Conversational UI component should use an input element (single-line input), a textarea element (multi-line input), or fully customize the input area using an ng-template.

See the Angular Conversational UI input area customization demo.

New and Improved Visual Studio Code Productivity Tools for Angular

Always looking for increasing the productivity of Kendo UI for Angular users, the team recently spent some time researching how we can improve the tooling that is provided to all Kendo UI for Angular users. As a part of this research, we took a hard look at the features we offer for VS Code developers, especially as Visual Studio Code is the most popular IDE when developing with Kendo UI for Angular.

With today’s update we have moved beyond just bootstrapping your project to add a few screens and have cranked things up to 11! If you download the latest version of the Telerik and Kendo UI Visual Studio Code Extension, you can take advantage of these new features:

• Code Snippets – Code Snippets are quick shortcuts for adding the markup required by Kendo UI for Angular components to be added to a page. By using the shorthand ka, developers can get a list of available Kendo UI for Angular components. When selecting an item from the list, the VS Code Productivity Tools will add the markup of the selected component to the page. Additionally, for any child components (like columns in a Grid) the snippets can be used within Kendo UI for Angular components to give the proper markup and sub-components available within each parent component.
• Code Scaffolder – Scaffolders can be seen as a fancy version of templates, but the real power is the productivity gain from developers when using the scaffolders. The goal with these scaffolders is to, with minimal interaction from the developer, quickly add pre-configured Kendo UI for Angular components to a page. This should cut down the amount of time developers spend on implementing the Kendo UI components in specific scenarios. With R2 2022, this aspect of the tools can be considered more as a beta, as the available scaffolding options are a bit limited. However, we still believe this will be useful in its current form, and more scaffolding options will be rolling out throughout the rest of the year.

Throughout the rest of 2022 (and beyond) we will continue to add features and options to this VS Code Extension, including adding additional code snippets and scaffolders for our web UI component libraries.

If you have a had a chance to take these for a spin or get a chance to do so in the future, please let us know how we can help boost your productivity even further by submitting feedback.

See the Kendo UI Productivity Tool for Angular.

React Updates

React 18 Support

To kick off the React-specific updates with R2 2022, we can officially announce that KendoReact is compatible with React 18! While we have had compatibility since Day Zero, the release of React 18 did happen between the R1 and R2 2022 releases so we wanted to highlight this compatibility in this blog post.

Kathryn previously wrote about Everything You Need to Know About the React 18 RC. We highly recommend reading over that blog post to get an understanding of what’s new with React 18.

See the KendoReact demos for more information about UI components compatible with React 18.

New Component: React TaskBoard

With this latest update, the new React TaskBoard component has been added to KendoReact! This new UI component gives developers the ability to define multiple columns which can contain cards, and lets users drag and drop cards between columns. A common use case for such a component is to create a Kanban board, like those found in GitHub issue boards or services like Trello.

With the KendoReact TaskBoard component, developers can offer a similar user experience with just a few lines of code.

See the React TaskBoard component.

New Component: React Map (Beta)

R2 2022 also brings the new React Map component! The name does give it away, but the main purpose of the component is to add a map element to your React applications. This new component will initially be released as a beta as we will continue to add features and address feedback over the next release or two.

The KendoReact Map component can be bound to a few map providers, like OpenStreetMap, and can also be bound to GeoJSON files to help represent maps without the need to bind to an official provider. Additionally, GeoJSON support opens the opportunity for developers to add custom shapes. Additionally, the React Map component has the concept of layers available right out of the box, which means you can add markers and additional information overlayed on top of your base layer.

See the React Map component.

New KendoReact Create React App Template

Create React App (CRA) is the most popular way to start a new React project. However, once a project is bootstrapped with CRA, adding KendoReact is still a manual process involving copying the npm install commands from our documentation.

To make bootstrapping your React projects using KendoReact even easier, we have created a new tool called Create KendoReact App, which is built on top of Create React App. This tool will guide you through setting up a new project using KendoReact and will create an application that can use any of the examples our docs and demos contain without additional configuration.

Create KendoReact App comes with four project templates:

• cra-template-kendo – Creates a project to use KendoReact with vanilla JS and CSS
• cra-template-kendo-sass – Creates a project using KendoReact with vanilla JS and uses Sass
• cra-template-kendo-typescript – Creates a project using KendoReact with TypeScript and CSS
• cra-template-kendo-typescript-sass – Creates a project using KendoReact with TypeScript and Sass

As mentioned, our hope is that the above templates will help new and existing customers alike get up and running with KendoReact whenever a new project is created. Feel free to take this for a spin and let us know what you think!

See the KendoReact Create React App Template.

All Components: Updated Getting Started Pages

Ensuring that picking up any of our React UI components is as easy as possible, the KendoReact team has been focusing on reviewing and updating all the Getting Started articles offered for packages and individual components and packages.

See the React docs and demos for more information.

React Grid Enhancements: Updated Drag and Drop

One of the main focuses around the KendoReact Grid component for R2 2022 is to improve the drag-and-drop functionality that the component offers out of the box. Specifically, we made some behind-the-scenes improvements that allow for a better drag-and-drop experience than in previous releases, including:

• Dragging multiple rows at once
• Auto-scroll on drag, which naturally scrolls the Grid when your dragged rows reach the end of the visible area

All that is needed to take advantage of this updated drag-and-drop functionality is to download the latest version of the KendoReact Grid.

See the React Data Grid drag and drop demo.

React Editor: Table Resizing

The KendoReact rich text editor component has supported tables since the early days of the component, and with this update we expand this support even further by allowing end users to resize the table using built-in drag handles. These appear when a user clicks within the table and gives users the ability to resize the height and/or width of the table element within the React Editor content area.

See the React Editor Table Resizing.

Various Components: 30+ Improvements and 200+ Bugs Resolved

Between R1 2022 and this R2 2022 release, the KendoReact team has been busy adding improvements and fixing bugs in existing React UI components. As a part of this effort, we have been able to add over 30 improvements and features to existing components. Additionally, we have fixed over 200 bugs across the entire React UI component library. This has been a huge effort to ensure that the R2 2022 release is the most stable version of KendoReact to date.

See the KendoReact changelog for more information.

Vue Updates

New Component: Scheduler

Starting off the Vue updates with a bang, with R2 2022 the Kendo UI for Vue team has officially added the native Vue Scheduler component. This version of the Scheduler component is fully functional and contains all the features you have come to expect out of a Scheduler component written by the Kendo UI team. The Vue Scheduler component was written from the ground up to ensure that it is built specifically for Vue, removing the need to use the previous jQuery-wrapper version that was offered.

For those not familiar, the native Vue Scheduler component brings the user experience of Google Calendar or the calendar tab in Outlook to any Vue application. Adding the Scheduler to your Vue apps can be as simple as a single line of code, and the component can be data bound to display, modify and even remove events found within a data store.

See the native Vue Scheduler component.

New Component: Vue Splitter

Another exciting native Vue UI component added with R2 2022 is the Kendo UI for Vue Splitter component. The Vue Splitter lets developers split pages into sections of panes, where each pane can be resized (or even collapsed) based on user interactions. Developers can configure the orientation of these panes and how to properly split up the content area, as well as potentially limiting the level of interactivity that can be offered on a pane-by-pane basis.

See the native Vue Splitter component.

New Component: Vue PanelBar

With R2 2022, we also are introducing the native Kendo UI for Vue PanelBar component. Another name for this style of component is an accordion component. The Vue PanelBar a layout and navigation element which shows a list of items in expandable and collapsible panels. The component can be configured to only allow one item to be expanded at a time, or to allow for all items to be expanded at once. Each of the items in the Vue PanelBar can also have child elements, allowing for a hierarchical list of items to be displayed within a single PanelBar component.

See the native Vue PanelBar demo.

New Component: Vue TreeView

The Kendo UI for Vue TreeView component is perfect for displaying hierarchical information in a tree structure. Often used as a navigation element or to let users explore a data set and select specific nodes they may be interested in, the TreeView is an extremely versatile Vue UI component.

This component has been available as a wrapper around the Kendo UI for jQuery TreeView component, but with R2 2022 the TreeView component is now officially available as a native Vue component.

See the native Vue TreeView component.

New Component: Vue Skeleton

Modern web applications focus not only on the actual performance of the web app to make it as fast as possible, but they also employ user experience tweaks that make the user feel like the application is fast and snappy.

This is where the Kendo UI for Vue Skeleton component comes in. A skeleton element displays a placeholder element that represents text, images or other content that is currently being loaded. Once the data has loaded or a process has finished, the skeleton is replaced by whatever is supposed to be displayed originally. This provides a boost in perceived performance by the end user and avoids scenarios where a large loading animation needs to block the entire UI.

See native Vue Skeleton demo.

New Component: Vue RangeSlider

With the Kendo UI for Vue RangeSlider component, users can easily select the start and end of a particular value range by interacting with two slider handles. Rather than set values using multiple inputs like text boxes or numeric text boxes, the Vue RangeSlider is a great user experience to quickly set this type of range.

See the native Vue RangeSlider component.

New Component: Vue Notification

The Kendo UI for Vue Notification component is a versatile UI element to help display notifications within any Vue app. The Vue Notification provides a set of out-of-the-box styles representing common notification scenarios like errors, warnings, info and more. These styles can be accessed through a single property, which reduces the hassle of having to create these common designs on your own.

See the native Vue Notification component.

New Component: Vue ScrollView

The Kendo UI for Vue ScrollView component, also known as a Carousel component, gives developers a UI element that can cycle through several images while maintaining the same position within a page. The various items can auto-scroll or be manually scrolled by the user. The Vue ScrollView component can also display visual indicators to help track the current position within the scrollable items and can also display navigation elements to help users manually move between items.

See the native Vue ScrollView component.

New Vue Wizard Example

Another popular component that the Kendo UI for Vue team has worked hard on introducing with R2 2022 is the Vue Wizard component. This new Wizard component combines the Vue Stepper component with the Vue Form component to create a guided wizard that helps step through longer and more complex forms.

See the native Vue Wizard documentation.

All Components: Source Code Now Available

Previously only available on a per-request basis, with R2 2022 we are happy to announce that for the folks that need it, the source code for Kendo UI for Vue is now available on demand. In general, we offer source code as a learning tool, as well as a form of reassurance that you and your team can have access to the source code for the UI components you are using to build the UI and UX of your Vue applications. Access to source code does require commercial license holders to provide their account credentials.

See the Obtaining Source Code documentation article.

Vue Grid: OData CRUD Examples

Expanding on the available resources for the Kendo UI for Vue Data Grid, with R2 2022 the Vue team has added resources specifically around data binding the Vue Data Grid to OData. These examples show how to implement all Create, Read, Update and Delete (CRUD) operations using the Vue Grid and OData.

For more information, see the Vue Grid OData CRUD examples here.

Telerik .NET and Kendo UI Webinars

Discover all updates across Telerik UI for Blazor, UI for ASP.NET Core, UI for ASP.NET MVC, UI for ASP.NET AJAX, UI for WPF, UI for WinForms, UI for WinUI, UI for Xamarin and UI for MAUI. Join the Telerik Web, Desktop & Mobile R2 2022 Release Webinar on Tuesday, May 17 at 11:00 a.m.–1:00 p.m. ET.

Save Your Seat

Discover all updates across our JavaScript component libraries—KendoReact and Kendo UI for Angular, Vue and jQuery. Join the Kendo UI R2 2022 Release Webinar on Tuesday, May 18 at 11:00 a.m.–1:00 p.m. ET.

Save Your Seat

And see the major updates across our reporting, testing, mocking and debugging tools in action during the Telerik Reporting, Automated Testing, Mocking and Debugging Tools Webinar on Thursday, May 19, at 11 a.m. ET.

Save Your Seat

Live Twitch Sessions

Join the live demo sessions on Twitch to see the newly released components and features in action and get ideas on how to use them in your projects. Chat with the team and get your questions answered on the spot!

• Thursday, May 12 | 10:00 a.m. – noon ET I Angular & React
• Friday, May 13 | 10:00 a.m. – noon ET I Reporting, Testing, JustMock & Fiddler
• Monday, May 16 I 10:00 a.m. – noon ET I Blazor & .NET MAUI

Interested in all? That’s great! Add all Twitch sessions to your calendar with one click.