What’s New in Kendo UI with R2 2020

The R2 2020 release of Kendo UI is here! This release comes with several updates across jQuery, Angular, React, and Vue libraries!

Since we are covering all products found within Kendo UI this post will run a bit on the long side. I’ll trim down things for each section with a follow-up link to a more in depth article for each JavaScript library. Let’s go ahead and jump straight in!

jQuery

New Components

New Component: Form

With R2 2020 we have added the new Kendo UI jQuery Form component. This UI component is designed to help jQuery developers build out feature-rich and beautiful forms in a more intuitive way, including structuring a data model to be tied to the form. Of course, how to handle validation both from a user experience and from the model itself is built-in!

New Component: Stepper

The new Kendo UI for jQuery Stepper component is built specifically to provide a user experience around any process in a web application that may require multiple steps. The Stepper includes unique visualizations for past, current, and future steps. It also has invalid and valid states for each step in the Stepper. Of course, developers have full control over each step with the provided template functionality.

New Component: TextBox

Previously available as CSS primitives that could be added to a plain HTML input element, we realized that we could offer more functionality by introducing an actual jQuery UI component. This is why we are introducing the new Kendo UI for jQuery TextBox component!

New Component: TileLayout

For scenarios that require interactive dashboards where users can drag and drop content around the page, the new Kendo UI TileLayout component is a perfect component. The TileLayout consists of several building blocks, called Tiles, which can be set up in a very similar way to how a CSS Grid or Bootstrap layout works by defining columns and rows, along with how many units of each a particular Tile may take up. End-users can then drag-and-drop the Tiles around to rearrange the layout to personalize their settings.

New Features in Existing Components

Scheduler - Virtualization

With R2 2020 the Kendo UI for jQuery Scheduler now comes with built-in virtualization when scrolling vertically. This helps improve scenarios where a large number of events are found within the Scheduler.

Scheduler - iCal Support

With R2 2020 we have introduced the ability for the Kendo UI for jQuery Scheduler to import and export events using the iCal format. This can be done both programmatically and by the end-user, ensuring that the iCal format can be used at any point during

Scheduler and Search & Filter Options

The Kendo UI for jQuery Scheduler now has a built-in search box that will appear at the top of the component, letting your users filter down events based on whatever string they add in to the text box. How this filters down (if you want to do starts with or contains) can be defined within the configuration options of the component to ensure the most intuitive user experience.

DataSource - Server-side Remote Grouping Support

All of the data bound components within Kendo UI for jQuery relies on using the DataSource for binding data. So, any time we add a new feature to this framework item it is exciting to share the news! With R2 2020 we have added the ability to do remote grouping on the server-side when binding through the DataSource. This will help you organize data on the server-side, versus an expensive operation on the client, limiting the amount of data needed on the client at once and can allow for load-on-demand groups within components like the Kendo UI for jQuery Grid.

Validator - New Validation Summary & Inline Validation Rendering Support

Continuing the forms story, the Kendo UI for jQuery Validator component has added support for a validation summary area, as well as inline validation rendering. This can be taken advantage of either through the standalone Validator component, or as a feature of the new Kendo UI for jQuery Form component.

Inputs - Floating Label Support

Floating labels can be found everywhere, not just in Material Design-specific designs, and with R2 2020 we have added support for floating labels in the Kendo UI for jQuery TextBox, NumericTextBox, and MaskedTextBox input components.

Calendar, DatePicker, DateTimePicker, & TimePicker - New Rendering Options

Ensuring that we can keep up with the latest trends within user experience, with R2 2020 we have introduced a new and updated rendering option for the Kendo UI for jQuery Calendar, DatePicker, DateTimePicker, and TimePicker components. The components will still have their traditional look and feel by default, but the new rendering options can be enabled through a configuration option.

For More Information

To see more in-depth information, along with images and gifs, of everything I mentioned above, head on over to the What’s New in Kendo UI for jQuery with R2 2020 blog post!

