What’s New in Kendo UI for jQuery with R1 2021

The R1 2021 release of Kendo UI for jQuery has arrived and it brings along several new UI components like the FloatingActionButton and BottomNavigation components along with a slew of features for existing components.

The R1 2021 release of Kendo UI for jQuery is here to kick off the year with a bang. Let’s dive right in to all the new components and features that arrived with today’s R1 2021 release!

New jQuery Components

New Component: FloatingActionButton

Initially popularized by Material Design, but now found just about everywhere, the Floating Action Button is a contextual button that executes an action on a page fits both desktop and responsive web applications alike. With the new Kendo UI Floating Action Button component, any jQuery developer can take advantage of this modern user experience across their applications.

Beyond the individual button, which can be styled and customized with a few configuration options, the jQuery Floating Action Button also sports the ability to define a “speed dial,” or additional contextual action items, which animates out on top of the larger original button. Just like the main action button these speed dial buttons can be customized to fit any design.

For a better look at how the new Kendo UI for jQuery Floating Action Button can fit in to your applications today head on over to our demos!

New Component: BottomNavigation

With R1 2021 we are also adding the new Kendo UI for jQuery Bottom Navigation component. This is the perfect UI component for any type of navigation that may have to span across desktop and mobile devices, giving users a quick and intuitive way to interact with an always-present navigation at the bottom of the page. I may have already given this away, but the component is fully responsive and can adapt to the current viewport.

You have full control over the icons and text associated with each button and integrating with any sort of routing setup is a breeze thanks to the various configuration options and events the component offers.

For a better look at the new jQuery BottomNavigation component check out our online demos.

New Component: ExpansionPanel

Adding on to our expanding list of layout-focused components, the new Kendo UI ExpansionPanel component provides a quick and easy way to create content which can be expanded and collapsed. The component is broken down in to two parts: the header, which is always displayed, and the content area, which is shown or hidden depending on if the jQuery ExpansionPanel has been expanded or collapsed. As with all of our components, exactly what type of content goes into each of these areas is completely customizable by providing Kendo UI templates.

To see more of the new Kendo UI for jQuery ExpansionPanel component you can find our demos right here.

New Component: RadioGroup

The new jQuery RadioGroup component builds on top of the previously released Kendo UI RadioButton component. Whenever two or more RadioButtons need to be used in a list you should be using the new Kendo UI for jQuery RadioGroup component to help manage selected options, validation, and the layout of the RadioButtons.

To see the jQuery RadioGroup component in action head on over to our online demos.

New Component: CheckboxGroup

Similar to the RadioGroup component above, the new Kendo UI for jQuery Checkbox Group component builds on top of the existing jQuery Checkbox component and provides helpful options for managing two or more related checkboxes.

Check out the Kendo UI for jQuery CheckboxGroup component online demos right here!

Expanded Component Features

Grid - Control Export on a Column Basis

The Kendo UI Data Grid has had the ability to export content to various file formats like Excel and PDF for some time and with R1 2021 we are making this even better! Now you can define whether a column should or should not be a part of the exported file. This configuration is done on a per-column basis to give you the ultimate flexibility.

Check out what this looks like by heading over to this online Kendo UI Grid demo.

Grid - Include Images in Excel Export

Speaking of exporting improvements for the jQuery Data Grid, with R1 2021 we also introduced a ready-to-use sample showcasing how to export images from the Kendo UI Grid when exporting as an Excel file.

To see what the code looks like you can refer to this Kendo UI for jQuery Grid documentation article.

Grid - Sort & Group via Column Menu

Continuing with our Grid improvements, in R1 2021 the Kendo UI Grid also added additional UI elements to help sort and group columns via the column menu. This can be enabled via couple of configuration options and gives end users even more options for interacting with the Kendo UI Grid columns through the column menu.

To see this all the new goodies in the Kendo UI for jQuery Grid Column menu head on over to this online demo.

Grid - Updated Column Menu Design

With all of these new features we certainly had to think about how we could potentially improve the overall user experience as well, so with the latest update of the Kendo UI Grid we also added a configuration option to switch to a new and improved column menu design.

To see this new and improved column menu design you can refer to this online demo of the Kendo UI Grid.

ListView - Grouping

The Kendo UI for jQuery ListView component also received a big update with R1 2021, specifically adding grouping. Similar to other data bound components like the Data Grid, any data bound to the Kendo UI ListView can now be grouped by any defined field.

To see the ListView Grouping in action, check out this online demo.

TileLayout - Add & Remove Tiles

The Kendo UI for jQuery TileLayout component is already a super popular component despite being out for just a single release and with this popularity comes feedback from all of our users. One of the top-requested features for the TileLayout is the ability to add and remove tiles after the initial rendering of the component. So, with R1 2021 we added the ability for developers to modify the collection of tiles by being able to add and remove tiles dynamically.

To see how to add and remove tiles from your Kendo UI TileLayout components, head on over to this demo.

Editor: Create a list with Roman Numerals

The Editor also received some love with R1 2021. Specifically, we added the ability for lists to be created with roman numerals. Previously similar lists would be built out using numbers like 1-3, but with this new tool you can bring on the fanciness by listing items as I, II, III, IV, and so on and so on.

This Kendo UI Editor demo showcases all the tools available and includes the new Roman Numeral interface.

Editor: Table Aligning Tool

Another feature added to the Kendo UI for jQuery Editor is the ability to align HTML Tables within the editor content. This tool will let users quickly and easily align any table to the left, center, or right of the Editor document.

To see just how this new Table Aligning Tool for the Kendo UI Editor works, head on over to the jQuery Editor online demos.

Various Components - Improved Accessibility

Always striving to ensure that we are as accessible as possible with Kendo UI, with R1 2021 we also introduced various accessibility improvements across many of our components. The biggest impact comes with the ScrollView, Drawer, Timeline, and TileLayout components all added built-in keyboard navigation.

We Want Your Feedback!

Did we miss any jQuery component or feature that you need in your web apps? Feel free to add a comment in the comment section below or add your specific request in our Kendo UI for jQuery feedback portal. Our roadmap is driven by the feedback that we hear from you so make sure you provide any and all feedback!

Register for our Live R1 2021 Webinar

Interested in seeing everything I wrote about above live and in action? Maybe you have wanted to ask a question to myself or the Kendo UI for jQuery team? Well, join us for the Kendo UI R1 2021 Release Webinar on Thursday, January 28th starting at 11:00 AM ET! We’ll cover everything that I mentioned here and sprinkle in Q&A as we can throughout the session. For more details head on over to our webinar registration page. Seats are limited so don’t forget to snag your spot today!

Save My Spot

Join Us on Twitch

Looking for even more? You can also catch us on a special full-day Twitch session from 8am - 5pm ET on January 29th.