What's New R2 2020

jQuery Updates in R2 2020

jQuery 3.5 Support

With R2 2020, Kendo UI for jQuery officially supports the latest version of jQuery! This does not bring a ton of new features or anything radically different, but for folks interested in what the 3.5 release of jQuery contains you can refer to the official jQuery website.

New Component: jQuery Form Component

The new Kendo UI for jQuery Form 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, structuring the UI elements within the form, as well as validation – all baked into one component.

New Component: jQuery Stepper Component

The Kendo UI for jQuery Stepper component is a sleek and intuitive way to provide a user experience around anything requiring multiple steps. Each step has a full template giving the developer full control over what to present at each step. Additionally, the jQuery Stepper provides controls to help navigate between the steps with all styling to highlight the current step and indicate completed and incomplete steps.

New Component: jQuery TileLayout Component

The new Kendo UI for jQuery TileLayout component is perfect for developers looking to provide an interactive dashboard type of layout within their applications. The TileLayout consists of several tiles which can be organized by row and column spans, and once they have been rendered end users can drag and drop the Tiles to reorganize what is displayed. Of course, each tile can be completely customized to let any type of content be displayed within it.

New Component: jQuery TextBox

Continuing to ensure that we can cover all form elements within Kendo UI, with R2 2020 we have introduced the Kendo UI for jQuery TextBox. Previously, this could have been achieved with a plain HTML element and some custom CSS. In order to make it easier to render this type of component anywhere on the page as well as integrate with the new Kendo UI for jQuery Form component, we have now introduced the Kendo UI for jQuery TextBox.

Scheduler Improvements: Virtualization

Looking to improve upon one of our most popular components, we added support for one of the most top-voted features in the Kendo UI for jQuery Scheduler: virtualization. Just like with other components, virtualization helps the Scheduler support large data sets without slowing down, and lets days and months filled with events perform buttery smooth as users scroll through them.

Scheduler Improvements: iCal Import and Export

Another big feature requested for the jQuery Scheduler was integration with the iCal format, which as of R2 2020 comes out-of-the-box with the Kendo UI for jQuery Scheduler! For those not familiar, iCal is a popular data format for scheduling and calendar systems. The ability to import and export within the Kendo UI for jQuery Scheduler allows developers to easily sync events across other calendars across an organization as long as they follow the iCal format.

Scheduler Improvements: Search & Filter options

With R2 2020, the Kendo UI for jQuery Scheduler now features a built-in Search panel for users to type in values and filter down events within the Scheduler. Of course, what field or fields are being filtered and how they get filtered is fully configurable within the API of the Scheduler.

DataSource: Server-side Remote Grouping Support

The DataSource is a core concept within the Kendo UI for jQuery library. It provides a ton of helpful tools when data binding to the components within the library that deal with lots of data, which includes components such as the Grid. As part of our ongoing effort to add big quality of life improvements to these components, the Kendo UI DataSource now supports Server-Side Remote Grouping, which will allow for grouping of data to happen on the server, not just the client, to potentially improve performance of components relying on grouping by offloading some work to the server.

Validator: New Validation Summary and Inline Validation Rendering Support

Building on the requirements needed for the Form component, the Kendo UI for jQuery Validator framework item now supports an updated Validation Summary area as well as Inline Validation rendering. This works with any standalone implementation of the Validator as well as when used with the new Kendo UI for jQuery Form component.

Improvements to All Inputs: Floating Label support

Popularized by Material Design, Floating Labels have certainly transcended their original design language and can now be found everywhere. Across all of Kendo UI, we have had support for Material Design for quite some time thanks to the Material theme, but we were lacking Floating Label support within our inputs. With R2 2020, we have introduced Floating Labels for the TextBox, MaskedTextBox, and NumericTextBox components within Kendo UI!

Calendar, DatePicker, DateTimePicker, and TimePicker Improvements: New Rendering Options