Angular

Form Guidelines

Every application needs a form, and building forms is hard! On the surface it may just seem like adding a couple of input elements and you’re off to the races, but there’s really so much more to it. This is why we put together the Kendo UI for Angular Form Guidelines - a complete guide for building forms within Angular using either HTML elements or Kendo UI for Angular components.

New Components

New Component: Stepper

The new Kendo UI for Angular Stepper component is the perfect component for breaking down any process in to bite-sized steps. Each step of the stepper can be fully controlled in terms of content and the component comes with styles for future, current, and past steps as well as valid or invalid steps for when a portion of your stepper may need validation when navigating through the various steps.

New Component: External Drop Zone

With the new External Drop Zone component, developers can add an area where users can drag and drop a file from their file system and drop it to be handled some way within their Angular application. Traditionally a part of the Upload component, we are now offering this as standalone component based on user feedback.

As an additional bonus, the component is also offered as a directive that does not come with styling, but does add the drag & drop functionality to whatever component it was applied to.

New Component: Pager

Users of the Kendo UI for Angular Grid or TreeList recognize the pager as the built-in way for navigating through pages within these components. Based on feedback from users we realized that there is an appetite for having this as a standalone component. So, with R2 2020 we are introducing the Kendo UI for Angular Pager component, letting all Angular developers provide an intuitive way for end-users to page through data.

New Component: Label

With R2 2020 we also introduced a new Kendo UI for Angular Label component. Previously only available as a directive, the label component provides additional functionality like displaying optional labels.

New Components: FormField, Hint, and Error

Expanding on the available components for forms, based on our research and efforts around the Kendo UI for Angular Form Guidelines, with R2 2020 we introduced the Kendo UI for Angular FormField, Hint, and Error components. These components help with structuring forms and linking an individual form fields to groups of components like the input, labels, and the new hints and error labels.

New Features in Existing Components

TreeList - RTM Release

We are super excited to announce that with R2 2020 the Kendo UI for Angular TreeList is officially released as RTM! This includes a slew of new features added, including:

• Selection
• Virtualization
• Keyboard Navigation
• Accessibility Compliance

Many Kendo UI for Angular developers have already started using the Kendo UI for Angular TreeList in its beta form, but for those of you holding off until v1 you can download the latest package and kick things off.

TreeView - Load More Button

In an effort to increase performance in Kendo UI for Angular components that end up handling a lot of data, we took a look at the Kendo UI for Angular TreeView and added a new feature with R2 2020: the “Load More” button. This breaks down a particular level in a TreeView and rather than load all data at once and provides a mini paging mechanism for loading chunks of data in a single node.

Grid - Persist Expand and Collapse State of Detail Rows

A new addition to the Kendo UI for Angular Grid with R2 2020 is the ability to persist the expand/collapse state of the detail rows within the data grid. This will assist with ensuring that items are properly expanded or collapsed as users work with data operations (paging, sorting, filtering, and grouping).

Upload - Updated Styling

The Kendo UI for Angular Upload now has an updated look and feel! Specifically this comes in the form of an updated design for uploaded files, including new icons depending on the file types that were uploaded.

Conversational UI - Support for DialogFlow v2 API

DialogFlow is one of the more popular chatbot backends for chatbots. Fairly recently they updated their API to v2, which has some updates that needed to be addressed. So, with R2 2020 we spent time on updating our example with the Kendo UI for Angular Conversational UI component to ensure that the examples properly highlight the integration with DialogFlow and show the updated v2 API.

For More Information

If you’re interested in more information, along with images and gifs, of all the features I just mentioned jump over to the What’s New in Kendo UI for Angular with R2 2020 blog post!

React

Form Guidelines

Forms are hard to build, and every React application needs some sort of form. We see a lot of our users build forms and sometimes struggle with the proper way to build them. This is why we spent time to research the best practices around building forms put all of our findings in to the KendoReact Form Guidelines - available now as of R2 2020. The Form Guidelines can help anyone building forms, even if they are not using KendoReact UI components, so we hope you find this new resource useful!

