What’s New in Kendo UI for jQuery With R1 2022

The R1 2022 release of Kendo UI for jQuery brings the new and improved PivotGrid, a slew of new features and updated themes.

The R1 2022 release of Kendo UI for jQuery is finally here and ready to kick the new year into high gear! This release brings a new and updated PivotGrid component, more Figma UI assets, and tons of features across existing components. Keep on reading to see everything that is new with R1 2022 in Kendo UI for jQuery.

Telerik & Kendo UI Kit for Figma v1.7

Last year we officially introduced the Telerik and Kendo UI Kits for Figma. We created these Figma assets as a way to help improve the collaboration between designers and developers using Kendo UI. Initially we released only a smaller group of UI components, but we have been adding new UI components regularly throughout last year.

I am happy to report that, with the R1 2022 release, we have introduced Figma assets for all Telerik and Kendo UI components with only one exception: the charts.

Buttons, Inputs, DateInputs and DropDowns Packages: New Theme Rendering Options

Based on feedback from our customers, as well as the continuing industry trend around creating design languages, we have kicked off a process to evolve the Kendo UI themes to be more flexible, simpler to understand and use, as well as make customizing Kendo UI components as easy as possible.

Through this effort, we are revisiting all Kendo UI components across the Default, Bootstrap and Material themes. We are introducing common options that can be set across your entire application or set on a more granular level by customizing single components.

With R1 2022 we have updated the Buttons, Inputs, DateInputs and DropDowns to offer the following theme rendering options:

• themeColor
• fillMode
• size
• shape
• rounded

A note to make here is that these updates will include breaking changes to the visual aspect of Kendo UI for jQuery. For anyone customizing our components or doing visual regression testing, we recommend taking some extra time to review these changes.

Larger visual updates like these can have implications in the form of visual regressions which could appear when upgrading from an older version to R1 2022. While we believe that we have caught and resolved many visual regression issues while getting ready for R1 2022, there may be additional issues discovered after the release. We are firmly committed to addressing these issues as quickly as possible and will continue to push out updates with fixes to our themes and components after the R1 2022 release.

To provide more information about these changes and our general plan around the Kendo UI themes, we recently posted Improvements Coming to Telerik and Kendo UI Themes in 2022.

New jQuery Components

New Component: jQuery PivotGrid (v2)

The first big announcement for jQuery developers with R1 2022 is the new and improved jQuery PivotGrid component!

You may be surprised to see this listed as a new component since Kendo UI for jQuery has had a PivotGrid for many years. I’m mentioning it here because this is a brand-new PivotGrid component, written from the ground up. This isn’t just an update—it’s a brand-new component!

Over the years, we have received a ton of feedback relating to aspects of the PivotGrid component, including new features and user experience improvements. While we’ve been able to tackle many of these items, we came to realize that the underlying engine and our approach to how we created a PivotGrid component could be vastly improved. After several rounds of research, proof of concepts and feedback, we concluded that a new PivotGrid component was the best path forward.

If you are using the existing jQuery PivotGrid, you do not need to worry—we haven’t removed the “old” PivotGrid, and both components can live side by side. The new component and its namespace, PivotGridv2, lets developers take their time with either migrating existing uses of the PivotGrid, or mix-and-match depending on requirements. At the time when this blog post is published, PivotGridv2 has fewer features and less functionality than the original PivotGrid. However, we will work on adding features and functionality to match, and later exceed, the current set of PivotGrid features with v2.

For a full breakdown of features, please refer to the new PivotGrid v2 component demos section.

New Component: jQuery Avatar

The new Kendo UI for jQuery Avatar component was also introduced with the R1 2022 release! This new component is perfect for displaying a UI component to represent an individual or an entity within your web applications built with jQuery. The component can display images, icons or initials to represent someone and has several configuration options like rendering options to configure if the jQuery Avatar component should be a rounded, circle or square shape.

Here’s a quick link to the Kendo UI for jQuery Avatar component demos.

Expanded Component Features

jQuery Admin Dashboard Sample Application

New sample applications are always fun to share, and with R1 2022 we are introducing the “Admin Dashboard” sample app built completely with Kendo UI for jQuery! This sample app follows the same design and application architecture of popular admin dashboard templates that you may already be using today. We know many of our users are creating similar dashboards in their day-to-day, so we hope that this sample app will help you kickstart your next project.

Check out the new Admin Dashboard Sample Application right here.

All jQuery Charts: Updated Colors and Design

Another announcement for R1 2022 related to the updating of all of our themes is that the jQuery Charts library now sports a new set of default colors out of the box. For those not familiar, these default colors are used when no series colors are set and previously has been a bit limited in number—leading to colors needing to be reused when a large number of series were added in. With this latest update, the default color set has not only been updated to give the jQuery Chart a more modern feel and keep the design in line with the Kendo UI theme that is being used, but there are also more colors available which will avoid having colors reused when a large number of series are rendered at once.

For those who need to keep the old colors as the default color of the jQuery Charts, we have this “Using Series Colors from Themes v4” documentation section in our jQuery docs.

To see all of the new colors with your own eyes, here’s a quick link to the Kendo UI for jQuery Charts that shows the new default colors.

All jQuery Charts: Improved Pan and Zoom

