What’s new in Kendo UI Q3 2013?

It’s Kendo UI launch day, once again, and if you joined us in our online keynote this morning, you’ve no doubt already seen many of the exciting new features that we’re releasing under the Q3 2013 banner of “Responsive UI for modern apps.” Our goal this quarter was to deliver a bevy of new features, enhancements and performance improvements designed to help you build compelling desktop and mobile web apps in a snap, and I think we’ve delivered on that promise!

In this post, I’m going to share some of the highlights from Kendo UI Web, DataViz and Mobile. This will be a quick overview, and if you’d like to dig deeper into each of these new and improved features, be sure to check out the “What’s New” pages for Kendo UI Web, DataViz and Mobile, the demo pages for each (Web, DataViz, and Mobile) and the docs.

What’s New in Kendo UI Web

Let’s start with a quick look at Kendo UI Web. While there are a lot of great new features in Kendo UI Web, I’d like to talk briefly about three of my favorites.

Responsive Widgets

This one is a biggie. As you all know, building for “the web” doesn’t quite mean what it used to. These days, instead of targeting a lowest-common-denominator browser or centering our sites in an 800 pixel-wide frame, we have to build for absolutely everything, including devices no one has ever even heard of yet. How positively hipster.

In parallel to the proliferation of the web onto phones, tables, TVs and refrigerators, the practice of “Responsive Web Design” (RWD) has emerged as popular practice for building sites that can accommodate a bevy of screen sizes and experiences. I won’t go into the specifics of RWD here–though I encourage you to read more about it if you’re not already familiar–but I’d posit that they key to RWD is flexibility. When developers build with flexibility in mind, as opposed to a rigid, single viewport design, a site becomes more responsive.

 

Make no mistake, RWD is hard work, and an entire community of practice has formed around the various patterns and techniques available to developers for the construction of responsive sites. The content being produced by this community goes a long way to flattening the adoption curve for RWD, but there’s still no question that the practice, while highly beneficial, requires a lot of time and effort.

On the Kendo UI team, we wanted to do our part in making your journey toward building responsive sites easier, which is why we’ve made all of our widgets responsive, right out of the box. Starting today, all of our widgets are now “container aware” and will adjust consistently when rendered initially across devices. To leverage our new responsive widgets, there’s nothing you need to do other than update to the latest bits!

 

That said, there is a caveat for a few of our widgets. In some cases, you might need to deal with orientation changes or other browser resize events that change the size of the viewport. For most widgets, these changes will cascade and Kendo UI widgets will update accordingly. For a few widgets, like our DataViz charts, a resize is not automatic, which is why we’ve introduced a resizing API that allows you to manually trigger a resize, like so:

$(window).on("resize", function() {
  kendo.resize($(".chart"));
});
 

By calling kendo.resize, we’re instructing Kendo UI to adjust all widgets that match the selector, based on the new size of the viewport.

To learn more, be sure to check out our new Responsive Demo page.

Modern UI Dimensions

Taking the responsive theme a step further, we’ve also done a great deal of work in this release to enable you to better use Kendo UI with popular Layout frameworks like Bootstrap and Zurb Foundation. Our current release includes extensions to all Kendo UI themes, enabling you to adjust values like padding and font-size to accommodate “modern UI” trends and the default UI choices in libraries like Bootstrap.

To learn more, be sure to check out our new Responsive Demo page, where you can see how our Kendo UI Themes adjust to changes in padding and font-size.

New Widgets

Much of the effort for Kendo UI in Q3 was focused on our responsive improvements, but we still found the time to add a few new widgets, in particular Button and ProgressBar widgets.

The Button widget is, just like it sounds, a Kendo UI button. In addition to benefitting from Kendo UI theming and styles, the Kendo UI Button can be styled with icons and images, while providing RTL, Keyboard and MVVM support consistent with the rest of Kendo UI’s widgets.

$("#iconButton").kendoButton({
  spriteCssClass: "k-icon netherlandsFlag"
});

$("#kendoIconButton").kendoButton({
  icon: "funnel"
});

$("#imageButton").kendoButton({
  imageUrl: "/icons/sports/snowboarding.png"
});

 

The ProgressBar also benefits from a self-explanatory name. It’s a visual bar that shows current progress against some goal or absolute value. Many of you have been waiting patiently for this one, so we hope you like it.

var prog = $(this).kendoProgressBar({
  type: "percent",
  animation: {
    duration: 600
  }
}).data("kendoProgressBar");
prog.value(75);

 

To learn more about the Button, head over to the new Button page of the Kendo UI Docs, or check out the Button Demos. To learn more about the ProgressBar, check out the ProgressBar page in the docs, or check out the ProgressBar demos.