While the Calendar, DatePicker, DateTimePicker, and TimePicker components have existed within Kendo UI for jQuery for quite some time, with R2 2020 we have introduced an alternate rendering for each component exposed by a new configuration option. This updated look and feel comes from feedback from existing jQuery developers, as well as feedback that we have received across all other Kendo UI flavors and helps modernize the overall UX of these components.

Angular Updates in R2 2020

Form Guidelines for Building Forms in Angular

Building forms is more than just adding UI components to a form element. The new Design Guidelines document from Kendo UI for Angular provides best practices for what UI components to use along with overall user experience guidelines and designs to create beautiful forms in every Angular application.

New Component: Angular Stepper Component

With R2 2020, we are introducing the Kendo UI for Angular Stepper Component. This new component provides users with a list of steps that should be followed from start to finish, often breaking down long pages into more bite-size and manageable steps. Each step can be completely customized in terms of content, and the Stepper provides built-in tools for navigating back and forth between the steps.

New Component: Angular External Drop Zone Component

As part of our ongoing efforts to improve the Upload and FileSelect components, the Kendo UI for Angular team introduced a Drop Zone for users to drag a file from their file system and drop it into a web application, automatically uploading the file. The team realized that this can be useful outside of the existing Angular components from Kendo UI and therefore, with R2 2020, we’ve introduced the new External Drop Zone component.

The External Drop Zone is also available as a directive which will allow for other components to take advantage of the drag and drop functionality, but will not take advantage of the built-in styling of the actual component.

New Component: Angular Pager Component

For users working with the Kendo UI for Angular Grid, the Pager is something that appears quite often as it enables users to quickly navigate through data without needing to immediately load all data to the client, gaining a lot of performance benefits. With R2 2020, the Kendo UI for Angular team extracted this component and created a standalone Angular Pager Component to let any Angular developer use a Pager within their own components anywhere within their application.

New Component: Angular Label Component

The new Kendo UI for Angular Label component provides a standalone component to help create Labels and associate them with other UI components found within a page. This was previously built into Kendo UI for Angular components and based on feedback from users, the Kendo UI for Angular team decided to release this as a standalone component to provide additional functionality for any Angular developer building forms and using input elements.

New Components: Angular FormField, Hint, and Error

Because these new Angular components are all building blocks for forms, they are all grouped here, even though they are independent components. All these components focus on enabling Angular developers to build the best forms possible.

The Angular FormField component helps to structure forms and represents a single field, plus a collection of components related to that field (label, input, hints, etc.).

The Angular Hint component enables a display of a hint message (that tiny label beneath an input) for what users should be typing into a form element.

The Angular Error component specifically covers validation error messages underneath any form element.

TreeList Improvements: RTM Release

As a part of R2 2020, the Kendo UI for Angular TreeList is officially released as RTM! Previously available as a beta version, this new release includes several must-have features as well as requests coming from users working with this new component. The new feature highlights include Virtualization, Selection, Keyboard Navigation, and Accessibility.

TreeView Improvements: Load More Button

A common scenario that we see with the Angular TreeView is loading a ton of data in the component all at once, which can be quite a lot of HTML generated on the page. To assist with these scenarios, the new Load More feature within our Angular TreeView is a button that will appear at the bottom of the current list of TreeView nodes and when pressed will render additional nodes, essentially providing a paging mechanism for the TreeView to help improve performance across the board.

Grid Improvements: Persistence for Expand and Collapse State of Detail Rows

With R2 2020, the Kendo UI for Angular Grid now comes with built-in state persistence for the expand and collapse state of detail rows when hierarchy has been implemented within the Grid. This can work both for saving and loading state within the Data Grid, as well as moving between pages within the Kendo UI for Angular Grid.

Upload Improvements: Updated Styling

The Kendo UI for Angular Upload component also got some love this release with an updated design. This update includes updates to the look-and-feel such as file icons corresponding to the type of the selected file, among other tweaks to the overall user experience.

Conversational UI Improvements: Support for the DialogFlow v2 API

