What’s New in R2 2019 for Kendo UI

The R2 2019 release of Kendo UI is here! This brings with it a huge list of new components and features spread across our native libraries for jQuery, Angular, React, and Vue.

The R2 2019 release of the Kendo UI bundle is here and it is absolutely jam-packed with new components and features. Whether you are looking to develop with jQuery, Angular, React, or Vue - there’s plenty of new things to take a look at that should get you excited!

As usual, this blog post will serve as an overall summary of each individual JavaScript flavor and their updates along with links to more detailed pages that cover the new features to your favorite JS library in depth.

jQuery

New Components

With R2 2019 we are introducing two brand new components to the Kendo UI jQuery UI component list: the PDF Viewer and the Drawer widgets.

PDF Viewer

The PDF Viewer is designed to allow you to host PDF files within your apps without forcing users to first download the PDF to their local machine. The component can work with both PDF.js and the Telerik Document Processing Library to both process the PDF files for viewing and exporting. Additionally we have started off the first release with a bang and added virtualization as a feature, making sure that even the largest PDF files can be displayed in the component.

Drawer

The drawer widget has more or less taken over as the de facto navigation element for web applications, which is why we wanted to introduce this widget fully in to Kendo UI. The drawer can be either overlaid on top of existing content, or can move the content over to the side.

Drawer items are also your standard icon and text combination, but can be completely customized to have their own templates for layouts. The Drawer component also features the ability to display a more compact layout, called “mini” mode, which displays only the icons for every menu item.

New Features in Existing Components

Beyond the new components we have a ton of features being added in to our existing components.

Spreadsheet Improvements

The Spreadsheet widget is a very important widget within the Kendo UI component set, and with R2 2019 it received the most highly-requested features, including:

• Image Support - Images can now be added, as well as dragged between, any cell within the Spreadsheet. Any images added will also be a part of the exported documents.
• Cell Comments - End-users can now add comments to any cell, and of course if you have bound the Spreadsheet to a data end point they can also see other comments added in.
• Events - We have expanded the set of events available in the Spreadsheet to include Changing, DataBinding, DataBound, Paste, Cut, Copy events. This should give you plenty of hooks to customize the Spreadsheet widget to fit your specific requirements.

ListView Endless Scrolling

Letting users scroll through large sets of data without having a pager at the bottom is a highly requested feature throughout all of our data bound components. The ListView is no exception to this and with R2 2019 we have added endless scrolling as a feature to the ListView - tackling the feature request with the most votes in our feedback portal!

Mobile & Adaptive Rendering

We have improved the mobile experience across a few components, including expanding the adaptive behavior of the Grid and the Scheduler.

What is adaptive behavior? Well, it gives us an improved UX for more advanced components where simply making the components fit to screen may not be enough. This means creating a separate screen for column settings, filtering, and sorting with the Grid, or creating separate screens for editing in both the Grid and the Scheduler.

Beyond this we have also improved mobile support for the DateRangePicker, ensuring that this component will work well on both desktop and mobile devices alike.

Menu Data Binding

The Kendo UI Menu has somehow escaped being able to be data bound to populate its elements. Well, no more! With R2 2019 we added the ability to work with the DataSource along with the Menu component, opening up the possibility that a remote data end point can be responsible for populating the menu for us.

jQuery 3.4.0 Support

jQuery 3.4.0 recently released and we were able to ensure that R2 2019 is fully compatible right away. So, for those of you looking to work with the latest and greatest within the jQuery world I’m happy to say that we fully support jQuery 3.4.0 with the latest release of Kendo UI!

More In-Depth Look at R2 2019 for jQuery

For a deeper dive in to what other features we added to jQuery, including some better descriptions of said features along with links to documentation and examples, I recommend heading over to the What’s New in R2 2019 for the jQuery Kendo UI Components blog post.

Angular

New Components

Along with the usual suspects like the Grid and DropDowns, Kendo UI for Angular has some big heavy hitting components, like the Scheduler and Editor. These require a lot of our attention to bring these into prime-time usage, so most of what we’ve done for R2 2019 has focused on those components. Still, we were also able to add a new component with the R2 2019 release!

ColorPicker