Panning and zooming have both been a part of the Kendo UI for jQuery Charts for a while already, but with R1 2022 we have improved this feature! Specifically, with this update the zoom is now consistent when zooming in and out using the mouse wheel.

Check out the improved pan and zoom feature with the jQuery Chart component Pan and Zoom demos.

jQuery Grid: Multi-Column Sorting via CTRL + Click

A quality-of-life improvement to the Kendo UI for jQuery Grid that we added with R1 2022 is the ability to use sorting across multiple columns using the CTRL + Click interaction. This is an optional behavior that allows end users to sort on a single column when using a regular mouse click and only sort multiple columns when holding the CTRL button and clicking on additional column headers. Later, when clicking on a column header without the CTRL button held, the Grid will revert to sorting by a single column.

To see this new behavior in action, here’s the jQuery Grid component multi-column sorting demo.

jQuery Grid: Improved Drag & Drop

The Kendo UI for jQuery Grid has provided support for drag and drop for a few years now, but there’s always something to improve! With this new and updated drag-and-drop functionality, the jQuery Grid displays a more intuitive user experience for selecting, dragging and placing rows within the Grid. These improved indicators should let end users see exactly what rows are being dragged, and where within the rest of the Grid’s data items they are about to be placed.

See here for the new and improved drag & drop in the jQuery Grid demos.

jQuery Editor: Undo & Redo Support

With R1 2021, the Kendo UI for jQuery Editor now offers the ability for users to undo or redo changes to the content of the Editor component. Previously this was just handled by the browser and its built-in functionality for remembering content within editable fields, which did not always work well. Now that changes are tracked internally within the Editor, this will provide end users with a far more reliable tool to revert changes within content.

See more under the Kendo UI for jQuery Editor demos.

jQuery ColorPicker: New Design

With R1 2022, we also focused some time on improving the design of existing components. To kick us off, the Kendo UI for jQuery ColorPicker component received a new and improved design.

We have received a lot of feedback for the jQuery ColorPicker over the years, as this component has been available since the early days of Kendo UI for jQuery. While we have been able to add features here and there, we wanted to dedicate some time to tackle even more features by updating the design.

These changes include an updated look and feel and also new UI elements and features, like being able to switch from Gradient to Palette views within the same ColorPicker element. We added a new color preview where you can easily compare two colors, and we included new toggleable HEX and RGB inputs with opacity support. Finally, we added the Contrast Tool to show users the contrast ratio between two colors.

See the new and updated jQuery ColorPicker design here.

jQuery PanelBar: Updated Design

Another component that received an updated design is the Kendo UI for jQuery PanelBar component. The component mostly looks the same, but for R1 2022 we updated the rendering, which includes the HTML elements and CSS classes used to represent the jQuery PanelBar, and these changes make the child elements within the PanelBar more distinguishable when all content is expanded. Additionally, we updated the look and feel of the expand and collapse arrows have to use a chevron arrow instead of a filled-in triangle.

Here’s a direct link to the jQuery PanelBar component demos for more information.

jQuery Drawer: Amazon-Style Navigation Sample

A scenario that pops up frequently for users of the Kendo UI for jQuery Drawer is the desire to replicate the Amazon menu when using the component. For those not familiar, this navigation element starts with a regular Drawer component listing various menu options. When a user clicks on any menu item, the Drawer component animates to the next “level” of the drawer and renders a completely new set of menu items related to the parent item that was just selected. From there, users can navigate deeper or use the provided navigation to move back to previous levels.

To help developers achieve this style of interaction, we have created a Knowledge Base article which highlights just how this can be done. This is a bit of a more advanced scenario, which means it requires a little more code than would normally be found in one of our demos—hence the KB article.

All jQuery Components: Improved Accessibility

A big under-the-hood feature for R1 2022 is improvements to accessibility across all Kendo UI for jQuery components. These improvements range from fixing reported accessibility issues within our backlog as well as improving our automated accessibility testing to improve the robustness of the UI components from an accessibility perspective. The result is that the latest edition of our jQuery components continues to be the premiere jQuery UI library for accessibility compliance.

You can find out more by visiting the Kendo UI for jQuery accessibility documentation right here.

Visual Studio 2022 Support

For the Visual Studio fans out there, I can report that, with R1 2022, Kendo UI for jQuery officially supports Visual Studio 2022! The Visual Studio extensions that we offer for our UI components have been updated to ensure that all of our tooling works for the latest version of Visual Studio.

Got Feedback?

Everything that we added in with R1 2022 came directly from feedback from customers just like you. We love to hear from our customers to ensure that we are adding components and features that you all need. Did we miss a component or a specific feature that you need? Please refer to the Kendo UI for jQuery Feedback Portal and submit your own feature request or vote for an existing item.

Webinars and Live Streams

To get a chance to see all of the above updates live and in-person, we are hosting the Kendo UI R1 2022 release webinar on Tuesday, February 1, at 11 am ET! Join us to find out what is new in the jQuery, Angular, React and Vue UI components!

For those interested in the latest within Angular and React, we also have some bonus Twitch streams happening! Kendo UI for Angular will be covered live during a stream on Thursday, January 27, at 10:00 am ET and KendoReact content is streaming on Wednesday, January 26, at 10:00 am ET.

Tons of fun will be had, so head on over to the Kendo UI R1 2022 webinar registration page to reserve your seat and join in on the festivities!