R3 Kendo UI

The start of the fall season here in the northeast of the USA is always an exciting time. We have the leaves changing over from the luscious green of spring and summer to the vibrant orange and yellows this area is known for. The temperature starts becoming bearable, we put pumpkin spice in absolutely everything and most exciting of all: we have the R3 release of Kendo UI!

Kendo UI is very interesting to write about now that we cover UI component libraries for jQuery, Angular, React and Vue.js. So many new components and new features to talk about! The last few releases I've created this mega-blog with absolutely everything released with Kendo UI highlighted, which could be a bit tricky to navigate. So, with R3 2018 I'll be using this blog post to cover highlights of the release for each of these products and then also release some longer blog posts for each framework - stay tuned as those will come tomorrow! As they are released I'll update this post with some links to help with navigation as well.

Update: The detailed post for each framework is now live! Feel free to read on for an overall summary, or follow these links for framework-specific content.

Just to make things easy, here's a quick table of contents to navigate you to the particular framework(s) you might be interested in.

Table of Contents

  1. Updates to the jQuery Component Library
  2. Updates to the Native React UI Components
  3. Updates to our Native Angular UI Components
  4. Updates for the Vue.js UI Components
  5. We Want to Hear from You!
  6. Want to See the Updates in Action?

Updates to the jQuery Component Library

WCAG 2.1 Compliance

The first thing I want to highlight for the jQuery component library is something that I find incredibly important: accessibility. With R3 2018 Kendo UI is fully compatible with the new WCAG 2.1 standard. Accessibility compliance is one of the main focuses with the Kendo UI library as all of our components are accessible out-of-the-box. While the move from WCAG 2.0 to 2.1 as a standard only happened at the end of June, we wanted to ensure that our next official release was compatible with this new standard, so here we are! This makes Kendo UI one of the few, if not the only, UI library compatible with this new accessibility standard.

New jQuery Components

A big effort that the Kendo UI team has focused on over the last couple of releases is to ensure we are taking care of the most-requested items in our feedback portal, which has mainly come from the addition of new DropDown components like the DropDownTree last release (R2 2018).

With R3 2018 we tackle yet another important component: a ComboBox that contains a Grid or table structure. This is why I'm excited to introduce the new MultiColumnComboBox component! This gives developers an intuitive way to bind to a list of data and have each data item display multiple values across however many columns may be needed. Of course, filtering/searching can easily be done by just typing in the text input of the component.

MultiColumnComboBox

Additionally, we wanted to expand on our list of available data visualization components by introducing the ArcGauge widget. This is perfect for scenarios where you want a simple, effective and stylish way to showcase a value or percentage of something:

ArcGauge

Major TreeList Updates

Many of you are probably aware of the TreeList component, but just in case the quick tl;dr is the component provides a tree-like hierarchy structure with the column structure of a grid, giving homogenous data a nice way to align columns as items are expanded.

Of course, this means that there are plenty of Grid features that would be a natural fit with the component, so as a part of the R3 2018 release the Kendo UI TreeList now has:

Grid Component & Conversational UI Improvements

Of course, it really wouldn't be a release with something added to our most popular component: the Grid . Here is a quick list of the features we added for this release:

  • Group Summaries now available in Group Header (previously a tedious and manual template process)
  • Updates to responsive behaviors (even more suitable for a PWA!)
  • API Added: Update column width programmatically

Another exciting component that we added an important feature to is the Conversational UI component. Specifically, we added the new Toolbar feature that gives users additional ways to interact with their chat interface with items like images and voice. Instead of purely typing text you can now offer your users the ability to upload images and record voice, among a few other items.

Material Theme Comes to jQuery

We initially had planned on adding the Material theme to our jQuery components with the last release but unfortunately had to push things out a bit to ensure that the full suite of components were themed - there are quite a few of them after all!

Well, the long wait is finally over as I'm happy to say that with the R3 2018 release we have the Material Theme ready for the jQuery suite!

jquery-material

AngularJS 1.7.x Support

Something that might have snuck by a few people is that AngularJS released 1.7.x during the summer as a part of their way to continue to support AngularJS 1.x, although this is the last significant release. As our support for AngularJS 1.x comes from the jQuery components I wanted to mention that we support this latest version of AngularJS for the folks that need the latest and greatest within Kendo UI for their AngularJS apps.

Updates to the Native React UI Components

Boy do I have a lot of updates for the native React UI components! As this library is the youngest of the bunch we are quickly ramping up the number of components available and for R3 2018 we certainly did not disappoint!

New Native UI Components for React

Starting off with the new components, here's a quick list of the new components that we added in since the last release:

And I'm not done yet! We also added more of our data visualization components:

Exiting Components Get New Features in React

Of course, existing components received a whole slew of updates.