The Angular ColorPicker lets you provide either a drop down or expanded widget to let your users select color within your Angular applications. This can be done by providing a predefined color palette for your users to chose from, or a gradient that gives some more flexibility for picking a specific color.

New Features in Existing Components

Scheduler Enhancements

The Scheduler has been a focus of ours for a couple of releases now, and with good reason. It is one of our most-used components and we are receiving a ton of feedback from developers working with the component. While still have a few features to get to before we have caught up to our other web-based schedulers, with R2 2019 we were able to add the following features:

• Resize events - Events can now be modified by resizing them through grabbing the top of the bottom of the event and expanding or shrinking the events.
• Drag and drop events - Similar to above, drag & drop of events allows us to modify events through mouse interactions. Users can now drag an event to a different day or time slot to update when it happens.
• Multi-day and work week views - While we have had a few different views of the Angular Scheduler for some time, with the latest release you can customize how many days you’d like to see in a single view. Additionally we have a work week view that you can select from.
• Export to PDF - The content of the Scheduler can now be exported to PDF with the click of a single button!
• Current Time - When a user clicks on the “Today” button within the Scheduler they will automatically be placed on the current day, and a current time indicator will be displayed as a line across the scheduler.

Editor Enhancements

The Editor is one of the newest Angular UI components that we offer from Kendo UI. As it's new, and because a rich text editor needs to cover a lot of scenarios, there are plenty of features that we need to add to the component. With this release we have covered most of the basics, including the following tools that have been added to the available toolbar options:

• Format drop down showcases different formats
• Insert Image Dialog
• Insert File Dialog
• Subscript & Superscript
• View HTML tab
• Font Picker & Font Size Picker
• Text Align and Justify content
• Clear formatting button
• Localization
• Right-to-left (RTL) support

This is just the tip of the ice berg for what’s to come for the Kendo UI Angular Editor, so keep an eye out for road map updates to see what is coming down the line!

Drop Down Improvements

The Drop Downs as a whole (not just the DropDownList, for example) have received two major new features that are pretty big if you ask me.

• Virtualization (soon) - Much like the Grid and other list-based components, the drop downs will often have tons of data thrown at them. Virtualization helps ensure that users can scroll through tons of data while retaining a buttery-smooth scrolling experience. As of today's announcement the feature isn't quite ready, but I want to bring it up here to let everyone know we are just a week or so away from this being added in to the drop down package.
• Grouping - Organizing large lists is no easy feat, and one approach that we take with drop downs is offering the ability to group the data on a particular field to help make navigation a little bit easier.

WCAG 2.1 Support

Accessibility is always important and a pillar for any Kendo UI product, and Angular is no exception. With R2 2019 we are introducing documentation and guidelines for how to ensure compliance with WCAG 2.1 standards when using the Kendo UI Angular components. As our UI components are pretty advanced there are always considerations around what features make something more or less accessible, so this guidelines should help navigate those waters!

More In-Depth Look at R2 2019 for Angular

For a more detailed look into the updates we have done on the Angular side check out the What’s New in Angular for R2 2019 blog post right here.

React

New Components

React, being one of the youngest libraries that we offer, is racing forward with implementing a ton of new components and features in an attempt to catch up with our other UI component libraries. For R2 2019 we introduced a ton of new UI widgets and features to existing UI components!

Editor

With R2 2019 we added the first version of our rich text Editor, giving React developers the option to add in more free-form text in to their forms and overall applications.

DateTimePicker

The DateTimePicker provides a single input element to select both a date and a time slot. The overall UX is pretty slick in that you have a calendar to select the date from and a time picker that is akin to many mobile time pickers that you may already be using today. Of course, as a developer you can easily extract the JavaScript date object from this component to save somewhere safe.

Notification

The notification widget is nice to have when you want to add some additional UX flare throughout your application. Whether it is a popup that appears when the user has done something good (successfully signed up) or if something went wrong (error message) - the notification gives an easy way to make this the focus of the users attention. We have some predefined notification types, success, failure, warning, but you can also fully customize the look and feel of your notifications.

Slider

The slider widget is new for R2 2019 as well and provides an intuitive way to select a particular value in some predefined range. Users can drag a little indicator from left to right to select the perfect value - far better than a regular input or a drop down with all available values.

