What's New R1 2023

What's New History

Kendo UI Productivity Tools for VS Code: Scaffolders for React

The Kendo UI Productivity Tools for Visual Studio Code is a VS Code Extension intended to help developers using KendoReact to boost their productivity when using our React UI components. With this update the Kendo UI Productivity Tools have added React Scaffolders, providing even quicker ways to generate sets of UI components or entire pages through just a couple of clicks. Current scaffolders include many common configurations of the most-used KendoReact components, including the React Data Grid, and future releases will continue to add more scaffolders and scenarios.

See the Kendo UI Productivity Tools for VS Code

KendoReact VS Code Scaffolder

New Component: React ActionSheet

The React ActionSheet, sometimes called BottomSheet, is a UX device used for smaller screens when you need to alert or prompt users to action. It appears on the bottom of a screen as a modal dialog and presents users with a choice of actions that they must take. Since this element is popular in iOS and Android, it gives you an easy way to add a popular workflow to mobile or responsive applications.

See the React ActionSheet demo

actionsheet overview

New Component: React PDFViewer

The React PDFViewer enables end-users to review PDF files directly in the browser without the need to download the file first, or without using third-party viewers. It includes all the features they are accustomed to in PDF viewers including print and save functionality, built-in accessible and localized toolbar, and various configuration settings. Additionally, you can choose either PDFJS or the Telerik Document Processing Library for rendering.

See the React PDFViewer demo

PDFViewer Overview

React Charts Enhancement: New Subtitle Property

The new Subtitle feature of the React Charts enables developers to set a subtitle for any of the available KendoReact chart types. This adds a uniquely styled element under the main title of the React Chart. A single configuration option enables you to include this element in your chart.

See React Charts Subtitle Property demo

Charts - Subtitle

React TabStrip Enhancement: Scrollable Tabs

When the space your tabs occupy is greater than the width of the container, your layout can become unpleasant. To avoid this, the KendoReact TabStrip will automatically add scroll controls. Your layout will be intact, and your users will be pleased.

See the KendoReact Scrollable Tabs demo

Tabstrip Scrollable

Various Components: Accessibility Improvements

With every release, we maintain and improve KendoReact’s accessibility and A11Y compliance. These improvements are related to WAI-ARIA attributes and keyboard navigation. Improved components include the Data Grid, DateTimePicker, Buttons, DropDownButton, FloatingActionButton, Toolbar, Calendar, TreeView, ListBox, and more!

Also, to raise the level of AY11 compliance even higher we shipped a new color swatch called Ocean Blue A11Y (an enhanced version of the already existing Ocean Blue) which addresses corner cases for color contrast in several UI components. 


React Masked and Numeric Text Box Enhancement: Prefix and Suffix Adornments

When working with the MaskedTextBox and NumericTextBox components, you can now add prefix and suffix adornments. These are custom items, usually an icon or button, inside the field before or after the input area.

See how to add adornments to KendoReact MaskedTextBox and NumericTextBox UI components

React Masked and Numeric Text Box Prefix and Suffix

New React Admin Dashboard Sample

This new sample helps developers get a head start on a very common type of application. The React Admin dashboard provides a few types of pages with embedded components and dummy date. You can copy, paste, and customize as you wish.

See the React Admin Dashboard Sample Application

React Data Grid Enhancement: Improved Virtualization

We have added a new and improved mode of virtual scrolling that ensures a smooth experience. This mode is designed to ensure that the scrollbars never get out of sync with the data view, even during rapid scrolling.

See React Data Grid Virtual Scrolling documentation.

data grid virtualization

React Data Grid Enhancement: Locked Group Headers

Until now, there have been some limitations when combining frozen columns with grouping in the React Data Grid. Those limitations have been removed and it is now easy to keep the first grouping column locked.

See the React Locked Group Headers demo

React DataGrid Locked Group Headers

React Data Grid enhancement: Compact Grid

Small screens are a primary channel for app delivery and developers are challenged with presenting data grid views in ways that device users can understand. To help solve this need, the React Data Grid now has a compact rendering mode. In this mode, cell padding will automatically be decreased regardless of which of the built-in theme is being used (Kendo Default, Material, Fluent, Bootstrap).

See the React Data Grid Sizing demo


React Charts Enhancement: Label Support in Bullet Charts

With R1 2023, you can easily add labels to your React Bullet Charts, giving users more contextual information about the graph they are interacting with.

See the React Bullet Charts Displaying Labels demo

Bullet Charts - Labels

New features & Roadmap

Have a feature request?

Post your feedback via: React Feedback Portal

Previous Product Releases

Detailed Release Notes List for the Past 19 Years

See History