What's New in Kendo UI with R3 2019

R3 2019 is here and with it comes several updates across Kendo UI, with new components and highly-requested features arriving in our jQuery, Angular, React and Vue suites.

To keep this post trimmed down a bit we will just cover the big highlights for each library here and link to more in-depth articles covering each flavor in more detail.

jQuery

New Components

New Component: Timeline

This new and unique UI component provides a slick way to showcase events happening across a particular time frame. Need to highlight releases that your team has done over the years? Maybe a history page of your company? The timeline component is perfect for these kind of scenarios.

Events have default fields that you can bind to, but of course you can provide templates to make sure that the content fits your desired designs.

New Component: Card

With the Card component the jQuery components add another layout element to help developers set up beautiful and modern application designs. Popularized with Bootstrap and Material Design, this layout component can be used by itself or as a part of a template for other components like the ListView to create a compelling user experience.

New Component: Rating

The name certainly gives it away, but the new jQuery Rating component provides an easy way to let your users input a particular rating or value on whatever scale you need (1-5, 1-10, or any other range). This component has some built-in icons, but you can also customize things to provide a template and your own icons to ensure the Rating widget fits into the rest of your application!

New Component: Filter

With the new Filter Component your end-users can build complex filter expressions with an intuitive interface. This filter expression can be directly bound to the databound Kendo UI components like the Grid, or you can use the component as a standalone widget that you extract filter information from in order to do some custom filtering of your own.

New Features in Existing Components

PDFViewer - Various Improvements

The PDFViewer received a lot of attention since its initial release back in May. Based on feedback coming from our customers we have implemented some of the most-requested features to ensure that developers get exactly what they need out of this new component! New features include zoom and scale functionality, the ability to configure documents to FitToWidth and FitToPage, searching within the PDF document, as well as built-in print functionality.

DataSource - Request Headers

The DataSource framework item is really the workhorse behind most of the jQuery-based Kendo UI components (at least databound ones). One missing feature which is especially important for security setups is the ability around configuring custom headers with your requests. Well, with R3 2019 we have introduced the ability to add your own custom headers with any request coming from the DataSource! This means that you can set up something like an Authorization header when reading from your existing backend.

Grid - Built-in Search Panel

While the Kendo UI Grid has had the ability to filter and provide a custom template for the toolbar, any attempt at a search field across the entire Grid has been a custom code affair so far. While this has worked, it’s not as easy as a configuration option which is why with R3 2019 we have introduced a built-in search panel for the Kendo UI jQuery Grid.

This feature can be configured to define any number of fields that are filtered when a user searches. This means that the search panel can be configured to filter across a single field or even every single field available in the Grid.

Overall Accessibility Improvements

Accessibility is a big part of any one of the Kendo UI components and we follow WCAG 2.1 (therefore Section 508 compliant) and WAI-ARIA standards across all components. That being said, there are always improvements that can be made! The Kendo UI team took a deeper look into our components to implement a whole slew of improvements on the accessibility front - all available with R3 2019!

For More Information

To check out images, gifs and more in-depth information about the latest and greatest within the Kendo UI jQuery components check out the What’s New in the jQuery Kendo UI Components for R3 2019 blog post!

Angular

Support for Angular 8

Angular continues to deliver new versions and our Kendo UI for Angular team is following closely. Over the last couple of months, the official Angular 8.0.x release has dropped and the latest packages of Kendo UI for Angular are compatible!

Of course, I can’t talk about Angular 8 without talking about Ivy. While the new rendering engine from the Angular framework is not yet the default engine (although preview versions are starting to go down this route) we are hard at work with getting Kendo UI for Angular components compatible with Ivy. Keep an eye out for news on this front over the next couple of months!

New Components

New Component: Drawer

Drawers are pretty much a standard in navigation in modern web applications today. It’s a component that works well for desktop apps, mobile apps and of course responsive web applications. That’s why we are very excited to bring this to the suite of native Angular components that Kendo UI offers! The Angular Drawer widget provides a standard drawer with expand and collapse functionality, defining icons and text for each navigation item, and also comes with features like a mini mode to display only the icons for each item to help minimize real estate occupied by the component.

New Component: DateTimePicker 

The DateTimePicker combines two of our popular pickers, the DatePicker and the TimePicker, into a single component. With one single input and drop down your users can now select both a date and specific time!

New Component: ProgressBar

A ProgressBar component can be very useful in scenarios like wizards, loading indicators, or just a neat way to showcase that something is happening in your application as users are interacting with your UI. With R3 2019 the Kendo UI for Angular team put together its own iteration of a ProgressBar that can be implemented as a standalone widget or tied in closely with the other native Angular components offered by Kendo UI. Of course, you can bind to a constantly updating value, or manually set the current progress.

New Features in Existing Components

Angular Scheduler is now RTM!

With R3 2019 we are very excited to announce that the Kendo UI for Angular Scheduler has dropped its beta tag and is now officially launched as RTM! Along with underlying stability improvements and API updates we have gone ahead and added keyboard navigation and accessibility compliance with this new version.

Editor - Table Dialog

Chugging along with features on the Angular rich text editor, we have added the Table Dialog tool to its already rich set of features. This is a big and crucial step in the evolution of the Angular Editor to reach its RTM stage and interacting with tables has been one of the most highly-requested features so far.

Grid - Header Aggregates

With the grouping feature of any data table we often want to display additional information in the header of the group. While we have had some template functionality in our headers so far, we haven’t had the ability to work with aggregates. Well, with R3 2019 we have introduced the Group Header Aggregates feature to the Angular Grid! This gives you access to calculations like count and sum across all of the columns available in the Grid.

Grid - Auto-sizing Columns

