What’s New in Kendo UI with R1 2021

It’s always exciting when we can start off the year right with a new Kendo UI release, and the R1 2021 release of Kendo UI is certainly that! We have tons of new components and features that we have managed to add to all of our native UI component suites for jQuery, Angular, React and Vue.

As a quick note before we get started: since we are covering all products found within Kendo UI this post will be more of a summary of each product. At the end of each section I will link to a more detailed blog post which goes a little more in-depth with images and such. 

Interested in a particular flavor of Kendo UI, or want to sign right up for our release webinars? Jump right to your favorite section here:

• jQuery
• Angular
• React
• Vue
• Webinar Signup

jQuery

New Components

New Component: FloatingActionButton

Found in many modern desktop and mobile applications the Kendo UI for jQuery FloatingActionButton component is, at its core, a floating button that executes a single action. Usually showcased as a circular button with a plus sign triggering an item to be added to a list or even composing a new email.

New Component: BottomNavigation

The new Kendo UI for jQuery BottomNavigation component serves as a perfect navigation element for any responsive web application, letting developers define a row of available buttons for users to navigate through.

New Component: ExpansionPanel

The Kendo UI for jQuery ExpansionPanel component is a layout component that provides a header that can expand and collapse underlying content. Of course, both the header and the content can be completely customized to fit your requirements.

New Component: RadioGroup

Building on top of the recently introduced Kendo UI for jQuery RadioButton component, the jQuery RadioGroup component helps organize and control multiple RadioButtons.

New Component: CheckboxGroup

The jQuery CheckBoxGroup component lets developers easily control the behavior of a list of Kendo UI CheckBox components.

New Features in Existing Components

Grid - Control Export On A Column Basis

With R1 2021 developers can now specify if a particular column should be included whenever content is exported to Excel or PDF. This is done on a column-by-column basis with the column settings controlling if the column should be included (the default) or excluded.

Grid - Include Images in Excel Export

A popular request for the Kendo UI for jQuery Grid is to include images when exporting to Excel. So, with R1 2021 we introduced a helpful article covering how images of various types can be exported along with the rest of the content of the Grid.

Grid - Sort & Group via Column Menu

Adding to the already extensive feature set in the Kendo UI for jQuery Grid’s column menu, users can now define if they want to sort or group any column via the column menu.

Grid - Updated Column Menu Design

In order to account for all of the functionality available out of the box with the Kendo UI Grid’s column menu we took some time to revamp the look and feel of this part of the Grid. By default the Grid component will render the same look and feel as always, but a configuration option will allow a switch to the new design.

ListView - Grouping

One of our more popular feature request, with R1 2021 the Kendo UI for jQuery ListView added the ability to group data and provide a user experience to expand and collapse said groups.

TileLayout - Add & Remove Tiles

With R1 2021 the jQuery TileLayout component includes functionality to add or remove tiles after the component has been initially rendered.

Editor: Create a list with Roman Numerals

Expanding on the available tools in the Kendo UI for jQuery Editor, with R1 2021 any ordered list can now be written using roman numerals.

Editor: Table Aligning Tool

The new Table Aligning Tool for the Kendo UI Editor lets users align any table to the left, center, or right within the Editor content.

Various Components - Improved Accessibility

Accessibility is a big part of Kendo UI for jQuery and as a part of our ongoing commitment to follow accessibility standards we did a review of our existing components and implemented improvements. The biggest impact comes from the TileLayout, Drawer, Timeline, and ScrollView components which all added keyboard navigation as a built-in feature.

For More Information

To see more in-depth information, along with images and gifs, head on over to the What’s New in Kendo UI for jQuery with R1 2021 blog post.

Angular

New Components

New Component: DropDownTree

The new Angular DropDownTree component marries the hierarchical data layout of a TreeView with a DropDown. This lets a single input element contain a full TreeView that can be interacted with to select a value.

New Component: MultiColumnComboBox

In a similar vein to the above-mentioned DropDownTree, the new Kendo UI for Angular MultiColumnComboBox provides a DropDownList where the list of items is a table structure, letting each item have multiple columns with information displayed.

New Component: TileLayout

The Kendo UI for Angular TileLayout component is perfect for any dashboard application that needs to display several KPIs that end-users can interact with. This new component gives developers the ability to define a layout with a list of tiles that contain customized content driven by Angular templates. These tiles can be dragged and dropped to be rearranged, letting end-users discover their ideal layout.

New Component: FloatingActionButton