New Components

New Component: ListView

With R2 2020 we are introducing the new KendoReact ListView, which is an ideal component for creating a scrollable list of items. Each item is completely customizable and you can take advantage of several different layouts (plain list, a card layout, etc.) to ensure the best fit within your application requirements.

New Component: Progress Bar & Chunk Progress Bar

The KendoReact Progress Bar and KendoReact Chunk Progress Bar are two different ways to highlight some sort of progress happening within your React application. The Progress Bar provides a solid bar from start to finish, while the Chunk Progress Bar is split in to blocks that get filled out as the value increases.

New Component: Stepper

With R2 2020 we are also introducing the KendoReact Stepper component which provides an intuitive interface for showing progress throughout a series of steps. Each step can be completely customized (the content is up to you) and the Stepper component comes with built-in styles for future, current, and past steps along with valid and invalid steps.

New Components: Label, Floating Label, Hint, and Error

As a part of R2 2020 we have introduced several new KendoReact Label components. These include:

• Label - as the name gives away, this is a component to specifically define labels throughout your React applications
• Floating Labels - Floating Labels are pretty much everywhere (even if it initially started with Material Design), and with R2 2020 KendoReact has introduced a Floating Label component that can be used with any KendoReact input components.
• Hint & Error - These components assist with providing appropriate styling and imagery to a label whenever a hint or an error should be displayed.

New Components: Radio Button and Radio Group

Continuing the trend of creating UI components for KendoReact that help provide a consistent styling across all aspects of your React applications, with R2 2020 we are introducing the Radio Buttons and Radio Group components to assist with providing radio buttons or groups that are styled like all other KendoReact components.

New Component: Range Slider

The new KendoReact Range Slider component builds on top of the existing KendoReact Slider but rather than providing a single value let’s end-users provide a range of values by dragging around handles to define a minimum and maximum value.

New Component: Forms - FormElement & FieldWrapper

Building off or our efforts to provide a Form component within KendoReact, we have added additional components with R2 2020 with the KendoReact FormElement and FieldWrapper components. At a high level these specifically help with structuring Forms and tying form elements and their associated components (labels, hints and error messages, etc.).

New Features in Existing Components

TreeList - Row Virtualization

With R2 2020 we are officially introducing row virtualization with the KendoReact TreeList! While we already have column virtualization, row virtualization helps with large data sets that may be bound to the KendoReact TreeList. For scenarios that cannot use the pager, virtualization is a good alternative to ensure that buttery-smooth scrolling can be achieved even with thousands or hundreds of thousands of rows.

TreeList - Pager

Along the lines of handling large data sets and improving performance, with R2 2020 the KendoReact TreeList has a built-in pager component to help navigate through pages of data within larger data collections.

TreeList - Drag & Drop

With the new KendoReact TreeList Drag and Drop feature, items within the TreeList can be moved from one level of the hierarchy to the next, bringing any potential children nodes along with them.

TreeList - Aggregates

Aggregates provide a way for users to see a summary of the data found within the KendoReact TreeList. Aggregates like sum or count (just a few of the ones available) are super helpful when it comes to understanding the data currently bound to the KendoReact TreeList.

TreeList - Column Menu

The Column Menu within the KendoReact TreeList shows a popup menu with additional actions that can be taken on a particular column. This can include features like filtering, or showing and hiding columns from the larger column collection.

TreeList - Export to PDF and Excel

With R2 2020 the KendoReact TreeList now sports the ability to export the contents of the component to PDF or Excel! This feature allows users to export the content of the TreeList to either file format with a single button click. The exported content can also be customized to add extra information or change styling (and more).

Grid - Checkbox Filter

With R2 2020 the KendoReact Grid adds a new Checkbox Filter feature, which shows a list of all unique values of a column and lets users select or deselect the values they want to see within the data table.