While we have had the ability to auto fit columns to their content through our API (see this documentation section for autoFitColuomns) we wanted to take the time for R3 2019 and focus on providing a way to ensure that Grid columns can auto-fit to their content when defining your Grid in a more declarative way. With the latest version of the Angular Grid component this is now a built-in feature!

DropDowns - Virtualization

We have teased this feature for a while, but we are happy to say that the latest iterations of the Kendo UI for Angular drop downs have built-in virtualization! We have had this in place for a while now, but we wanted to highlight this crucial feature as it was released between R2 and R3 2019.

Toolbar - Responsive Toolbar

A Toolbar can be used in a lot of different scenarios, including standalone implementations and integrated within other components (like the tools show in the Angular Editor). A crucial piece of such a component is to be able to fit into the existing real estate allotted for it, which includes ensuring that the toolbar can be responsive. With R3 2019 we introduced the responsive feature of the toolbar which allows for the listed tools to go from being listed in a horizontal manner to fall into a drop down, reducing a long list of items into the screen real estate of a single item.

For More Information

To check out images, gifs and more in-depth information about what's new in the Kendo UI for Angular release head on over to the What’s New in Kendo UI Angular Components for R3 2019 blog post!

React

New Components

New Component: Scheduler

The KendoReact team has been hard at work building native React components to create the most advanced UI component library for React. As a part of this effort we have been hard at work developing one of the most requested components: the Scheduler.

With R3 2019 React developers can take advantage of an interface similar to that of Google Calendar or the calendar feature in Outlook by importing the KendoReact Scheduler!

This initial version has a pretty significant list of features, including:

• Creating, updating and deleting events
• Moving events around the calendar with drag and drop
• Editing the length of the events by resizing events
• Editing events by clicking on the event for more details
• Built-in support for recurrence
• Resource management

There’s a lot to be said about this component so we recommend reading more about it in the React-specific blog post linked below.

New Component: TreeList

Similar to the Scheduler, another big component that we have been hard at work with is the new TreeList. This combines the hierarchical structure of a TreeView with the column-based structure of the Grid all in one component. Out of the gate it already comes with several features that many consider critical for such a component, like:

• Filtering
• Sorting
• Row selection
• Editing (in-line, in-cell, or form)

There’s more to be seen here, but for that I recommend heading over to the in-depth React blog post linked at the end of this section

New Components: ColorPicker, ColorGradient & ColorPalette

While the ColorPalette, ColorGradient and ColorPicker are all separate components they are very much linked together.

The ColorPalette widget allows users to pick colors from a pre-determined palette representing values with simple blocks.

The ColorGradient allows color selection by offering a gradient with crosshairs to select a favored color.

With the ColorPicker the above two components come together in a drop down (to help save on screen real estate) and can be configured to offer one of, or both of, the above components as ways to select a particular color.

New Component: Pager

The Pager component has been built into the KendoReact Grid for some time now, but we wanted to offer this as a standalone component to the developer using KendoReact! The Pager provides an intuitive way to page through data and gives ways for users to customize their views (number of items per page etc.) and comes with various configuration options to customize the look and feel of the component as well.

New Features in Existing Components

Grid - Footer Row

Data tables often need to display additional information about its data set outside of the actual rendering of said data in rows and columns. Items like headers, multi-column or single, group headings and other elements certainly help, but sometimes aggregate information is needed as well. This is why with R3 2019 we introduced the footer row functionality in the KendoReact Grid to provide an area where you can work with aggregates on a column-by-column basis. Of course you can completely take over the rendering and provide your own customization that can take up an entire row if you need it as well!

Removed Deprecated Lifecycle Methods

As a part of our commitment to be compatible with the latest and greatest when it comes to the React framework the KendoReact team has spent time removing deprecated lifecycle methods within all of our React components. You may have noticed warning messages appear in your console when using the components with the latest version of React. While they all function even with these warnings, these messages should be a thing of the past with the updates that we’ve done! There may be a component here or there that still displays the message, but this will be resolved over the next couple of weeks to completely disappear from the entire library.

For More Information

To check out images, gifs and more in-depth information about what the KendoReact release has introduced head on over to the What’s New in KendoReact for R3 2019 blog post!

Vue.js

Updates on Vue.js Components

On the Vue.js front we have done some under-the-hood work with the Native Grid as well as updated references with the jQuery-wrapped components to help ensure stability fixes are provided in these existing components. However, the new components released are currently not wrapped for Vue.js (yet) as we want to focus our attention on native components going forward, eventually removing the need to wrap components to begin with.

Speaking of more native components for Vue.js - we have heard feedback from new and existing developers alike and we know you are chomping at the bits for more native UI components for Vue! While R3 2019 does not bring any new components, what we can mention is that the upcoming months and the future road map will include more native components for the Vue.js suite, so keep your eyes peeled for more news on this in the weeks to come!

Feedback

That’s quite a lot of content for one post, even if I linked to more specific blog posts with even more content for each JavaScript library/framework we support! All of these components and features have been requested by our users, so if you have a new component or feature to an existing component that you’re missing let us know! Chances are it will make it into an upcoming release (maybe even R1 2020!?) so head on over to our public feedback portals and submit your ideas or comment on existing ones.

• jQuery Feedback Portal
• Angular Feedback Portal
• React Feedback Portal
• Vue.js Feedback Portal

Register for our Live R3 2019 Webinar!

The Kendo UI team is doing a live webinar on October 8th that will cover everything mentioned in this blog post covering jQuery, Angular and React. There are sections dedicated for each technology, and we go from 11:00 AM - 12:30 PM ET on October 8th! For a full dive into each section, as well as an opportunity to snag one of the limited seats, head on over to our dedicated webinar page to register.