Popularized through web applications like gmail and countless of mobile applications, the new Kendo UI for Angular FloatingActionButton provides a contextual action button that can be display as a floating button on any page.

New Component: ExpansionPanel

With R1 2021 we are also introducing the Angular ExpansionPanel component. This component provides a expandable content area with a header that is always displayed. The content of the header as well as the content can be driven through Angular templates.

New Component: TextArea

The new Kendo UI for Angular TextArea component raises the HTML TextArea element to the level of other Kendo UI for Angular components, providing a lot of additional functionality and the consistent look-and-feel across all UI elements within your Angular applications.

New Features in Existing Components

Angular 11 Support

While Kendo UI for Angular has had day zero support for Angular 11 since it was released on November 11th, 2020 I wanted to make an additional note about this support as it was a part of our development efforts for R1 2021!

Grid & TreeList - Responsive Pager

With R1 2021 the built-in pager that appears when the Kendo UI for Angular Grid or TreeList components set paging to true is now fully responsive. This lets the pager respond to the current viewport as the browser is resized or adhere to the smaller viewport when displayed on mobile devices.

ListView - Built-in Editing

Adding to the Kendo UI for Angular ListView component, with R1 2021 the ListView now has a built-in editing feature to help users edit any data displayed through component.

ListView - Keyboard Navigation & Accessibility Compliance

Continuing with the Kendo UI for Angular ListView we also added Keyboard Navigation and other items related to accessibility, allowing the Angular ListView to be compatible with WCAG 2.0, Section 508, and WAI-ARIA standards.

TreeView - Built-in Filtering

The Kendo UI for Angular TreeView now features built-in UI elements to help filter through available items within the TreeView.

Editor - Support for more HTML Elements

The Kendo UI for Angular Editor received an update to allow additional HTML elements to be displayed within the content, removing some restrictions of what can and cannot be displayed within the Editor.

Editor - Custom Schema Support

Along the lines of elements within the Kendo UI for Angular Editor content area, we now also support custom elements to be added thanks to the support for Custom Schemas.

Calendar and MultiViewCalendar - Classic Rendering

For the folks using Kendo UI for jQuery, or our ASP.NET MVC or ASP.NET Core offerings that have switched to Angular we have introduced the “Classic Rendering” mode of the Kendo UI for Angular Calendar and MultiViewCalendar components, letting users maintain the same look and feel across all of these UI libraries.

TimePicker & DateTimePicker - Millisecond Support

With R1 2021 both the TimePicker and DateTimePicker supports displaying milliseconds within their interfaces.

For More Information

To see more in-depth information, along with images and gifs, head on over to the What’s New in Kendo UI for Angular with R1 2021 blog post.

React

New Components

New Component: TileLayout

Looking for a dashboard component that allows your users to drag and drop KPIs around? Look no further than the new KendoReact TileLayout component. This React UI component lets developers define a collection of tiles which can be dragged and dropped to rearrange their order.

New Component: DropDownTree

The new KendoReact DropDownTree component provides a DropDownList interface with an internal TreeView, letting developers save a ton of real estate since once a value is selected the popup will the TreeView will collapse.

New Component: MultiColumnComboBox

The new KendoReact MultiColumnComboBox is a ComboBox component where the list of items is displayed within a data table, allowing items to have multiple fields displayed at once in a column structure.

New Component: FloatingActionButton

The new KendoReact FloatingActionButton provides a contextual action button that “floats” somewhere within your React applications. Common use cases include a button with a plus sign adding items to a list, or composing a new email.

New Component: BottomNavigation

The KendoReact BottomNavigation component is a great component to serve as the main navigation for any responsive web application or PWA. Like the navigation in many of the mobile applications you use today, the React BottomNavigation component provides a series of tabs that can be interacted with to navigate to a new page.

New Component: ListBox

With the new KendoReact ListBox component developers have a great UI component for displaying a list of items within a defined area that can be scrolled through. You can also add multiple React ListBox components to a page and can add an interface of buttons to help with moving single or multiple items between the items moved between the ListBoxes.

New Component: Icon & SvgIcon

With R1 2021 we also are introducing the KendoReact Icon and SvgIcon components which serve as components to add in icons in a React application. The great news is that this gives developers access to the over 400 icons available from KendoReact.

New Features in Existing Components

React 17 Support

Between R3 2020 and R1 2021 React 17 was released. While it was famously labeled as a release with no features, there were still changes that affected UI component libraries like KendoReact. Thankfully we addressed those changes and have been compatible with React v17 since day one.