Scheduler - Header & Footer Custom Rendering

The KendoReact Scheduler is a powerful component with a huge collection of features out of the box. While the default user experience is good enough for most scenarios, we know that the name of the game is to make UI components your own. This is why we continue to add support for custom renderers across every aspect of the component. With R2 2020 the KendoReact Scheduler now has the ability for custom renderers to be passed in for the headers and footers of the Scheduler.

Form - Form-level Validation, FieldArray

Forms are a big part of the R2 2020 release, and this includes adding form-level validation and the new FieldArray feature to the KendoReact Form component. I dive a little deeper in to these components in the KendoReact R2 2020 blog post, so check that out for more information.

Drawer - Custom Rendering

With R2 2020 the KendoReact Drawer component has added custom rendering to all Drawer items. This lets React developers use a custom renderer for the drawer items, giving full control over the look and feel of the KendoReact Drawer.

New Sample Application: Coffee Warehouse App

Beyond additional UI components and features to existing KendoReact components, we also wanted to introduce more sample applications showcasing the KendoReact components working together. With R2 2020 we built the KendoReact Coffee Warehouse sample application that highlights several KendoReact components working together to create a dashboard for a fake Coffee Warehouse.

For More Information

There was a lot to cover for KendoReact, but to see more in-depth coverage of the new component and features within KendoReact head on over to the What’s New in KendoReact with R2 2020 blog post!

Vue

Preparation for Vue 3.0

Vue.js 3.0 recently entered beta, which means we are not too far away from an official release. With this in mind, the Kendo UI Vue team has been working towards ensuring compatibility with the 3.0 release. While we cannot claim official support at this time, we have laid the groundwork for ensuring that we will be ready as soon as Vue 3.0 officially drops!

New Components

New Component: Calendar

Adding to the list of growing native components (built from the ground up) for Vue, with R2 2020 Kendo UI for Vue added the native Calendar component. This component provides an intuitive interface for selecting a single date (or a range of dates) in a month view similar to the calendar that may be on your kitchen wall today.

New Component: DateInput

With R2 2020 Kendo UI for Vue added the native DateInput component. This form element lets users input a date string while adhering to a specific format (that you can define ahead of time).

New Component: DatePicker

Conceptually a combination of the components above, the new Kendo UI for Vue DatePicker component is a form element that uses a popup calendar to select the date instead of having to manually type in a date (although that is certainly still possible to do). Of course, this component has been built from the ground up specifically for Vue.js without any 3rd party dependencies.

New Features in Existing Components

Grid - Footer Cell

With R2 2020 the Kendo UI for Vue Data Grid added a new Footer Cell feature. The footer cell provides a way to show additional information at the bottom (footer) of the Grid, giving developers an opportunity to summarize data or add additional information to the data grid.

Grid - Extensive Bug Resolution Effort

Beyond adding features, with R2 2020 the Kendo UI for Vue team went through an extensive bug resolution effort to ensure that this release of the Kendo UI for Vue Grid is the most stable and robust yet!

For More Information

To see more in-depth information of what is new on the Kendo UI for Vue front, head on over to the What’s New in Kendo UI for Vue with R2 2020 blog post!

Have Some Feedback?

Did we miss your favorite component or feature with this release? Have you had a chance to try out a new component and want to provide some feedback on what we can add? Feel free to comment in the comment section below, or head on over to our public feedback portal and add your ideas there! Many of the items we added with R2 2020 came directly from items brought up in our feedback portal so it’s a great way to ensure that we add a component that you need!

Join Us for a Live Webinar!

Want to see all the components and features mentioned above (and more) live and in action? Join myself and my colleagues on the Kendo UI team during our live webinar on Tuesday, May 19th at 11:00 AM ET! We’ll be covering all of Kendo UI throughout the day with each flavor taking about 30 minutes each. Seats are limited, so head on over to the webinar page to sign up today and reserve your spot!