What’s New in R2 2019 for Kendo UI and jQuery

The R2 2019 release of the jQuery UI components from Kendo UI is here! This release brings highly anticipated components like the PDF Viewer and Drawer, along with frequently-requested features like Endless Scrolling in the ListView.

May is finally here and you know what that means: time for another Kendo UI release! The R2 2019 release is here and it is bringing a huge set of new features and components so let’s dive right in!

New Component: PDF Viewer

The new PDF Viewer component is designed to let your users view and interact with PDF files right in the browser! This new component can be initially bound to a PDF file, or a user can even open a file from their machine to view within the component itself. They can also download the file they are currently viewing with a single button click. The interface is fully responsive and adaptive as well, which means you can add the PDF Viewer component to display PDF files on a mobile device just as easily as it can be viewed on a desktop machine.

With this initial version we have also built in virtualization to help with going through larger PDF files. Performance is always on our minds after all 😉

We also wanted to let you have your choice in PDF framework to process the actual document, so you can either use PDF.js or work with the Telerik Document Processing Library in order to process the PDF files for viewing.

New Component: Drawer

Another new component is the Kendo UI Drawer. If you’re unfamiliar with a drawer widget, it’s that lovely thing that expands and collapses when you click on something like a hamburger button. Usually this is on the left or right side of the page and it provides a slick way to have navigation without being in the way.

Outside of the ability to just show and hide the menu, which can be done in a modal way or by pushing the existing content to the side a bit, you have the ability to fully customize what each menu item looks like. This can be as simple as providing a simple text and icon combination through our properties, or work with templates to define your own look.

The drawer also features a “mini” mode which lets you show the menu but only rendering the icons you have chosen, giving a compact way to provide navigation within your application.

The Spreadsheet Component Gets Even Better

With the R2 2019 release the Spreadsheet component has received some of its most requested features! Specifically we tackled the following items.

Image Support

You can now add images to any cell. This includes dragging them around cells as well to find the perfect place for your images. Of course, any image that has been added will be a part of the files that you export

Cell Comments

With the latest release you can now let your end-users add comments to cells across the Spreadsheet and of course other users can review said comments when they visit the same document.

Additional Events

In order to provide more ways to customize the Spreadsheet component and make it tailor-fit to your applications we have expanded the events that we expose from the component. These events include:

• OnChanging
• OnDataBinding
• OnDataBound
• OnPaste
• OnCut
• OnCopy

As you can see, there’s now plenty of opportunity to jump in and override many of the default behaviors of the Spreadsheet component thanks to these events!

Mobile Improvements & Adaptive Renderings

In order to ensure that our developers do not have to make a choice between desktop or mobile, and instead think about responsive design and Progressive Web Apps (PWAs), we’ve gone through and updated and improved the adaptive rendering and mobile support of three of our components.

The Grid

Normally when we deal with responsive design in the Grid we need to start looking in to what columns to show or hide, and maybe condense the pager in to a drop down or something like that.

However, there’s more to the Grid. There’s filtering, sorting, showing and hiding columns - all which requires additional UI elements to handle. These may be tricky to get in to something like a popup menu, and let’s face it - popup menus on mobile can be pretty bad. So, with adaptive rendering we take that in to account and provide an alternate user experience for interactions with the Grid to help truly adapt to the view that the Grid is rendering in.

Here’s a quick example of what this looks like when you click or tap on the header of a Grid.

See how we have a ListView with options (sort ascending or descending) and you can dive deeper in to the Filter options for a column? Similarly, we have switches available for every column to toggle visibility not just for the current column, but all columns available in the Grid.

I should mention that this isn’t the default behavior of the Grid - regular responsiveness still accounts for most requirements. However, this adaptive view can be set up with a single configuration option for those of you that need it!

The Scheduler

Similar to the Grid, the Scheduler is another component that can benefit from actually adapting to its viewport rather than just being responsive. So, with the R2 2019 release we decided to focus on the adaptive view of the Scheduler component as well.

Above we see a quick look at the agenda view (with some additional grouping) configured for the adaptive view, with tapping on these items bringing up an editable form that takes up the entire view port to help with easier editing on smaller viewports.

Again, similar to the Grid, the adaptive view of the Scheduler is triggered by a configuration option.

The DateRangePicker

The DateRangePicker dropped with R1 2019 and some of the initial feedback we had around improvement was around how it handled mobile users. Well, with R2 2019 we’ve gone through an ensured that this component handles responsive design well and works much better on mobile devices!

ListView Gets Endless Scrolling

Up until this release endless scrolling in the ListView was the highest-voted item in our feedback portal. Well, I’m happy to say that I can officially mark this item as “done” with the R2 2019 release!

This means the ListView no longer needs a pager at the bottom in order to cycle through a large list of items. Simply scroll to the end of your current list of items and you’ll have the next page of items automatically loaded. Your end users can now scroll to their hearts content!

Other Improvemens

jQuery 3.4.0 Support

This is easy to cover: with R2 2019 the Kendo UI components are officially compliant with jQuery 3.4.0, ensuring that we are keeping up to date with the latest and greatest within the jQuery world.

Data Binding the Menu

Another long-awaited item is the ability to be able to do local and remote data binding to the Kendo UI Menu. Well, with the R2 2019 release we can finally data bind to the Kendo UI Menu! Rather than manually build out your menu you can now use a DataSource to connect to remote data and populate the menu according to your own data items.

This and More in our Webinar

If you want to see what we brought up here in action then you should join myself and my Developer Advocate colleagues for our live Kendo UI Webinar on Thursday, June 6th at 11:00 AM ET! We have limited seats for this webinar so make sure you head over and register to reserve your seat today!