DialogFlow, one of the more popular backends for chatbots, recently updated its API to an official v2 edition, which included a lot of changes. With these changes the Kendo UI for Angular team sat down and worked on updating the demos showcasing integration with DialogFlow v2 within the Angular Conversational UI component.

React Updates in R2 2020

Design Guidelines for Building Forms in React

Building forms is more than just adding UI components to a form element. There are tons of things that need to be taken into consideration, such as the proper flow of the form, types of inputs to use and how to properly highlight form validation. The new Form Design Guidelines from KendoReact provide best practices for what UI components to use along with overall user experience guidelines and designs to create beautiful forms in every React application.

New Component: React ListView

Whenever you need a scrollable list in your app, the new KendoReact ListView is there to help. If your list is especially long, you can enable endless scrolling or paging (through the KendoReact Pager) for better user experience. What’s more, this component can be easily integrated with the KendoReact Filter to filter the data in the list.

New Components: React Progress Bar & Chunk Progress Bar

This new addition to the KendoReact library will make it easy for you to indicate loading progress in your app in two popularly used variations. With the Progress Bar, you can choose to show any type of progress within a range of values (0-100 is common) in a horizontal or vertical fashion. It can be bound to a loading event and automatically fill in as time passes or updated manually. The Chunk Progress Bar, while similar to the Progress Bar, is ideal for scenarios when you’re showcasing progress within a predefined number of steps (or “chunks”) to help showcase progress in scenarios such as multi-step forms.

New Component: React Stepper

The new React Stepper component is a modern, sleek way of showing progress through a sequence of steps or workflows. Every step has its own content template, which means you have full control over what to display when your users walk through your predefined workflow one step at a time. The KendoReact Stepper can also be used for navigation and can provide a transient feedback message after a step is completed.

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

This set of labels is ready-to-go whenever you need to add a fixed or floating label to any part of your application. The Hint and Error components add appropriate styling and imagery to the label whenever you need to—you guessed it—give a hint or an error message to the user!

The new Floating Label component will let you save space and create amazing look with smooth transitions. The Floating Label switches from a placeholder mode to a label when the input is focused or has content in it.

New Components: React Radio Button, Radio Group

Everyone has used a Radio Button, or a Radio Group, at some point in their web development career. Radio buttons enable the user to select a single option from a list and are most often used in a group. By introducing this component to KendoReact, developers can now take advantage of the built-in styling of the KendoReact themes to ensure that even elements such as the Radio Button look and feel like they are a part of a cohesive design system across your entire React application.

New Component: React Range Slider

The Range Slider can be used in a number of scenarios where users need to input or update a defined range. Thanks to an intuitive design, where this range starts, ends, or how wide the range is can easily be changed by using two drag handles (one on each end).

New Components: React FormElement, FieldWrapper

Continuing to ensure that developers leveraging KendoReact have everything they need out of the box, the FormElement and FieldWrapper components expand upon the already powerful KendoReact Form component and assist with building forms in React. At a high level, the FormElement represents the HTML Form element when configuring a KendoReact Form and the FieldWrapper is designed to wrap around a single collection of a field editor (input element), label, hint, and error components to assist with structuring and styling each individual field.

TreeList Improvements: Row Virtualization

Thanks to the new row virtualization feature, the React TreeList component can handle data with large sets of rows across its data set. Virtualization works by loading data as needed and recycling UI elements on the page as users scroll across rows. This leaves the impression of the full data set without the performance penalty of loading all that HTML to the page. Previously only available when scrolling horizontally over the columns, with this release rows can also be virtualized (including child rows) as long as all data has been loaded to the client.

TreeList Improvements: Built-In Pager

The KendoReact Data TreeList now enables you to split its content into pages and takes advantage of the KendoReact Pager to provide this interface. Now just as in the React Data Grid, users can easily page through large sets of data in the TreeList.

TreeList Improvements: Drag & Drop

