Kendo UI Q1 2012 Beta Overview

Yesterday we pushed the official beta of our upcoming Q1 2012 Kendo UI release! This release contains previews of much (but not all) of what you’ll find in the upcoming March release bits, and it’s your chance to get hands-on with the next wave of Kendo UI and provide your feedback while there’s still time to make changes.

The Q1 2012 Kendo UI release is going to be EPIC. Not only does it represent the official release of Kendo UI Mobile, but it will also include big additions to Kendo UI Web and DataViz. As a result, this beta release is EPIC, and there’s a ton of new stuff going on.

Otherwise, while there’s far too much to cover in a single blog post, let me quickly highlight some of the...highlights.

Kendo UI Web

Kendo UI Web (and the related Kendo UI “Core” framework components) is the foundation of Kendo UI. This is where we started with our freshman release late last year, and things are only getting better in the first release of 2012. There are two areas to examine: UI Widgets and Framework Components.

UI Widgets

This week’s beta includes some awesome JavaScript UI widgetry. We have introduced two new UI widgets, Editor and ListView, and we have significantly improved others, most notably Grid.

You asked and we delivered. As one of the top requests on the Kendo UI UserVoice, the new Editor provides an awesome, easy-to-use (WYSIWYG) rich text editor for your JavaScript front-ends. While this is just v1 for what is probably one of the hardest types of web controls to create, it already offers some compelling features, including:

Identical HTML output across major browsers (this is huge)

API for content manipulation

Support for core text formatting options (lists, alignment, styles)

Built-in hyperlink/image dialogs

Editor turns any plain HTML textarea in to a rich editing experience with a single line of code.

The new ListView gives you the power of a Grid (sorting, paging, selecting, editing) without the rigid column/row layout. Instead, you get complete control over the layout for each item in the ListView while the widget just helps you organize and manipulate those items. It’s a sweet deal.

The beta supports all of the behaviors listed above (sorting, paging, selecting, editing) and it can be bound to local or remote JSON data. To support editing, the ListView allows you to define Kendo UI Templates for item display and edit modes.

Love ‘em or hate ‘em, grids are everywhere and super important to business developers. A great grid gives you all of the power you need while keeping configuration simple so you get your job done and not waste hours trying to customize and hack. With Q1 2012, the Kendo UI Grid extends its already rich feature set with a few important additions.

Editor CustomizationYou can now easily define custom editors for specific Grid columns, allowing you to (for example) use other Kendo UI widgets to improve the usability of your editing experience.

Popup EditorPopup edit mode joins the existing “Inline” edit mode with this release. Via a simple configuration toggle, you can now choose to have Grid edits automatically happen in a overlay Kendo UI Window instead of embedded inline.

AggregatesFinally, aggregate support is now baked-in to the Grid, making it possible to perform count, sum, min, max, and average calculations on your Grid data. When combined with existing features like grouping and sorting, the Grid can now tackle a wider range or data crunching scenarios.

Framework Components

The UI widgets in Kendo UI Web often steal the show, but there are some awesome things happening below the visible surface with Kendo UI’s framework components. So far, we’ve already delivered some awesome JavaScript implementations for templating, drag-and-drop, validation, globalization, and data binding. In this next release, we add one more big one:

Like grids, some people love MVVM, others don’t. Either way, it’s a popular way for many JavaScript developers to simplify the complex process of syncing application UI with underlying data changes. Kendo UI’s new MVVM implementation aims to make easy for MVVM fans to use this pattern, especially when combined with Kendo UI widgets.

MVVM is far, far too big of a topic to properly cover in this post, so you can be sure we’ll be posting more on Kendo UI MVVM soon. In the meantime, check-out the new beta demos and be sure to review this blog post to understand (in part) why we decided to build MVVM instead of directly reusing existing popular options, like KnockoutJS.

Kendo UI DataViz

Kendo UI DataViz is the second of three current Kendo UI pillars. Today, Kendo UI DataViz licenses are complimentary with purchases of Kendo UI Web, but in March Kendo UI DataViz will graduate and become available separately from Kendo UI Web for those that want awesome HTML5 data viz in their sites and mobile apps. Kendo UI DataViz will be a premium part of Kendo UI and unlike Kendo UI Web (which is dual-licensed, Open Source and Commercial), Kendo UI DataViz will be available to commercial licensees only.

That said, there are three primary highlights for the upcoming Kendo UI DataViz release: New Chart Type, Multi-Axis support and the introduction of Gauges.

This release adds one major chart type: Area. The area chart type should be familiar to most developers, but its addition to Kendo UI gives you even more power to display and overlay data. With the addition of Area, you can now create Bar, Column, Line, Pie, Scatter, and Area charts with Kendo UI DataViz.

This is another highly requested Kendo UI DataViz feature we’re happy to add in this release. You can now define multiple axis in certain chart types and plot more complex data relationships on a single chart.

Also, in case you missed it in the Kendo UI service pack, Kendo UI DataViz also now includes support for chart Plot Bands.

We’re very excited to add basic gauges to Kendo UI DataViz in this release. This is the first step of many that will expand Kendo UI DataViz to cover more data visualization scenarios beyond basic charting. In the beta, you will find the new Radial Gauge, but we will also add Linear Gauges for the official release. The gauges, like charts, are pure HTML5, which means they’ll run in desktop browsers (including older versions of IE) and mobile devices!

Kendo UI Mobile

Phew! In classic infomercial style, “But wait, there’s more!”

Kendo UI Mobile is huge addition to Kendo UI. We delivered the first public beta in January, and so far the feedback has been outstanding. In addition to incorporating much of the beta feedback, the March release will also add a few more features that did not get included in the original beta. In fact, in this update you’ll already find a few new additions to Kendo UI Mobile:

The Kendo UI Mobile ListView now has the super helpful “Pull to Refresh” behavior. When enabled, the ListView will automatically provide the expected interaction and messages that let an user “pull” a list down to trigger a data refresh.

In addition to supporting automatic UI adaptation to iOS and Android, Kendo UI Mobile can now also automatically adapt to Blackberry! While iOS and Android rule the consumer roost, we know Blackberry is still a huge target for business users and apps. With Kendo UI, you can now target all three with relative ease and consistent, native-like experiences.

I wish I could say “that’s it,” but it’s not! That’s just the biggest things happening in Kendo UI for this next release. You’ve really got to try it to appreciate the full scope of this release. Download your copy of the Kendo UI Q1 2012 beta now and then let us know what you think. We’re super excited by the scope and quality of this release, and we think it sets the bar appropriately high for the other two major releases coming in 2012.

What do you think? What do you like most from the latest beta? Let us know, share the beta with your friends, and then stay connected with Kendo UI as we prepare for the official Q1 release in a few weeks!

Todd Anglin

Todd Anglin is Vice President of Product at Progress. Todd is responsible for leading the teams at Progress focused on NativeScript, a modern cross-platform solution for building native mobile apps with JavaScript. Todd is an author and frequent speaker on web and mobile app development. Follow Todd @toddanglin for his latest writings and industry insights.

Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks for appropriate markings.