What's New R3 2020

What's New History

New Component: React Gantt Chart

One of the most anticipated UI components of the R3 2020 release is the new React Gantt Chart. The Gantt is a type of bar chart that illustrates a project schedule. It allows users to plan, organize and track various tasks, see how they are related and how long each task should take to complete. Tasks have a visual bar to indicate their start and end date, how far along a particular task is, whether the task is on-time or late and much more. 

See React Gantt demo

KendoReact Gantt Chart Overview with a sample Gantt chart containing multiple rows of connected tasks

New Component: React AppBar

The AppBar has become a staple for many web applications, targeting both desktop and mobile devices. The React AppBar component serves as the main header of your application, containing navigation elements and the title of the application or current page. It also allows you to add several action buttons and change available action items to ensure the perfect fit in your applications. The KendoReact team designed this component to be as flexible as possible, giving you a plethora of customization options when adding this React UI component to your applications. 

See React AppBar demo

KendoReact AppBar Overview as a sample header with a title, a search textbox, and a few icons as action buttons

New Component: React TextArea

The React TextArea is another addition to the list of KendoReact form components. The new TextArea component is suitable for any scenario that requires multiple lines of text to be entered in a form field. Thanks to the various KendoReact themes, the TextArea (also known as Multi-line TextBox) component fits naturally into any design language and you can adjust its look-and-feel based on custom UX requirements. 

See React TextArea demo

KendoReact TextArea Overview with an empty textarea, a hint to enter text below, and a counter for how many characters are left

New Component: React Rating

The new React Rating UI component allows users to leave a rating in a digestible, visual way. It enables you to easily display rating values that users can choose and change through the component's interface. With its built-in support for partial steps, KendoReact Rating can accommodate round, half or partial rating values, such as a 4.9 star rating. The new Rating component works well by itself or integrated into other React UI components, such as the KendoReact Data Grid. 

See React Rating demo


New Component: React Chip

The new KendoReact Chips and ChipList components let you add stylized containers, often referred to as a "pill", to your React application.

The React Chip component is responsible for a single "pill" and can contain text, an image or avatar (optional) and a built-in icon such as an "X" to indicate that an action can be taken. The Chip can be used by itself or as part of other components to showcase unique values that have been selected by the user

See React Chip demo

KendoReact Chip Overview displaying chips with text, color, and various icons

New Component: React ChipList

The React ChipList component takes the React Chip and provides additional functionality related to a list. This includes the ability to manage a collection of Chips, such as adding and removing items and managing currently selected items from a list of Chips.

See React ChipList demo

KendoReact ChipList Overview with two lists of chips with a single selected item in each list

New Component: React Badge

Popularized by mobile operating systems, badges represent small icons utilized to indicate unread messages or notifications. The Badge component has expanded its usage and become a popular element in web applications as well. With the new KendoReact Badge component, you can easily attach your own Badges to existing UI elements. It comes with built-in support for text and visibility, settings for size, positioning and overlap as well as the ability to just showcase a simple dot. The new React Badge component can be added to any existing user experience with a single line of code and some quick property edits. 

See React Badge demo

KendoReact Badge Overview with samples of the badge being used as status indicators as well as notification badges

New Component: React Loader

While KendoReact has some CSS styling for a loading indicator, the Progress Kendo UI team wanted to take this experience to the next level. With R3 2020, we are introducing the React Loader—a component perfectly suited for letting your users know that a process such as loading of remote data or fetching a view is happening in the background, while being visually pleasing. With several built-in animations and a slew of configuration options to make the KendoReact Loader your own, this component will make your application pop with its sleek UX. 

To see available Loader styles, as well as get ideas for how you can customize the component to make it your own, head on over to the KendoReact Loader component section in our documentation.

See React Loader demo


KendoReact Loader Overview with various infinite spinners animating in different ways

React Data Grid Improvements: Row Pinning

Adding to the growing list of data table features in the KendoReact Grid, the React Data Grid can now pin rows to the header and keep them always visible as users scroll through the rows of the Grid. 

See React Data Grid demo: Row Pinning

KendoReact Grid with Row Pinning

Data Grid Improvements: Customizable Pager

While the KendoReact Data Grid has had a built-in paging mechanism since its first release, with the introduction of the standalone KendoReact Pager component we wanted to move away from something that is purely built in and apply a more extensible model. This means that the KendoReact Grid now uses the KendoReact Pager to serve its paging mechanism. 

This feature will be most useful to those of you who want full customization of the paging mechanism and the ability to override the default setup.

See React Data Grid demo: Paging

KendoReact Grid with a Customized Pager at the bottom

Data Grid Improvements: Pin Columns Through Column Menu

Column pinning, also known as frozen or sticky columns, is a feature that already exists in the KendoReact Grid. With this release, we are enhancing the user experience of the end user, letting them select which columns to pin (either to the left or to the right) through the already available column menu.

See React Data Grid demo: Pinned Columns

KendoReact Grid with Column pinning through column menu

React Editor Improvements: Insert Image Dialog Updates

This feature allows images from the local file system to be uploaded and inserted into the content of the Editor. Previously, uploads were limited to images hosted on the web and required a URL to be added. With this new enhancement, end users can select images from their own devices and upload them into the Editor content.

See React Editor demo: Image Dialog

KendoReact Editor with its updated Insert Image Dialog

Editor Improvements: Font Color & Background Color Tools

Extending the KendoReact Editor features further with R3 2020, you can now enjoy additional tools to control both the font color and the background color, much like with the equivalent tools you find in word processors today.

See React Editor demo: Built-in Tools

KendoReact Editor with its new Font color tool

Editor Improvements: Find and Replace Tool

A quality-of-life update for KendoReact Editor users, the Find and Replace tool lets them search through the content of the Editor exclusively, without the necessity to rely on browser tools to search through the entire page. The tool also allows users to potentially apply a Find and Replace command throughout the entire content. 

See React Editor demo: Find and Replace

KendoReact Editor with its new Find and Replace Tool

New and Improved Documentation and Demos

Over the last couple of months, we have focused heavily on increasing the performance of our documentation pages. We understand that you rely on documentation daily to guide your work and that any page performance enhancements we deliver positively impact your productivity. 

That's why we're excited to share that with R3 2020 we have increased the performance of the KendoReact docs across the board! We have seen the performance of some pages increase fourfold, improving the experience for desktop and mobile device users alike.

New features & Roadmap

Have a feature request?

Post your feedback via: React Feedback Portal