The R3 2020 release of the Kendo UI for jQuery components is here! This release brings several new UI components including the Image Editor, Loader, and Wizard components. Additionally big components like the Gantt and Grid received several updates.

The R3 2020 release of Kendo UI has arrived and with it comes a huge list of new components and enhancements to existing components. Let’s jump straight into things and take a look at what’s new with R3 2020!

Building off of the efforts from the previous release with the Stepper and Form components, with R3 2020 we are proud to introduce the Kendo UI jQuery Wizard component!

This new UI component is perfect for long forms that need to be broken down into smaller chunks. The Wizard comes with built-in validation at each step (or all at once), the ability to load content asynchronously, and much more!

Check out the Kendo UI Wizard in all of its glory right here.

A new and unique component that we have added to the Kendo UI library with R3 2020 is the new Image Editor component. This comes directly from our public feedback portal and the main goal of the component is to allow end-users to do some quick image manipulation within any web application. What images to serve, and how, can be driven by a developer implementing the component—same thing goes for saving the edited image. Features include image resizing, cropping, and more!

To see the Image Editor component in action head on over to the Kendo UI Image Editor demo page.

Adding to the already growing list of UI components that help developers build gorgeous dashboards, with R3 2020 we have added the new Kendo UI jQuery AppBar component!

The main idea behind the AppBar component is to serve as a constant header throughout any web application. Beyond the visual of having a header at the top of your application, the AppBar component also has Action Buttons that can be added to it, providing users with additional actions that can be taken. Many modern applications have items like the profile, notifications, and log out as items in this header, but what each item does is completely up to the developer!

To see the Kendo UI AppBar and how you can implement it in your applications today, head on over to this demo section.

So far Kendo UI has had some basic animations for loading content into bigger components like the data grid, but this loading indicator was integrated into our components. With R3 2020 we have created a brand-new standalone component called the Kendo UI Loader, which provides a gorgeous UX for indicating that a process is loading information in the background. With simple configuration options developers can utilize any of the built-in animations or customize them to create their own and unique design!

The above animated gif gives some indication of what is possible, and for a full run-down head on over to the Kendo UI Loader demo page.

Whether you call it a Text Area or a Multi-line Text Box, this new component covers scenarios that need more than a single line of text in a single input element. The additional benefit here is that the Kendo UI TextArea component ensures consistency from a UX perspective for all input elements with built-in support for all of the available Kendo UI themes.

Adding the TextArea component is potentially just a single line of code, but to see all available options and get some ideas for how to use this component in your application head on over to the Kendo UI TextArea demos.

The Kendo UI Gantt component has received a whole slew of updates with R3 2020, the first being the new column template feature. With this enhancement, developers can define a custom template for any column within the Gantt component TreeList-structure.

Check out the Kendo UI Gantt Task Template demo right here for more information.

Continuing the trend of Gantt improvements, the R3 2020 release also features an updated design for planned tasks vs. the actual duration of said task. This has been a highly requested feature for some time, so we are excited to bring this to all developers using the Gantt component in their applications!

While the image above shows what this looks like, head on over to the Gantt Planned vs. Actual demo to see this in action.

Last but not least with R3 2020 the Kendo UI Gantt component is also receiving updates to its column menu! With this latest release the Gantt component can utilize a similar column menu like the one found in the Kendo UI Grid and TreeList to give end-users the ability to tweak the look-and-feel of the Gantt to fit their needs.

To see what the Gantt column menu looks like and what configuration options you need to enable this feature, check out the Kendo UI Gantt Column Menu demo.

The Kendo UI Grid also received some updates with R3 2020! First up is the Foreign Key Binding feature, which lets developers easily bind to separate services for specific columns in the Grid whenever additional data may need to be pulled to fill that field. Traditionally this has been done by flattening data either on the server or doing multiple calls on the client. Now, with built-in Foreign Key Binding the Kendo UI Grid can be configured to add a data source on a column-by-column basis to pull in information found in another end point.

