The R2 2018 release of Kendo UI includes new components and features for jQuery, Angular, React and Vue, including Conversational UI. Learn all about what's new.
Beyond the first warm days of spring, there is an even bigger reason to get excited about May as it is the second release of the year for Kendo UI! That's right, as of today 🎉 the R2 2018 release of Kendo UI is available 🎉 Keep on reading to see just how this release will give you web, mobile, and desktop dev ninja powers!
Quick note: Every release gets increasingly jam-packed with features so these posts can be a bit long. Below you have a quick table of contents to help navigate to the sections you're the most interested in.
Table of Contents
- Conversational UI aka Chat Bots
- Progressive Web Applications and Kendo UI
- More Power with React
- V6 Support and More with Kendo UI for Angular
- DropDownTree & More with Kendo UI
- Vuex & DropDownTrees with Vue.js
- Updates to ASP.NET MVC and Core
- More Fun for UI for PHP & JSP
- Material Theme Updates
- Want to See More?
- Let's Hear the Feedback!
Conversational UI aka Chatbots
If you haven't already noticed, 2018 seems to be the year of AI. It has already been a huge topic of conversation and we've seen a ton of products built on top of AI, but with the recent announcements at Microsoft Build and Google I/O we see that it's an even bigger conversation today.
One large part of AI is the actual user experience with the AI. How are your users interacting with your service? Is there no UI (Alexa, Google Home) or do you have some sort of interface to display a conversation an results (Google Assistant, Siri, Cortana, etc.)? How do we go about integrating some of these services in to our applications?
Figure 1: Conversational UI in action
Well, with the R2 2018 release the entire portfolio of UI products that we offer will start offering a Conversational UI (Chatbot) component - and Kendo UI is no exception. As of today we are offering a version of this component for:
- ASP.NET MVC & ASP.NET Core
- PHP & JSP
- ASP.NET AJAX
No matter which platform you're building applications for you can take advantage of features like:
- Built-in hero cards
- Built-in suggested actions
- Built-in simple message and typing indicator
- Custom card/attachment templates
- Easy connectivity to chatbot services (Azure/Microsoft Bot Framework, Wit.ai, Amazon Lex)
For more information, demos, and other resources around this component you can head over to this page.
Progressive Web Applications and Kendo UI
Progressive Web Apps are becoming more and more powerful and bridging the gap between responsive web apps and native mobile applications. Many of you are looking to either create new applications with the goal of making them PWAs from the start, or just trying to
PWA-ify your existing applications. Thanks to the adaptive and responsive behaviors of the Kendo UI components you can easily create a web application that works just as well on a mobile device as it does on a desktop browser.
This isn't necessarily new - these responsive features have been in the Kendo UI components for years. However, with this release we are providing more guidance and documentation around creating PWA applications using the Kendo UI components. Here are some resources around using Kendo UI in PWAs for various frameworks.
- Kendo UI and PWAs
- Kendo UI for Angular and PWAs
- Kendo UI for React and PWAs
For more resources and information you can also refer to this PWA overview page.
More Power with React
Our dependency-free React library has made tremendous strides since the R1 2018 release. These components are built from the ground up and are some of the best UI components you can add in to your React applications. Beyond the Conversational UI component mentioned above, we have expanded the number of components that are commonly used in forms, as well as added a ton of features in to the Grid component.
Just take a look at how many new components we added this release:
Figure 2: New React ComboBox
Figure 3: New React Chart Component
Figure 4: React AutoComplete
Figure 5: React DatePicker
Figure 6: React Switch Component
On top of this we have provided some very important framework items as well.
- PDF Export (both generic HTML and Grid-specific)
- Excel Export (JS Excel file generation and Grid-specific)
- Localization for all React components
Of course, beyond this large set of UI components we also have updates to everyone's favorite UI component: the Grid.
- In-line and in-cell editing
- Redux form integration while editing
- Column resizing
- Column reordering
- Templates for rows and cells of a Grid
- Templates for filter cells
- Excel export
- PDF export
- Showing and hiding columns programmatically
On the theme support side I'm happy to say that with the R2 2018 release all React components can be themed with Material on top of the existing Bootstrap v4 and Kendo UI Default styles.
Holy smokes that's a lot baked in to one release - and this is just for one flavor of Kendo UI!
To see some demos of the above components in action you can refer to our Kendo UI for React components page.
V6 Support and More with Kendo UI for Angular
Let's get this out of the way immediately: yes, Kendo UI for Angular now supports Angular v6.
Now, from a feature perspective we have quite a lot of new components for you to check out! These help expand the already growing list of Angular components, and of course existing components have received additional features.
Figure 7: Angular Toolbar Component
Figure 8: New Angular menu
Figure 9: Angular Tooltip
Figure 10: DateRangePicker for Angular
Of course, the Grid component got some additional new features including:
Grid - Column Menu
Figure 11: Angular Grid with Column Menu
Grid - Loading Indicator
Figure 12: Angular Grid with the new Loading Indicator
On the sample application side, beyond the PWA sample that I already linked to, we also created a sample for using Kendo UI with Electron. This sample application and accompanying documentation will give you insight in to how you can start creating cross-platform desktop applications using Kendo UI.
Kendo UI for Angular & Electron
Finally, with this release all Kendo UI for Angular UI components, including the Grid, have full support for the Material theme!
DropDownTree & More with Kendo UI
With the R2 2018 release we have delivered the top-most voted feedback item to our list of UI components: the DropDownTree. This provides the best of the TreeView component (e.g. the hierarchical data representation) with the compactness of a DropDown. I know many of you have been looking for this component and I'm happy to say it's finally here. 😃
Figure 13: DropDownTree in Action
Last release we added additional support for the v4 edition of the OData protocol, but we weren't completely satisfied with our support. We now went ahead and implemented support for hierarchical data through OData! For an example of this in action you can refer to this new TreeList demo.
If you either attended or kept up with Microsoft Build or Google I/O last week you know that cloud services, especially the cognitive ones, are becoming more and more popular. Obvious integration points with Kendo UI include services that allow for storing data (Azure Cosmos DB for example) but there are also other services that can be utilized along with Kendo UI. As a part of this effort we put together several demos and step-by-step documentation articles for how to work with Kendo UI and cloud services.
If all of this wasn't enough we also wanted to provide our jQuery developers with additional resources around integrating Kendo UI with common frameworks and platforms. We've had some feedback around using Kendo UI in Electron for all of your cross-platform desktop needs, and with R2 2018 we now have a full-blown sample with documentation built to showcase a desktop app developed with Kendo UI and deployed through Electron. To get a taste you can jump over to our Electron documentation section.
As always, anything that I mentioned here is either available in our online demo repository, or our documentation.
Vuex & DropDownTrees with Vue.js
Our UI components for Vue.js also received some updates. One of the biggest items that we took care of between R1 and R2 2018 was official integration with Vuex - the most popular solution for state management in Vue.js. This sample showcases how you would go about taking a few of our UI components, including the data Grid, and working with Vuex.
I already mentioned that this release included a Conversational UI component for all Kendo UI flavors - and Vue is no exception!
Figure 14: Conversational UI Component for Vue.js
We also added in the new component from Kendo UI, the DropDownTree, in the Vue library. As the name indicates, this component combines the power of a hierarchical structure of items all within a DropDown - saving a ton of real estate that would normally be taken up by the TreeView.
Figure 15: DropDownTree for Vue.js
For more hands-on demos and resources around what we've done with Vue.js this release you can refer to the Kendo UI for Vue components overview page.
Updates to ASP.NET MVC and Core
Thanks to the power of the Kendo UI I'm pleased to say that Telerik UI for ASP.NET MVC and Telerik UI for ASP.NET Core also have the new DropDownTree component! I've already explained what the component is throughout this blog post, but as a quick introduction (the name kind of gives this away) the component provides a hierarchical data structure within a DropDown.
Figure 16: DropDownTree in ASP.NET MVC and Core
With the last release, R1 2018, we introduced Tag Helpers for most of our components - including the Grid. This new approach to laying out your ASP.NET components in a more HTML-like declarative fashion is becoming more and more popular within the ASP.NET community. As we've seen a lot of folks start picking up our initial Tag Helpers we wanted to continue the trend and as of R2 2018 all of the Kendo UI components are now available as Tag Helpers! Check out our online demos to see just how your favorite components can be implemented via Tag Helpers.
Just like with the jQuery components, we now support OData v4 fully with the inclusion of the support for hierarchical data through OData. See the jQuery section above for more information.
SignalR has been a popular library for data communication within the .NET world. While we've had support for SignalR for a while, recently SignalR was updated to add support for ASP.NET Core applications in ASP.NET Core 2.1. Since we know this will be an important part of of your ASP.NET Core applications, with R2 2018 we now officially support SignalR within ASP.NET Core 2.1 and our UI components.
For additional highlights you can refer to our UI for ASP.NET MVC demos as well as our UI for ASP.NET Core demos.
More Fun for UI for PHP & JSP
As most of you are aware, UI for PHP and UI for JSP have Kendo UI as a core. Thanks to this these two libraries not only received the new Conversational UI component (covered at the top of this post) but also feature the new DropDownTree component!
Figure 17: UI for PHP and JSP's new DropDownTree
The easiest way to check out the components in action would be to refer to our online demos:
Material Theme Updates
As of R2 2018 all of the Kendo UI for Angular and Kendo UI for React components are now fully styled for our Material theme. This means that if you're either following Material Design guidelines already, or working with other UI components that follow Material, then you can easily add in the Kendo UI widgets and have a uniform look-and-feel across your application.
Figure 18: The Grid with the Material Theme applied
You can see the Material theme in Kendo UI for Angular right here, while on the Kendo UI for React side you have the theme here.
With the previous release we mentioned that Kendo UI, Telerik UI for ASP.NET MVC / Core, Telerik UI for JSP, and Telerik UI for PHP would also all receive the Material theme. Unfortunately, we need a little bit more time polishing this theme so while it is not available today, it will be added in to our list of themes in the next couple of weeks!
Want to See More?
I tried to provide as much information as possible in this post, but it might be tough to consume it all. If you want to see these highlights and more then may I suggest watching our R2 2018 release webinar recording. The wonderful folks on the Kendo UI Developer Advocates team and myself dive into everything covered in this blog post but go even deeper.
Watch the Webinar
Let's Hear the Feedback!
I'm very excited about this release, and I hope you are as well! Are you super stoked about a new component? Anything that you found missing from a feature or component perspective? I want to hear from you! You can provide feedback directly to myself and the Kendo UI team through the comment section below. Just in case I'm also including links to the feedback portals that we offer so you can vote and comment on your favorite new component or feature.