What’s New in Kendo UI DataViz

Now, let’s talk about Kendo UI DataViz. There’s some great stuff in this release, including new chart types and a brand new Mapping widget.

Geo Vizualization (BETA)

Mapping and spatial visualization is an increasingly important part of modern apps, and we’re excited to introduce a BETA version of our new DataViz Map widget. The Map widget supports 3rd party tile services like OpenStreetMap, allows the creation of pins and overlays, and can be paired with GeoJSON to create rich geographic visualizations like Choropleth charts, Heat maps and Cartograms.

$("#map").kendoMap({
  center: [51.505, -0.09],
  zoom: 4,
  layers: [{
    type: "tile",
    urlTemplate: "http://tile.openstreetmap.org/#= zoom #/#= x #/#= y #.png"
  }]
});

 

We’ll have a lot more to share about our new Map widget in the coming months, so stay tuned to the blogs for more information! In the meantime, to learn more about the new Map control, head over to the new Maps page of the Kendo UI Docs, or check out the Map Demos.

New Chart Types

Not only have we rolled out some awesome new mapping capabilities today, but we’ve also found the time to introduce two brand new chart types and three new visualizations on our existing charts. The new chart types are:

• Box Plot Chart - Enables the depiction of groups of numerical data via quartiles (i.e. a data set divided into four groups) and uses “whiskers” to indicate variability outside of the range. For more information, check out the demos.
• Funnel Chart - Used to monitor the progression of data through some limiting or reducing factor. Often used to monitor the progression of prospective customers through a sales cycle. For more information, check out the demos.

 

In addition to two new chart types, several existing charts have been “upgraded” to support one or more new visualization options:

• Error Bars - Variation on the line and area chart types where a secondary series of data is overlaid on top of the primary series to display an error range. For more information, check out the demos.
• Step - A step chart is a variation on the line and area chart types that looks like a variation between the line or area and bar chart types. Uses only vertical and horizontal lines to connect data in a series, which creates a step-like progression. For more information, check out the demos.
• Smooth (Spline) - A spline chart is a chart variation that plots a smooth curve (as opposed to a straight line) through each data point in the series. For more information, check out the demos.

 

What’s New in Kendo UI Mobile

In keeping with our Q3 2013 theme, many of the new Mobile features of Kendo UI are focused on delivering great experiences across devices. Let’s look at a couple of these now.

Adaptive Grid and Scheduler Widgets

As I discussed in a blog post from last month, RWD is a great idea for UI widgets, but things get tricky when the widget in question is too complex to just “squish” onto a smaller screen. In Kendo UI’s case, the Grid and Scheduler fit that complexity bill. Sure, we could have just jammed those into a smaller container and checked a box, but we figured we could do one better.

With this release, we’re introducing “adaptive” enhancements for the Grid and Scheduler, meaning that these widgets not only change up styling to look great on devices, but they also subtly adapt their behavior to remain consistent with a device experience. For instance, when filtering a grid or entering a new appointment on a mobile device, Kendo UI will slide in a new screen for the user, which is a departure from the more desktop-like inline and popup behaviors. I highly recommend heading over to the demos to see these features in action.

 

iOS 7 Support

Finally, while this isn’t new news, it’s worth mentioning again that Kendo UI Mobile has full support for iOS 7, which we’ve had from day one. If you’re looking to build mobile apps that support Apple’s latest mobile OS, or even support both iOS 7 and iOS 6 and previous at the same time, Kendo UI Mobile is the solution for you. Our iOS 7 support was released in our Q2 2013 Service Pack, and is now available in all versions of Kendo UI Mobile, Complete and our Wrappers SKUs.

And so much more!

The Kendo UI Q3 release is massive, and this post just scratches the surface. In addition to the items mentioned above, there’s a TON of additional goodies to be found in the latest bits, and I encourage you to check them out!

Download the Q3 2013 Release Now!

We just covered a lot of territory in a short time, but thanks for sticking with me in this high-level overview of some of what’s new in the Kendo UI Q3 2013 release. I hope I’ve been able to whet your appetite to try the new bits out. If so, go check it out for yourself now.

As always, its up to you to tell us what features you need and want from Kendo UI. I’ll be working with the team over the next several weeks to plan out our next release, so if you have a burning need, please visit us at our UserVoice portal today and give us your feedback!

Links

• Download the Kendo UI Q3 2013 Release
• Kendo UI Demos
• Kendo UI Documentation
• What’s new in Web
• What’s new in DataViz
• What’s new in Mobile