The Kendo UI Grid Foreign Key Binding demo shows an example of this with a CategoryID field being tied to another service that is responsible for Categories. This demo also links to additional documentation resources to showcase what can be done with this new feature!

Another feature added to the Kendo UI Grid with R3 2020 is Sticky Columns. This highly requested feature lets columns be added to the frozen columns list as they are scrolled past. If a user scrolls the reverse direction and passes the column’s original index it will un-freeze and be back in the regular column collection - hence “sticky.”

The stickiness of a column is defined on a column-by-column basis, so head on over to the Kendo UI Grid Sticky Columns demo for a detailed sample showing how to add this to your Grids today!

The Kendo UI TreeList has had row selection for quite some time, but it has lacked the ability to expose built-in check boxes as the method of selection. Well, with R3 2020 the Kendo UI TreeList component has added checkboxes as a way to select rows!

This checkbox selection demo of the Kendo UI TreeList shows how the behavior functions and how to enable check boxes as a form of selection.

We have had drag and drop capabilities within the Kendo UI TreeList for a few releases, but we received feedback that the behavior was not 100% intuitive. So, with R3 2020 the Kendo UI team focused on updating the drag & drop behavior of the TreeList component to ensure that it follows a similar behavior to the Kendo UI TreeView, letting users reorganize and reorder the data items within the Kendo UI TreeList.

To see how this updated behavior works, jump over to the Kendo UI TreeList Drag and Drop demo and try it out for yourselves.

Accessibility is a big part of Kendo UI and we strive to improve our accessibility support with every release. As a part of this we evaluated some aspects of the Kendo UI Scheduler and found that the Recurrence Editor could use some sprucing-up, and we updated the rendering to ensure that the recurrence editor follows WCAG 2.0 and WAI-ARIA standards.

Adding custom HTML to cells of the Kendo UI Spreadsheet component has been a popular request for some time and with R3 2020 I’m excited to say that this feature has officially been added to the Spreadsheet! This gives additional flexibility to the Spreadsheet component and lets developers define templates that can be added to particular cells in any Spreadsheet.

To see just how this can be implemented, check out the Kendo UI Spreadsheet Custom HTML for Cells documentation page for additional information.

A quick quality of life improvement was added to the NumericTextBox with R3 2020. Specifically, when the Kendo UI NumericTextBox gets focused all of the text in the component will be selected. This NumericTextBox component demo will show just how this works.

With R3 2020 the Kendo UI for jQuery Charts also received some updates! This includes the brand new feature for Plotbands Labels, letting developers add labels to any plotbands they may add to a chart, along with the ability to define a Chart Legend Title through a configuration option.

Another big effort for R3 2020 that should be highlighted is the updated documentation pages and demo site! Not only do both of these resources have a new look-and-feel (seriously, it’s all so pretty) there’s also huge performance improvements across the board. This includes initial loading times of the page, improved demo loading times, and much more! Some pages have even seen a 4x increase in overall performance! This was no small feat, but the results should be a better overall experience when interacting with the various resources in our documentation and demos.

Did we miss a component or feature that you were waiting for? All of the items we provided with R3 2020 have been requested from customers in the past so if you want to see something added to Kendo UI head on over to our public jQuery feedback portal! We pay close attention to what customers are requesting so make sure that your voice is heard. You can search for other feedback items and see if someone has submitted a similar request and then vote and comment on it or submit your own feedback if it hasn’t been requested previously!

Like always, we are hosting a webinar to cover everything mentioned above!

On Wednesday, September 30th we are hosting a webinar, and at 11 AM ET we will cover what is new with Kendo UI for jQuery and Kendo UI for Angular at a high level. This one-hour webinar will showcase what we brought up in this blog post in a live presentation and will present attendees with a chance to ask questions around any of the new components or features we added.

To sign up for this webinar head on over to our What’s New in Kendo UI for jQuery and Kendo UI for Angular in R3 2020 Webinar Page and reserve your seat!