Sortable

The KendoReact team has a few internal framework items that we use for some of our components and we often times realize that we should offer these as standalone packages to let other developers take advantage of them. Sortable is one of those packages. This opens up the opportunity for your end-users to reorder lists of HTML elements by dragging components around, with the underlying data being updated as we go along.

Draggable

The Draggable component is in the same vein as the Sortable component above: something that we want all React developers to be able to use rather than something we hoard for ourselves and the KendoReact UI components. Draggable is a generic utility library to help with dragging generic HTML elements and controlling where items can be dragged and dropped to.

New Features in Existing Components

Grid Improvements

Pretty much any release comes with some sort of update to the Grid honestly, but between January and May we added a huge feature in the form of column virtualization, cementing the KendoReact Grid as one of the fastest and feature rich data grids for React.

• Column Virtualization - The KendoReact Grid is already one of the fastest data grids available for React developers and by introducing column virtualization we continue this trend of being on the forefront of performance. With the latest edition the Grid now supports virtualization of both rows and columns.
• Context Menu - Often times we want to provide additional options on each of the data items within the Grid, and this is where the context menu comes in to play. Now a user can right-click on any row within the KendoReact Grid and have additional options appear. Of course you as a developer has full control over what appears in said menu.

TreeView Improvements

The TreeView also received some of the most frequently requested features, specifically drag & drop as well as checkbox selection.

• Drag & drop - End-users can now take any node within the TreeView and drag & drop it to reorganize the TreeView structure. This works for leaf nodes as well as any nodes with children.
• Checkbox selection - With a single configuration option you can now provide checkbox selection across the entire TreeView, with the selected values easily being extracted or set by working with the TreeView’s API.

More In-Depth Look at R2 2019 for React

Can’t get enough of what we’re doing with React? Head on over to the What’s New in KendoReact for R2 2019 blog post where I go in to more detail about all new components and features that are a part of R2 2019!

Vue

Native Data Grid

The native Kendo UI Grid for Vue.js received a lot of attention in the last couple of months.

• Grouping & Virtualization - Virtualization can now be used in conjunction with grouping, meaning that there are no longer limitations for using groups along with virtualization. Huge performance gain here!
• Frozen / Locked Columns - Frozen, or locked, columns provide a slick way to ensure that a column is permanently displayed as you scroll through your columns. A column doesn’t always have to be frozen and you can set up columns to only lock once they haven scrolled past.
• Grid Column Menu - Being able to provide more options for interacting with columns is often times a requirement for any Grid implementation. With the column menu feature developers can now set up a default menu, or a customized menu, for interacting with features like filtering, sorting, the showing and hiding of columns - all within a menu that appears when you click on the Grid’s headers.

New Features in Existing Components

ListView Endless Scrolling

Having a pager at the bottom of a data bound list is sometimes far from ideal based on user requirements - end-users would like to just see a scrollbar instead. This is where Endless Scrolling comes in to play as it gives your users a way to scroll through all of your data without seeing a pager, and you as the developer receives a ton of benefits from loading pages of data rather than all data at once.

More In-Depth Look at R2 2019 for Vue.js

Want to check out more about what we’ve done for Vue.js with R2 2019? Head over to the What’s New in R2 2019 for Vue.js blog post to see even more detail.

Sign Up for the Webinar(s)

Normally this is the section where I throw in some details about an upcoming webinar. However, in today’s post I have great news in that we have two webinars that you can sign up for.

The first webinar I want to highlight is the live Kendo UI Webinar, taking place on Thursday, June 6th at 11:00 AM ET! Join myself and my colleagues on the Developer Advocate team to cover what I’ve talked about in this blog post, and the more detailed post, in a live webinar format.

Sign Up for Kendo UI Webinar

The second webinar I want to cover is the KendoReact-specific webinar for the folks of you interested just in React. This is happening on Tuesday, June 4th at 11:00 AM ET, and you can reserve your seats for the R2 2019 KendoReact Live Webinar right here.

Sign Up for KendoReact Webinar

For both of these webinars seats are limited, so head on over to either (or both!) of the links I posted here to reserve your seat today.