What’s New in Kendo UI with R1 2020

It’s a fantastic way to kick off the new year; R1 2020 is here! This release comes with several updates across all libraries found in the Kendo UI bundle, including the jQuery, Angular, React, and Vue UI libraries!

To keep this post trimmed down a bit we will just cover the big highlights for each library here and link to more in-depth articles covering each flavor in more detail. Let’s jump in! 

jQuery

New Components

New Component: Breadcrumb

The new Kendo UI jQuery Breadcrumb component gives developers a simple and intuitive interface for moving through various levels of hierarchy of navigation. Often a heavy-hitter in documentation pages, a Breadcrumb can used in just about any website to help users navigate in a hierarchy of web pages.

New Component: Badge

Popularized by icons on mobile devices to indicate unread messages or notifications, the badge component has found several usages in the general web world. With the new Kendo UI Badge widget developers can add badges to existing Kendo UI components, their own UI elements, and even display the badge by itself to provide some additional contextual information to something on the page.

New Component: File Manager

One of the most highly-requested components throughout the years, the new Kendo UI File Manager component lets end-users navigate through folders and files, like features found within Windows Explorer, to help manage file storage within their web applications. This can be used in conjunction with components like the Editor to select images or used as a standalone component to help users upload, download, and organizes files or folders.

New Features in Existing Components

Checkbox & Radio Button Updates

While we have styles available for checkboxes and radio buttons for quite some time, our approach has been a bit opinionated and not extremely flexible. This mainly comes from needing to support styling in older browsers and ensure cross-browser compatibility. However, since then many of these older browsers have phased out of use. Therefore, with R1 2020 we decided to re-evaluate how we style these two input elements and have now introduced a more modern approach to styling these components.

Grid - Column Virtualization

The new Column Virtualization feature of the Kendo UI jQuery Grid lets users smoothly scroll through data sets with many columns without seeing a performance impact on rendering a large amount of extra HTML, which was the case previously. Thanks to recycling HTML elements and the cells of the Grid, users can now scroll horizontally throughout the entire column collection without any performance hiccups.

TreeList - Search Panel

The new Search Panel feature in the Kendo UI TreeList provides a quick way for users to filter the content of the TreeList with a single text input in the top toolbar of the TreeList. How this filters, and which fields across the data end up being filters, can be configured with just a quick set of configuration options – ensuring that any search fits the requirements of your users.

Editor - Merge Table Tool

Thanks to the new Merge Table Tool for the Kendo UI Editor, end-users can easily create and update the layout of any table element in the Editor’s content. This allows for interactions like merging two cells next to each other in a row, or even merging them in cells within a column – all through a single toolbar interface.

Editor - Format Painter Tool

The Format Painter is a standard tool within many rich text editors. This feature allows for users to select a section of text to copy formatting (font, size, color, etc.) and apply it to another section within the content. With R1 2020 the Kendo UI jQuery Editor now has built-in support for this feature exposed in its collection of default tool options.

Scheduler - Auto-Sizing of Events

The new auto-sizing of events feature in the Kendo UI Scheduler allows for variable heights to be displayed across various events and days. This means that days with many events, and events containing additional information, end up being sized differently than days with no events displayed.

Filter - Custom Filter Function

The Kendo UI filter component has received a whole slew of new features, including the ability to create custom filter functions. This enables developers to create their own custom filter operation (say, all products with even number of units in stock) outside of what the Filter component has as a default – giving a deep level of customization to this already powerful component.

Filter - Custom Operators Per Field

By default the Kendo UI Filter component offers all filter operators (equal, not equal, contains, etc.) on every field. With the new Custom Operators feature developers can now pre-define an explicit list of available operators. This gives another level of customization to the Filter component as every field can now have a unique set of operators that make sense just for that field.

Filter - Format Expression Preview

With the Format Expression Preview feature, the Kendo UI Filter component now lets users configure a format string to be used on any filter expression generated by the Filter component. This is especially important around strings like dates which can be formatted in a multitude of ways. Now, creating a format for each field is as simple as defining the format configuration option.

Timeline - Shared DataSource Support

The Kendo UI Timeline component is now able to share a DataSource with any other data-bound Kendo UI component without any odd workarounds or additional requests happening. Perfect for scenarios where a Timeline is bound to common data set with a Kendo UI Grid, or any other component that represents the underlying data set.

For More Information

To check out images, GIFs, and more in-depth information about the latest and greatest within the Kendo UI jQuery components check out the What’s New in the jQuery Kendo UI Components for R1 2020 blog post!