The Grid received some crucial updates both in terms of features and under-the-hood updates, namely:

Through our input elements, often used for forms, we added official integration with HTML5 form validation. This can be seen on individual component pages, like this one for our DateInput component.

For an even deeper dive in to the React release look forward to the React-specific release blog post!

Updates to our Native Angular UI Components

Our Angular library is also primed for a ton of new features!

I'll start with the Grid, which recently added the ability to integrate our menu component to create a ContextMenu. We also added the ability to use the DateRangePicker component as a way of filtering. Another huge piece of news is that we managed to significantly boost the performance of the Angular Grid, achieving a smooth 60 FPS when scrolling through large amounts of data! A little peek behind the curtain on how we achieved this can be seen in this blog post.

In the data visualization world we added support for axis positioning, which lets developers choose exactly where the labels of an axis will be positioned. This is similar to how labels can be positioned in Excel charts, especially in scenarios with a negative Y axis.

There is one major component that I haven't brought up yet, and that is the official native Angular implementation of the Scheduler component. At the time of writing this blog post the component is not quite ready, but we are going to ship it within just a few weeks. A delay is never ideal, but we want to make sure its a component that can be usable at least for some of the most common scenarios when it initially releases. Thanks to releasing this as a separate package you do not have to wait until R1 2019 - instead this is right around the corner! We'll keep everyone up-to-date when it officially drops!

For even more insight in to the Angular release we will follow-up this blog post with one specifically for the Angular widgets.

Updates for the Vue.js UI Components

Vue.js Wrappers Get New Components

As the Kendo UI Wrappers for Vue are based on jQuery we will see a very familiar list to the first section of this blog post. That being said, let's dive straight in to it.

The big announcement here is that the Vue.js components are fully WCAG 2.1 compliant. This is huge news for anyone looking to ensure that their applications are as accessible as possible. The great benefit here is that it's all taken care of out-of-the-box without having to sacrifice anything from a user experience perspective.

New components for R3 2018 include the new MultiColumnComboBox, which combines the table structure of a Grid within the drop down layout of a ComboBox, and the ArcGauge component, the perfect widget for some efficient & gorgeous display of values.

Updates to Existing Vue Components

The Vue.js TreeList component is getting a lot of attention this release with some of the top-voted features being implemented for R3 2018. This includes:

  • Batch/In-Cell Editing
  • Client-side Paging
  • Multi-column Headers
  • Keyboard Navigation

The Grid also received a few top-voted features:

  • Group Summaries in Group Headers
  • Updates to Responsive Behaviors
  • Ability to programmatically change column width

Finally on the feature update front, the Conversational UI component, introduced with the last release, received the new toolbar feature which allows end-users to add in images, voice, and other items in to their chat component. This expands interaction capabilities past simple text, and gives developers the flexibility to add in their own custom functionality.

Material Theme Comes to Vue

I'm also extremely excited to announce that with the R3 2018 release the Material theme, based on Google's Material Design, is now officially supported with the Kendo UI wrappers for Vue! Whether you have an existing application that follows Material Design, or looking to get started with Material Design in a new application, the Kendo UI components can be easily dropped in and fit with the overall user experience.

HUGE Update to Vue.js Documentation

Up until now we've relied a bit on a mix between our jQuery and Vue.js demos and documentation articles in order to get Vue developers up-to-speed with our components - far from ideal. We took a good hard look at what we could improve, and I'm happy to say that with the R3 2018 release we added 200 new demos to our Vue documentation! Thanks to this effort it should be very easy to start getting familiar with our Vue.js wrappers without having to jump between multiple different resources.

We Want to Hear from You!

As always, we want to make sure we hear your thoughts around the release! Feel free to add your thoughts in the comment section below. Did we miss one of your favorite features or a new component? Use our feedback portal to make sure that your voice is heard!

Want to See the Updates in Action?

I've covered a lot here, but if you want to see all of these release highlights and more then you should join us for the LIVE Kendo UI Webinar happening on September 27th at 11 a.m. ET! Join me and the Kendo UI Developer Advocate team in a live webinar where we'll take you through the R3 2018 release of all Kendo UI flavors! Seats are limited to make sure to reserve yours today!

Save My Seat


carl-bergenhem
About the Author

Carl Bergenhem

Carl Bergenhem is the Product Manager for Kendo UI. Throughout his time at the company he’s covered the entire portfolio of products offered, but mainly spent his time in the web development arena covering ASP.NET Ajax, ASP.NET MVC, and JavaScript-based products. He’s passionate about web technologies and has been developing with products like Kendo UI and NativeScript since their inception. In his free time Carl enjoys slaying virtual monsters, snowboarding and playing his guitar.

Related Posts

Comments

Comments are disabled in preview mode.