R3 Kendo UI Blog Post Banner

We are now in the middle of September, so you know what that means: the R3 2020 release of Kendo UI is here! This release comes with several updates across all of our jQuery, Angular, React, and Vue UI component libraries.

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, with more detailed blog posts with images and more linked for each product following their section.

Kendo UI for jQuery

New Components

New Component: Wizard

With R3 2020 Kendo UI for jQuery officially introduces the new Wizard component which combines the features and functionality of the Stepper and Form components all in one. This component helps developers break down complex forms into multiple steps while providing a helpful UX to let users navigate between each step.

New Component: Image Editor

The new Kendo UI for jQuery Image Editor component lets end-users edit and manipulate images that they either upload from their machine or developers provide through data binding. Features include resizing, cropping, and more.

New Component: Loader

The Kendo UI for jQuery Loader component is a standalone component designed to show an animation while a process is happening within your application. The jQuery Loader provides several built-in styles and animation types and also has several configuration options that lets developers customize these animations to make them their own.

New Component: AppBar

With the main goal of helping developers position a sleek application header within their applications, the Kendo UI for jQuery AppBar component is a super flexible UI widget that can contain navigation items, action buttons, text, and more.

New Component: TextArea

Extending on the already huge set of form components available within Kendo UI, the new jQuery TextArea component serves scenarios where users need to input long form text that cannot fit in a regular input element.

New Features in Existing Components

Gantt - Column Templates

With the new Column Templates feature the Kendo UI for jQuery Gantt component now allows developers to provide a custom template for any column within the Gantt widget.

Gantt - Planned vs Actual Switch

The Planned vs. Actual Switch of the Kendo UI for jQuery Gantt component lets end-users toggle between showing tasks as they are planned or showing tasks with their actual and current status. This means delayed items have a unique styling while on-time tasks have their own.

Gantt - Column Menu

Similar to the Column Menu within the Kendo UI Grid, the new Column Menu feature of the Kendo UI Gantt component provides additional UX for end-users to show or hide columns, sort by a column, and more—all through a drop down menu associated with each column header.

Grid - Sticky Columns

Sticky Columns within the Kendo UI for jQuery Data Grid let a developer indicate columns which should add themselves to the frozen or locked columns list as users scroll past them. Scrolling past their original index in the reverse order will leave the columns in their initial position.

Grid - Foreign Key Binding

With Foreign Key Binding the Kendo UI for jQuery Grid lets columns do additional data fetching for specific values from different endpoints outside of the original data source definition.

TreeList - Drag & Drop to Reorder

The Kendo UI TreeList has had drag and drop functionality for some time, but with R3 2020 this feature has been updated to allow users to rearrange the data within the TreeList component while providing helpful UX hints.

TreeList - Checkbox Selection

With R3 2020 the Kendo UI TreeList now has built-in checkbox selection, letting users select rows by interacting with a checkbox element on every row.

Spreadsheet - Custom HTML in Cells

The Kendo UI Spreadsheet component has expanded the content that can be inserted in cells by letting custom HTML be entered in a cell.

Scheduler - Updated Accessibility

As a part of our ongoing effort to support the latest accessibility standards, the Kendo UI for jQuery Scheduler has updated its recurrence editor to ensure deeper compliance with WCAG 2.0, Section 508, and WAI-ARIA standards.

NumericTextBox - Select All Text on Focus

As of R3 2020 the NumericTextBox will automatically select all text available in the component upon the NumericTextBox getting focused.

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 R3 2020 blog post! (link coming soon)

Kendo UI for Angular

New Components

New Component: ListView

With R3 2020 Kendo UI for Angular has added the ListView component. This Angular UI component is perfect for large data lists that require a unique template to be used for the data items when they are rendered.

New Component: Loader

The new Kendo UI for Angular Loader component is a standalone component responsible for showing a loading animation. With several built-in styles and configuration options to change the look-and-feel this component can fit into any Angular application with ease.

New Component: AppBar

With the Kendo UI for Angular AppBar developers have a super flexible header element that can contain navigation items, action buttons, header text and more.

New Component: TextBox

The Kendo UI for Angular TextBox component brings the styling of Kendo UI themes to input elements and expands on functionality to include built-in validation icons and styles, as well as the ability to add custom adornments before or after the input element.

New Component: Breadcrumb

For large applications with many pages the Kendo UI for Angular Breadcrumb can provide an easy way for users to navigate to higher levels within the page hierarchy without having to rely on pressing the back button or other messy navigation steps.

New Component: RangeSlider

With the new Kendo UI for Angular RangeSlider components users can drag two separate handles to select a minimum and maximum value range.

New Component: Badge

The Kendo UI for Angular Badge component works both as a standalone component and a component attached to other HTML elements. Often used to indicate notifications or unread messages, the Badge can contain text, icons, or just a color fill and comes with several out-of-the-box shapes.

New Component: Icon & SVGIcon

Take advantage of over 400 icons provided by the Kendo UI themes with the Kendo UI for Angular Icon and SVGIcon components.

New Features in Existing Components

Grid - Cell Selection

The Kendo UI for Angular Grid now comes with the ability for users to select individual cells either by clicking on said cells or dragging a selection area to select a range of cells.