Angular

New Components

New Component: TreeList

This is a component that we know a lot of folks have been looking for, and I'm incredibly excited to be able to announce that the Kendo UI for Angular TreeList is here! For those not familiar, the TreeList combines the hierarchical layout of a TreeView with the column and tabular structure of a data grid. This is different than a traditional hierarchy within the Grid as the data is completely homogeneous (all fields are the same) and the columns align between parent and child rows.

While we have marked the TreeList as beta due to this being the initial release, the component still has a ton of features available out of the box. Here's just a short list of the highlights:

• Data binding
• Paging
• Sorting
• Filtering
• Editing
• Column re-ordering and resizing
• Virtualized columns
• Frozen columns
• Column menu
• Export to PDF & Excel
• and more!

So, as you can see we are already covering most of the features that you come to expect out of a TreeList from day one!

New Component: Checkbox

You may have used checkboxes with Kendo UI for Angular before, but up until now it has just been through applying CSS classes. With the R1 2020 release, the Kendo UI team put together an Angular directive that can be applied to native checkbox HTML element. This provides not only the styling associated with your favorite Kendo UI theme (Default, Bootstrap, or Material, etc.), it also ensures that this checkbox just enhances what the Angular framework already provides out of the box.

New Component: Radio Button

Like the checkbox component above, the Kendo UI for Angular team put together a directive to help apply consistent styling across the board with any Angular application written with the Kendo UI for Angular components. As radio buttons and checkboxes are all a standard part of building forms, these two components help ensure that all aspects of a form can be built with Kendo UI for Angular.

New Component: Avatar

Avatars represent many things in applications today; profile pictures in social media, chat heads in messaging platforms – even icons. With the Kendo UI for Angular Avatar component developers can easily add a sleek way to represent people or entities in your application by setting an image, icons, or using initials (e.g. “CB” using my initials). The shape of these items can be set as square, circle, or a general rounded shape via a quick configuration option.

New Component: Card

The Kendo UI for Angular Card widget is an additional layout element to help developers set up beautiful and modern application designs. Popularized with Bootstrap and Material Design, this layout component can be used by itself or as a part of a template for other components to create a compelling user experience.

New Component: Chips

The Kendo UI for Angular Chips component covers a style of elements popularized in Material Design and mobile application design. The component consists of a container (often in a “pill” design), text, optional image, and remove icon. This can be used as a part of a component that provides multiple inputs or a quick way to list out predefined options which can be selected by the end user.

As a part creating the Angular Chips component we also introduced the Chips List, which gives developers an easy way to provide a list of chips (not just a single item) and gives options for how to lay out the chips (horizontal, vertical, and grid listings) and how the chips can be interacted with (single item selection, multiple item selection, etc.) - all in one component!

New Component: File Select

Like the Upload component, the Kendo UI for Angular File Select component gives your end users an intuitive way to select a single, or multiple, file(s) from their local machine. The unique aspect of the File Select component is that it allows a developer to have full control over when, and how, the file gets uploaded.

The FileSelect comes with many configuration options out of the box, but if you need some extra control over behavior and the look and feel the component fully supports templates using the Angular framework templates. Also, like all our UI components that target forms, the FileSelect component integrates with Reactive Forms!

New Component: Floating Label

This may need to be labeled as “newish.” A Floating Label has become almost a standard aspect of input elements in today’s web design. While floating labels have existed within the Kendo UI for Angular components themselves, this standalone component gives developers the power to implement floating labels within their own input elements or enhance other Kendo UI for Angular UI components. You might have seen this referred to as the TextBoxContainer component in our documentation in the past, but we think that calling it the “Floating Label” component seems much better :).

New Features in Existing Components

TreeView - Drag & Drop Nodes

This feature has been one of the most top-requested features within Kendo UI for Angular, and I’m happy to announce that we added drag & drop capabilities within our Angular TreeView! With the new Drag & Drop feature of the TreeView end-users can drag nodes to other areas of the TreeView including items within the same level of hierarchy as well as nodes in different levels of the hierarchy. If the node has any children they will also be dragged along. If you have multiple TreeViews in the same page you can even drag-and-drop nodes between the two different components!

Upload - Support for Chunking

When uploading files a traditional approach is to take the entire file and just start streaming the file from start to end. This is unfortunately a bit fragile as network connections can be interrupted. This is where chunking comes in to play, breaking files down to smaller pieces (chunks) and upload these chunks in a sequence. With this approach uploads can easily be resumed after a network connection is regained and can help with pausing and resuming uploads as well. With R1 2020, Kendo UI for Angular Upload component now supports chunking any selected file.