The KendoReact TreeList component now allows you to rearrange its data items in the data tree by using Drag and Drop the TreeList rows. This easily allows end users to drag a node (including any children it may have) and drop it anywhere within the React TreeList hierarchy.

TreeList Improvements: Aggregates

With this improvement, your KendoReact TreeList will now enable you to render aggregated data. Thanks to offering a custom renderer for the aggregate row, you can completely customize and take over what information you want to display in this row as well as any additional styling that you may want to apply.

TreeList Improvements: Column Menu

This new feature of the KendoReact TreeList enables you to show a menu with quick actions for its columns. The React TreeList Column Menu provides flexible options for high-level customization. For example, the regular sorting and filtering features are represented by individual components which enables you to implement complex scenarios and meet the specific requirements of your project.

TreeList Improvements: Export to PDF and Export to Excel Features

With the PDF and Excel export feature of the React TreeList, users can export the content of the TreeList to either Excel or PDF with a single button click. What content is exported (the current list of data displayed or the entire data set) and the settings of the exported format can be completely customized by the React developer to ensure that the exported files fit your exact requirements.

Grid Improvements: Checkbox Filter

With the new Checkbox Filter option in the KendoReact Data Grid, end users can now easily select what available values in a particular column they want to see included or excluded in the underlying data. As a part of this functionality, the KendoReact team has also provided developers an easy way to hook into what values should be displayed in this list.

Scheduler Improvements: Header & Footer Custom Rendering

Continuing to expand the available custom renderers within the React Scheduler, we now offer the ability for developers to completely customize the header and footer elements of the Scheduler. This continues an ongoing effort to ensure that any and all aspects of the React Scheduler can be customized to fit any requirements.

Form Improvements: Form-Level Validation, FieldArray

Based on feedback from KendoReact users working with the React Form component, we have added additional features to this already powerful tool for building forms. With this release, we have introduced Form-level validation to help with validating the entire form when the submit button is pressed and introduced the FieldArray to help with common array and list manipulations within a Form element.

Drawer Improvements: Custom Rendering

The new Custom Rendering feature of the KendoReact Drawer enables React developers to provide their own renderer for every item within the Drawer’s item collection, giving full control over the look and feel of the component.

Vue Updates in R2 2020

Preparation for Vue 3.0

While Vue.js 3.0 is not here yet, that does not mean that the Kendo UI for Vue team is sleeping on this new version of the Vue framework! Over the last couple of months, we have gone through and implemented several changes that will help Kendo UI for Vue be ready to go once the official Vue 3.0 drops.

New Component: Native Vue Calendar Component

The new Kendo UI for Vue Calendar component is built from the ground-up to continue to expand our native set of Vue UI components. For those of you familiar with other Kendo UI flavors, this is the same calendar you know and love without any dependency on 3rd-party libraries.

New Component: Native Vue DateInput Component

The DateInput component is a textbox that specifically focuses on users inputting dates. With R2 2020, Kendo UI for Vue introduces the native DateInput component which is a Vue component built from scratch without any external dependencies.

New Component: Native Vue DatePicker Component

The Kendo UI for Vue DatePicker combines an input element with a calendar within a popup to allow users to quickly pick a date without permanently displaying a calendar on a page, saving a lot of real estate. This component is free of dependencies and is a 100% native Vue UI component.

Native Grid Improvements: Footer Cell

Often Data Grids require having some sort of summary or detail at the bottom of a column to highlight additional information about that field. This is where the new Vue Data Grid Footer Cell feature comes into play as it offers full control over a cell that will be displayed as a part of the last row in the Grid, which presents a perfect opportunity to inject additional information for the user to consume.

Native Grid Improvements: Extensive Bug Resolution Effort

Over the last couple of months, the Kendo UI for Vue team has focused on ensuring that the native Vue Data Grid is as robust as possible. This involved a big focus on tackling issues in the backlog to ensure that the version released with R2 2020 is the most stable version of the Kendo UI for Vue Data Grid yet!