Grid , TreeList, Editor, and Gantt - Built-in Keyboard Navigation

While many of these components have already had the ability to navigate through all items via keyboard navigation, what keyboard shortcuts to use and how has been up to the developer to implement. While this gives a lot of control, it’s not as easy as just setting a single property and being off to the races. With R1 2021 we took a look at the KendoReact Grid, TreeList, Editor, and Gantt and added keyboard navigation if it did not previously exist, and updated their keyboard navigation implementation to provide some sane defaults when navigation is enabled.

Grid - Improved Performance in state management for data cells

The KendoReact Grid received some under-the-hood improvements with R1 2021. Specifically, we improved performance around how state management is done on the cell level.

Gantt - Editing

Another feature delivered for the KendoReact Gantt component is built-in editing. Now tasks can be edited both through the TreeList interface and interacting with the rendered tasks. Editing is done through a built-in edit form which appears in a dialog component as a popup.

Avatar - New options and updated design

With R1 2021 we also expanded the React Avatar component to provide additional configuration options as well as updating the look-and-feel to help make this React component as flexible as possible.

Scheduler - Custom Form and Form Editor

A big feature for the React Scheduler fans out there that we added with R1 2021 is the ability to implement a custom form and form editor. This lets developers take full control over what exactly is displayed when the editing interface appears as users add or update events within the Scheduler.

Scheduler - Current Time Marker

The KendoReact Scheduler also received another popular feature with R1 2021: the Current Time Marker. The name kind of gives it away, but this shows a horizontal line across the Scheduler interface to showcase the current time over the displayed events.

For More Information

To see more in-depth information, along with images and gifs, head on over to the What’s New in KendoReact with R1 2021 blog post.

Vue

New Components

New Component: MultiSelect

The new native Vue MultiSelect component lets users pick multiple entries from a list of available items. Each item is displayed either as text or as a token in the MultiSelect input area to show the currently selected items.

New Component: Window

The Kendo UI for Vue Window component serves as a movable window that can host a wide range of content. The Vue Window also provides features like show/hide, maximize, minimize, and more.

New Component: Time Picker

Continuing the trend of adding form elements to Kendo UI for Vue, with R1 2021 we added the Vue TimePicker component. This Vue UI component gives users a dropdown of available time slots that a user can select from.

New Component: DateTimePicker

The Kendo UI for Vue DateTimePicker component combines the new Vue TimePicker and the existing Vue DatePicker in to a single component, letting users select both the date and the time of day within a single interface.

New Component: Slider

The last native UI component added to Kendo UI for Vue is the Slider, giving users an intuitive interface for selecting a value by dragging a handler to end up on a particular value. This is a great UX improvement over having to manually type in values.

New Features in Existing Components

Grid - Improved Keyboard Navigation

The Kendo UI for Vue Grid received improved keyboard navigation with R1 2021. Specifically we added sane defaults for what happens when developers enable keyboard navigation instead of relying on the developer to implement what should happen and when during keyboard interactions.

Grid - Select Columns via the Column Menu

With R1 2021 the Kendo UI for Vue team also added the ability for users to select items to display within a column via a list of checkboxes within the column menu.

For More Information

To see more in-depth information, along with images and gifs, head on over to the What’s New in Kendo UI for Vue with R1 2021 blog post.

Have Some Feedback?

All of the new components and features listed above came from feedback from our customers. If we missed a particular component or feature that you have been waiting for now is the time to make your voice heard! Each of the UI libraries for jQuery, Angular, React, and Vue has its own public feedback portal where you can create new items as well as vote and comment on existing items. To find each portal you can either visit the in-depth articles mentioned above, or head over to the main Telerik Feedback page and find the product you’re interested in.

Join Us for a Live Webinar or on Twitch!

This is quite the jam-packed release and your head may be swimming from all the new details! To help we have set up a live Kendo UI R1 2021 Release Webinar on Thursday, January 28th starting at 11:00 AM ET! Myself and the rest of the Kendo UI team will dive through all of the jQuery, Angular, React, and Vue components and features we introduced with this release. We will also have dedicated time for Q&A so come and ask any question you may have! For more details head on over to our webinar registration page. Seats are limited so don’t forget to snag your spot today!

Looking for even more? You can also catch us on a special full-day Twitch session from 8am - 5pm ET on January 29th.

Save My Webinar Seat