Grid - Column Virtualization

With Column Virtualization in the Kendo UI for Angular Grid developers can throw as many columns as they need in to the Grid without worrying about performance degradation. Combine this with the pre-existing row virtualization and the Angular Data Grid can support huge data sets with countless rows and columns. This operation is buttery smooth (check out the GIF in the details post), and the Kendo UI for Angular Grid doesn’t break a sweat!

Grid - Performance Improvements

Through the work of implementing column virtualization, the Kendo UI for Angular team went through the source code of the Angular Grid and implemented various performance-improving tweaks to ensure that the R1 2020 release of the Kendo UI for Angular Grid is the fastest yet. This includes initial load of the component and its data, as well as interactions like scrolling.

Editor - Keyboard Navigation

With the new Keyboard Navigation feature, the Kendo UI for Angular Editor can now be easily utilized with just a keyboard. Ideal for scenarios where productivity improvements can be made with just using the keyboard or improving accessibility.

Editor - Accessibility

The Kendo UI for Angular Editor component now comes with built-in support for accessibility out-of-the-box. Without additional configuration options developers can rely on the Editor to be compliant with Section 508, WCAG 2.1 and WAI-ARIA standards.

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 in R1 2020 blog post!

KendoReact

New Components

New Component: Drawer

The new KendoReact Drawer widget provides a standard drawer with expand and collapse functionality for the ultimate navigation experience. The component lets users define icons and text for each navigation item and comes with features like a mini mode to display only the icons for each item to help minimize real estate occupied by the component.

New Component: Form

The KendoReact Form component is a small and fast package for form state management with zero dependencies. Utilized internally by components like the KendoReact Scheduler, this form package is built to be used both with KendoReact components as well as with any generic React form. This means that any KendoReact developer has one less external dependency for building React applications that contain any kind of form.

New Component: Checkbox

So far styling a checkbox has been possible by just applying a CSS class found within the KendoReact themes to an HTML input element. While this has worked OK so far, we realized that there are some drawbacks with this approach, and it missed some deeper integrations with React. This is why we decided to create a new, standalone, checkbox component for React! This will help provide a uniform look-and-feel across all UI elements in a React app written with KendoReact, and of course be used internally in our own components. Beyond being integrated with various design languages, the Checkbox component provides support for checked, unchecked, indeterminate, and disabled states, as well as built-in properties to handle items like accompanying label. Of course, the component is fully accessible and is compliant with WCAG 2.1 and WAI-ARIA standards.

New Component: Card

The KendoReact Card widget is an additional layout element to help developers set up beautiful and modern application designs. Popularized with Bootstrap and Material Design, this layout component can be used by itself or as a part of a template for other components such as the ListView to create a compelling user experience.

New Component: Avatar

Avatars represent many things in applications today; profile pictures in social media, chat heads in messaging platforms – even icons. With the KendoReact Avatar component developers can easily add a sleek way to represent people or entities in your application by setting an image, icons, or using initials (e.g. “CB” using my initials). The shape of these items can be set as square, circle, or a general rounded shape via a quick configuration option.

New Component: Filter

Creating filter expressions can be so much more than a simple starts with and contains tied to a single checkbox. While this may work in some scenarios, often users need to work with multiple filters and combining them in various ways (“unit price above $18 and products in stock”, as an example). This means that filtering can quickly become quite complex. This is where the KendoReact Filter component comes in, providing an intuitive user experience for building filter expressions ranging from simple to very complex filters. These can then be used with other KendoReact components, like the Data Grid, or be used to filter any data collection.

Data Tools Package Updates

Initially introduced with the inclusion of the KendoReact Pager component, the Data Tools package continues to expand by including other helpful libraries and UI components to help manage data collections – including the new React Filter component.

New Features in Existing Components

NumericTextBox - Rework

The NumericTextBox was the first KendoReact component ever written and throughout the years we have seen several requirements and scenarios beyond our initial scope of the component. That’s why we spent time on reworking the NumericTextBox to ensure that it can accommodate all the user experience scenarios that we have discovered for the component.

Scheduler - Custom Rendering

The KendoReact Scheduler provides a default design across events and other elements of the component, which changes depending on which design language is implemented along with the component. With the new Custom Rendering feature our React Scheduler allows for easy control over the look-and-feel of events, giving users the ability to completely customize the rendering of the Scheduler.

Scheduler - Keyboard Navigation

