What’s New in KendoReact with R2 2019

The R2 2019 release of KendoReact is here, bringing with it a large set of new components like the Editor, DateTimePicker, Notification, and more! Additionally this release brings column virtualization to the KendoReact Grid and a drag & drop feature for the TreeView.

They say that time flies when you’re having fun, and the last four months since R1 2019 have certainly flown by! We’ve been super busy since January, but now that we’re firmly in May I wanted to step through what the KendoReact team has been working for R2 2019. All of this effort has been made to ensure that creating business applications with React is as easy as possible, and you'll see plenty of great components and features added to the UI suite for this exact purpose.

More New Components

Editor

The new KendoReact Rich Text Editor is a full-featured, highly customizable WYSIWYG editor. It enables end-users to input free-form text, apply a large spectrum of formatting options, and insert HTML content. Custom rendering support ensures that you can integrate it to fit any scenario across any React app. The component allows for the creation of custom Editor tools (controls) and plug-ins, which makes it very easy to extend and customize even further. Like the rest of the KendoReact UI library, the Editor complies with accessibility standards and supports globalization.

Jump over to the Editor demos to see the new component in action.

DateTimePicker

The DateTimePicker component is perfect for scenarios where both date and time needs to be selected by the user. Following best practices around user experience, the component works well both on desktop and responsive mobile applications alike. As the gif above showcases, picking the date and time are done on separate “views” within the DateTimePicker, separating the two parts of this input nicely while still maintaining a uniform user experience.

Here is a quick link to the DateTimePicker component demos that should give you a good idea of how to use this component in your React apps today.

Notification

With the new Notification widget developers can easily showcase additional information on top of their existing user interface. As the above image showcases, this notification component has predefined designs and styles for success, warning, or error notifications. Of course, it has full capability to provide your own styling and options for your notification requirements!

I wish I could trigger this with a notification itself, but instead a plain link will have to do. Check out the KendoReact Notification samples right here!

Slider

Sliders provide a slick and easy way to select a particular value out of some range. Whether it is percentage, movie ratings, or just messing with some opacity levels - sliders are an incredibly useful way to make your applications pop a little bit more.

Sortable

Originally only available internally within our components, the KendoReact Sortable component is a helpful utility library to help around displaying a generic list of items and re-ordering the elements by dragging and dropping them. Any updates to the list are preserved to the underlying data set.

It might be easier to see this in action, so head on over to the KendoReact Sortable documentation to get a better picture of what I’m talking about.

Draggable (for drag & drop)

Previously also only an internal implementation, this release sees the drag & drop utility library released for any generic drag & drop scenario. Allow any UI element to be draggable and define exactly what can be dragged and where it can, or cannot, be dropped.

To get inspiration around introducing drag and drop in to your React applications check out the Draggable overview demos.

The Grid Becomes Even More Powerful

Column Virtualization

In order to provide the best possible performance we can, the KendoReact data Grid now provides column virtualization on top of the already available row virtualization. No matter how many columns or rows you throw at the Grid your end users will see a smooth scrolling experience.

The above gif may not do this justice. Check out the Grid virtualization demo to see just how fast and buttery smooth the KendoReact Grid is with scrolling both vertically and horizontally!

Context Menu

Oftentimes end-users want to have some additional interactions with a row or a particular cell when right-clicking on the data item. Enter the context menu. This feature allows for additional interactivity options to appear in a menu whenever a data item is clicked.

Quality of Life Updates to the TreeView

Drag & drop

Easily re-arrange the order, or at which depth, data items in the TreeView are displayed with the new built-in drag and drop feature of the KendoReact TreeView. This works for leaf nodes as well as nodes with children.

This feature works extremely well, and I recommend hopping over to the KendoReact TreeView drag & drop demo to play around with this yourself.

Checkbox selection

Developers often need to extract the selected items from a TreeView widget. This is now even easier than before with the new checkbox selection functionality which renders a checkbox next to each TreeView node.

Adding checkbox selection is pretty easy - just head on over to the KendoReact TreeView Selection demo and see how you can go about enabling this in your KendoReact TreeView!

Other Things We’ve Been Working On

We also have some other things that we have been working on that I wanted to highlight.

Demos with Hooks & Lazy Loading

Hooks, hooks, and more hooks. Seems like we can’t escape this word in today’s React landscape. While we’re not rushing to recreate every single demo to use hooks, we do have a couple of examples showcasing both hooks and one of them covers lazy loading as well!

• KendoReact and NextJS demo
• KendoReact Grid and Lazy Loading with PDF Export

Server-Side Rendering Demos

Server-side rendering is something that our components have supported pretty much from day one, however we don’t have too many examples of this in action. Well, that’s changing! Here’s a quick look at working with SSR and KendoReact for those of you interested.

Sign Up for the KendoReact R2 2019 Webinar!

If you want to see what we brought up here (and more) in action then you should join myself and my Developer Advocate colleagues during the KendoReact R2 2019 Live Webinar on Tuesday, June 4th at 11:00 AM ET! Seats are limited so make sure you register today to save your seat!

Save My Seat