What's New for jQuery in the R3 2018 Release of Kendo UI

Take a look at some of the changes coming in the R3 2018 release of Kendo UI for jQuery, including WCAG 2.1 compliance, new components and more.

You've probably already seen the summary I provided in the overview blog post around Kendo UI for R3 2018, but I wanted to take a deeper look at specifically what is new for the jQuery UI components with this exciting new release.

First UI Library with WCAG 2.1 Compliance

One of the biggest highlights for me with this release is the official support for WCAG 2.1. This makes Kendo UI the first commercial UI library that supports this new standard for accessibility.

Why is this a big deal to me? Well, accessibility has been a big part of Kendo UI, and all of our web components, since the very beginning. We haven't seen an update to these standards since then, so it's always exciting to see improvements to the standard. WCAG went from 2.0 to 2.1 as the recommended standard in June. Here's an overview of what's new, but the short version is that this standard focuses on a few areas of improvement over 2.0, including mobile accessibility, and improved standards for folks with low vision, and for people with cognitive and learning disabilities.

The best part is that this is all taken care of out-of-the-box. As a developer all you need to do is add in a Kendo UI widget, or upgrade your existing references, and you'll be able to take advantage of this accessibility compliance.

New jQuery Components

Of course, it wouldn't be a noteworthy release without mentioning some of our new components. I'm happy to say that with R3 2018 we delivered on the most top-voted feedback item for Kendo UI: a dropdown with a table structure for each item.

Introducing the MultiColumnComboBox

As the name might indicate, with the R3 2018 release we now officially have a ComboBox component that provides a grid as a way to display additional data values for each individual item.

The power here comes from the the features that stem from a ComboBox, including:

• Server filtering
• Virtualization
• Grouping
• Templates
• Keyboard Navigation
• Cascading MultiColumnComboBoxes

For those of you familiar with our regular ComboBox, these are all features already available within this component. So, no need to wait for a bunch of features to have to be added, this is truly a component ready for action immediately.

Data Visualization - Adding the Arc Gauge

We are constantly receiving feedback and requests around our data visualization components, and the gauges are certainly no exception. To satisfy your appetite for more visuals we added in a brand new component, the ArcGauge. This widget gives you a simple and elegant way to display a value or a percentage of a value without any additional bloat. Just a beautiful arc shape and some values.

Updates to Existing Components

Major TreeList Updates

The TreeList component is the perfect component when you have homogenous data that you want to display in a hierarchical fashion with the additional requirement of having a column structure like you traditionally see in a grid/table.

This means that while there are plenty of unique features in such a component, we also have a lot of requests to have features we see in the Grid available within this component. With R3 2018 we have added in some of the most-requested features of this component that end up coming from Grid functionality.

Multi-Column Headers

Sometimes having a single header per column isn't enough, especially when you want to group headers together. With multi-column headers you can define overarching headers for several columns.

Client-side Paging

While available exclusively on the client-side, as in when all data has been loaded to the client, client-side paging has been added to improve performance and rendering with more data intensive applications.

Batch/InCell Editing

As the name gives away InCell editing (or Batch as it is called as well) allows end-users to edit individual cells rather than the entire row. Updates can then be batched together and sent as a single request to the server.

Keyboard Navigation

Pretty self-explanatory, but we have now officially added full keyboard navigation support to the TreeList component.

Grid Component & Conversational UI Improvements

The Grid is the most-used component in the suite so I want to make sure that I mention the features we added here as well.

Group Summaries Now Available in Group Header

Up until now group summaries has been exclusively relegated to the group footers of a Grid. Now, with R3 2018, we have officially added the same type of summary to the headers of groups. This was previously possible, but only through some custom CSS and HTML within templates. Now this is a simple configuration option.

Updates to Responsive Behaviors

As we continue to look at how we can improve our support for Progressive Web Apps, we wanted to add some more functionality to the Grid. To achieve this we now have a media property for each column of a Grid. This expects a valid matchMedia string in order to control when to show or hide a column depending on available viewport size.

API Added: Update Column Width Programmatically

Up until now, once a column width has been defined a re-render of the Grid would be required to update any column widths. With R3 2018 we have introduced a long-awaited API update which gives you the ability to redefine the width of a column programmatically after the Grid has been rendered.

Conversational UI Updates

Folks have been pretty excited about our Conversational UI component, so we took some time to add one highly anticipated feature there - the ability to add a custom toolbar to your chat. This gives users additional ways to interact with your chat, including adding images and voice recordings. This is of course something that we offer a template for, so you can customize this even further to fit your requirements.

Other Component Highlights

GraphQL Integration

It's impossible to escape the excitement around GraphQL. While it may not be applicable for every single project, it certainly does have scenarios where it makes a ton of sense. We've heard this within our existing client base as well, which is why we went ahead and created some resources around binding Kendo UI components to GraphQL.

The easiest example to follow would be the binding Grid to GraphQL demo since the Grid is often used in data binding scenarios, and it gives us a chance to see how the DataSource can be used to communicate with GraphQL.

On top of this a colleague of mine recently blogged about binding the Kendo UI Grid to a GraphQL API which goes even more in-depth. I definitely recommend checking this out!

Restrict Window Movements

A fairly popular feedback item for the Window component is to restrict the movement to a particular area rather than the entire browser window. Well, with R3 2018 we added this functionality and to see this in action you can refer to the Kendo UI Window Constrain Movement demo.

Chart Labels

Another note I wanted to make around updates to existing components is an update to our charting library. Something that folks have struggled with is dealing with labels within a chart when there are positive and negative values being displayed. Rather than try to describe it I figure it's easiest to see through images.

A cleaner way to display this would be to control exactly where the labels get displayed, and with the categoryAxis label position option and the valueAxis label position option this can be easily achieved!

Much cleaner if you ask me!

Material Theme Comes to jQuery

We were initially hoping to get the Material theme added to jQuery with the last release, but we needed some more time to get things right. Well, we've taken that time and now we can say that the jQuery components officially supports Material Design!

AngularJS 1.7.x Support

There are plenty of applications out there that are created with, or at least maintained with, AngularJS 1.x. This is something that has not slipped past Google and during the summer they release Angular 1.7.x which is the last significant release of AngularJS. To ensure that everyone using Kendo UI in AngularJS can work with the latest-and-greatest within this framework, Kendo UI now officially supports AngularJS 1.7.x. Our support for this edition of AngularJS comes from our jQuery components, which is why I mention it here. Are you looking to work with Angular (2+)? We do have native components built from the ground-up in case you're interested!

We Want to Hear from You!

Many of these features may not have been added if it wasn't for the fact that we hear from our developers. So, if you feel like we missed any new components, or any features, make your voice heard! Add a comment in the comment section below, or submit feedback to our our feedback portal.

Want to See the Updates in Action?

Last thing, I promise. This blog post might have been a lot to digest and if you prefer to see things covered live then I've got great news! As a part of the R3 2018 release we have the LIVE Kendo UI Webinar happening on September 27th at 11 a.m. ET! Join me and my colleagues on the Kendo UI Developer Advocate team in a live webinar where we'll go over the changes that have been introduced with R3 2018. There are limited seats so make sure that you reserve yours as soon as possible!

Save My Seat