With the new Keyboard Navigation feature, the KendoReact Scheduler has full support for navigating and interacting with its various elements by only using the keyboard as input. This provides a potential for a higher level of productivity and helps in accessibility scenarios where keyboard navigation is the only option for interaction with a web application.

Scheduler - Accessibility

Continuing with a strong commitment to accessibility, the KendoReact Scheduler is now compliant with accessibility standards like WCAG 2.1 and WAI-ARIA. This is provided out-of-the-box with the component, ensuring that any React developer can increase their application’s level of accessibility just by including the latest version of this React Scheduler.

TreeList - Column Virtualization

Thanks to the new column virtualization feature, the TreeList component can handle data with large sets of columns across its data set. Virtualization works by loading data as is needed and recycling UI elements on the page as users scroll across columns. This leaves the impression of the full data set without the performance penalty of loading all that HTML to the page.

TreeList - Frozen Columns

Displaying data in a column structure is crucial for the TreeList, and certain columns may need to be displayed permanently as users scroll horizontally. With the new frozen columns (alternatively: locked columns) feature, the KendoReact TreeList can easily freeze/lock a column on the left or right-hand side of the component upon initial rendering, or as it is scrolled past by the end-user.

TreeList - Resize & Reorder Columns

Expanding on the available column features of the React TreeList, this new release provides the ability for end-users to resize the width of the columns by dragging a resize indicator, or even reorder the sequence in which columns are displayed. This ensures that any view of their data can be customized and tweaked to fit their screen and needs.

TreeList - Multi-Column Headers

Often a column may need more context than simply its field name in the header – especially if columns are related in some way. Thanks to the KendoReact TreeList’s Multi-Column Header feature, developers can add parent headers that span across multiple column headers. These can also be reordered and resized, representing the entire group of child columns that they encompass.

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 2020 blog post.

Vue

New Components

New Component: Input

What is an application without some sort of way for users to input text? This is one of the first components that we tackle in any native UI library, and Vue is no exception. The Input component is of course fully integrated with all the Kendo UI themes, which helps with creating a uniform look-and-feel across your entire application.

New Component: NumericTextBox

Continuing an emphasis on inputs, the NumericTextBox is perfect for any scenario that requires numbers of some kind (simple number, currency, percentage, etc.). As with any Vue component that we create, the NumericTextBox works with all our available themes and is compliant with WCAG 2.1 and WAI-ARIA accessibility standards.

New Component: DropDownList

The DropDownList is a form component that lets users choose a single value from a predefined list of values. Think of it as a select element with enhancements such as data binding, filtering, and more!

New Component: Dialog

The Dialog component is very useful in scenarios where you need to showcase some specific information to users and prompt them to take an action. This is usually portrayed in a modal fashion to reduce distraction. Of course, as a developer you have full control over the content of the title, dialog box, as well as the action buttons (and their events) to ensure that the component can easily integrate to your existing applications.

New Component: Animation

Animations can often be a tricky thing to implement. The Kendo UI team needs animations throughout all components to make sure that they properly “pop” and have the great look-and-feel that comes with all Kendo UI components. Since this is a part of Kendo UI that is used across the entire library, we wanted to take this work and expose it to all Kendo UI users as well, allowing you to create your own animations and not just when working with the Kendo UI components. This package can be used to help animate just about anything in your apps.

New Component: Popup

The Kendo UI Popup component is the basis of a lot of Kendo UI components, including the DropDownList and other DropDown components. Not only does this help with having content appear on the page upon interaction (clicking a button for example) it also needs to be able to be configured to display and align in certain ways, work with boundary detection (if the popup appears outside of the current view port), and even animate. As we needed to build this out to start creating more native Vue UI components we figured it would be great to expose this functionality to our users as well!

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 2020 blog post!

Virtual Classroom Updates

Many of you have taken advantage of the Telerik Virtual Classroom, a repository of several video courses covering Kendo UI and other Telerik products, and based on the feedback that we've seen you're thoroughly enjoying it! As a part of the last couple of months we have spent time to not only add new courses to this resource, like using Kendo UI for jQuery with TypeScript and using Kendo UI for Vue with TypeScript, but we've also revamped existing courses! If you've already checked out courses in the past I recommend giving the portal another look - there's a ton of content out there.

For those if you that haven't heard of the Virtual Classroom, now is your chance to take a peek and find a course to help bring you up to speed on a new framework or new set of UI components!

As a heads-up you will need a Telerik.com account to navigate through the courses, so clicking on any of the links in this paragraph may prompt you with a log in screen.

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 R1 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 Thursday, January 23rd 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!