Various Components - Updated Forms

Following the best practices highlighted in the Kendo UI for Angular Forms Guideline, the Kendo UI for Angular team has gone through any UI components with built-in forms and updated them all to follow the form guidelines.

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 R3 2020 blog post! (link coming soon)

KendoReact

New Components

New Component: Gantt

With R3 2020 KendoReact introduces the new React Gantt component! This new UI component sports a ton of functionality out of the box and should fit any application that needs a built-in Gantt chart.

New Component: AppBar

Designed to allow developers to easily position a sleek application header within their applications, the KendoReact AppBar component is a super flexible UI widget that can contain navigation items, action buttons, text, and more.

New Component: TextArea

Also known as a Multi-line TextBox, the KendoReact TextArea component expands the available form elements in KendoReact to cover the common scenario of long-form text boxes.

New Component: Rating

The KendoReact Rating widget lets React developers easily integrate rating functionality to their applications. Whether this is read-only or a way for users to set their own rating, the widget is flexible enough to offer support for both read-only and editable modes and can support various shapes and designs to fit any rating UX.

New Component: Chip & ChipList

The KendoReact Chip component lets developers create Chips, or pills, with text, icons, and even images integrated in them. Popularized in email and messaging platforms, this React UI component represents a single Chip element.

To add to this functionality, the KendoReact ChipList component helps developers manage a list of Chips and assists with features such as selecting individual Chips in a list of Chips.

New Component: Badge

The KendoReact Badge component fits in to scenarios where other UI elements need to provide some sort of user experience to, for example, indicate notifications or unread messages.

New Component: Loader

The KendoReact Loader component serves as a standalone loading indicator. With several built-in styles and additional modification possibilities through configuration options, the React Loader component can fit any design.

New Features in Existing Components

Grid - Row Pinning

The KendoReact Data Grid expands upon the ability to pin items by adding the row pinning functionality with R3 2020.

Grid - Customizable Pager

React developers can now completely take over the UX of the KendoReact Grid’s pager. The underlying paging mechanism is still handled by the Grid, but the overall paging experience is completely driven by whatever the developer has implemented.

Grid - Pin Columns Through Column Menu

Columns within the KendoReact Grid can now be pinned via the column’s column menu.

Editor - Insert Image Dialog Updates

The KendoReact Editor expands on the Insert Image Dialog to allow users to upload images from their local file system.

Editor - Font Color & Background Color Tools

With R3 2020 the KendoReact Editor now features built-in tools to handle both the Font Color and the Background Color of content in the React Editor.

Editor - Find and Replace Tool

The KendoReact Editor now features a built-in tool for Finding and Replacing text throughout the content of the Editor.

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 R3 2020 blog post! (link coming soon)

Kendo UI for Vue

New Components

New Native Component: ComboBox

The Kendo UI for Vue ComboBox is a form component that expands upon the default <select> element. The Vue ComboBox supports data binding, filtering, and the ability to input custom text.

New Native Component: AutoComplete

With the new Kendo UI for Vue AutoComplete component we continue to expand the available native Vue UI components targeting forms. The AutoComplete lets users select values from an available popup. The list of items will filter down as the user types.

New Native Component: MaskedTextBox

The Kendo UI for Vue MaskedTextBox component is ideal for scenarios where information that users type in needs to follow a particular format, e.g. phone numbers or zip codes. With several built-in masks, and the ability for developers to create their own, the Vue MaskedTextBox can adhere to any predefined format.

New Features in Existing Components

All Components - Vue.js 3.0 Support

As we get closer to Vue.js 3.0 the Kendo UI for Vue components, both wrapped and native, now officially support the latest Vue 3.0 release candidate.

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 R3 2020 blog post! (link coming soon)

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!

Want to see all the components and features mentioned above (and more) live and in action? For R3 2020 we are doing something unique and we are excited to have you join us! On Tuesday, September 29th at 11 AM ET we will host a webinar showcasing what’s new in R3 2020 with React and Vue, while on Wednesday, September 30th at 11 AM ET we have a webinar for what’s new in R3 2020 with Angular and jQuery. Additionally, after each of these webinars we will be hosting deep dives of this content on Twitch! There will be a lot of content to cover in each session so if you feel like joining one or two of them, or even all four of the sessions, can head on over to the Kendo UI for Vue and KendoReact webinar page or the Kendo UI for jQuery and Kendo UI for Angular webinar page.

Save my Seat (React and Vue)   Save my Seat (Angular and jQuery)


Carl Bergenhem
About the Author

Carl Bergenhem

Carl Bergenhem is the Product Manager for Kendo UI. Throughout his time at Telerik/Progress he has covered the entire portfolio of products offered, but mainly spent his time in the web development arena covering ASP.NET Ajax, ASP.NET MVC, and JavaScript-based products. He’s passionate about web technologies and tries to stay on top of all JavaScript libraries and frameworks relating to Kendo UI, developing with jQuery, Angular, React, and Vue.js on a regular basis. In his free time Carl enjoys slaying virtual monsters, snowboarding and playing his guitar.

Related Posts

Comments

Comments are disabled in preview mode.