What's new in Kendo UI Q2 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 Q2 2013 banner of “Modern, Mobile and Lightning Fast.” 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, as well as a new tool that we’re releasing in BETA form via the Kendo UI Labs. 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.

“Flat UI” Theme

First up is the new, “Flat UI” Theme. As many of you are aware, “Flat” and “almost flat” design are emerging as modern UI trends across desktop and mobile apps. Apps like Google+ and Gmail on Android and iOS, and Letterpress on iOS are great examples of how this style can produce compelling and beautiful apps, and we believe this style is a natural choice for a new theme for Kendo UI.

The Flat theme is available today with the Kendo UI Q2 release, so we hope you’ll start playing with it in your own apps. Also, if you’re interested in seeing this new theme in action, be sure to check out the Kendo UI Bootstrapper (details below) which was built using this new theme.

Scheduler (BETA)

Next up is a new widget that, as Burke Holland said in his demo during this morning’s keynote, needs no introduction: the Scheduler.

As it just so happens, the Scheduler is one of the most popular UserVoice items you all have ever entered, receiving over 600 votes and 44 comments on that single item alone. Needless to say, it was clear to us that you all really wanted this widget baked into Kendo UI!

Today, I’m happy to announce that we’re releasing a Beta version of the Kendo UI Scheduler. As with the rest of our awesome widgets, getting started with the scheduler is simple:

$('.schedule').kendoScheduler({
    date: new Date("2013/6/13"),
    startTime: new Date("2013/6/13 07:00 AM"),
    height: 600,
    views: [
        "day",
        { type: "week", selected: true },
        "month",
        "agenda"
    ],
    timezone: "Etc/UTC",    
    resources: [{
        field: "cityId",
        dataSource: [
                { text: "Austin", value: 1, color: "#1c9ec4" },
                { text: "Nashville", value: 2, color: "#ff7663" },
                { text: "Waco", value: 3, color: '#fd7322' }
        ],
        title: "City"
    },
    {
        field: "member",
        dataSource: [
            { text: "Brandon", value: 1, color: "#ef701d" },
            { text: "Burke", value: 2, color: "#5fb1f7" },
            { text: "Derick", value: 3, color: "#35a964" }
        ],
        multiple: true,
        title: "Team Members"
    }]
});

In this example, which you can view in the Fiddle below, I’m adding a simple widget, setting its height and views, and also adding some City and Team Member resources, which you can see in the Event window by double-clicking or tapping on any space inside of the calendar.

Before I move on, I want to note that this particular widget has a “Beta” tag because, well, Schedulers are huge! Imagine taking most of the features of the Outlook calendar or Google Calendar and putting them into a single widget. That’s immense, and with a job that big, we wanted to make sure we got it right. So we’re providing you with a first look at what we’ve done so far so that you can try it out and give us your feedback. In the meantime, we’ll continue adding additional features to the Scheduler with the goal of dropping the Beta tag as early as possible in Q3.

To learn more, head over to the new Scheduler page of the Kendo UI Docs, or check out the Scheduler Demos.

Editor Enhancements

Next, I’d like to talk about the Editor. This widget has been with us from the beginning, but it got some serious love in Q2. In particular, we added:

• Tables support
• Format clearing on pasted content
• Ability to show the editor toolbar on focus
• In-place editing capabilities
• Responsive support

The last two features are really exciting, and you can view them in action via the Fiddle below. If you click inside any of the content columns at the bottom of the demo, you’ll notice that the text is editable and a slick editor toolbar snaps into place above the content area. You can also view the responsive features of this widget in action if you resize your browser window.

To learn more, check out the Editor docs, as well as the brand new Editor 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 widgets, new chart types, and support for Canvas rendering mode in charts.

Bar and QR Code Widgets

In addition to the fantastic charts and gauges we already ship with Kendo UI DataViz, we’ve added a couple of new widgets for creating QR and barcodes in your web and mobile apps. For example, if I wanted to create a QR code to open an Amazon product page, I could do so by adding the following initialization code to my app:

$("#qrCode").kendoQRCode({
    value: "http://www.amazon.com/gp/product/B009KZ3SLE",
    errorCorrection: "M",
    size: 240,
    border: {
        color: "#000000",
        width: 5
    }
});

And I get a nice, digital and scannable QR code, as shown in the Fiddle below:

Creating barcodes is also a snap, and we offer support for 19 different encodings, including UPC, EAN and Code39.

$("#barcode").kendoBarcode({
    value: "234569",
    type: "upce",
    width: 300,
    height: 200
});

And the result of the code above can be seen in the Fiddle below.

For more information about these new widgets, check out the QRCode and Barcode docs, as well as the QRCode and Barcode demos at demos.kendoui.com.

Radar and Polar Chart Types

In our current release, we’ve also added a couple of new Chart types, Radar and Polar charts, both of which excel at plotting multiple series’ of quantitative data on a radial axis. Here’s an example of a Polar chart, taken from my demos from this morning:

$('#radar').kendoChart({
    theme: "bootstrap",
    title: { text: "Distribution of Runs By Time of Day"},
    legend: { position: "bottom" },
    dataSource: shoesDataSource,
    seriesDefaults: { type: "radarLine" },
    series: [{
        name: "Morning Runs",
        field: "MorningRuns"
    },
  {
        name: "Afternoon Runs",
        field: "AfternoonRuns"
  }],
    categoryAxis: {
        field: "Name"
    },
    tooltip: {
        visible: true
    },
    valueAxis: {
        labels: {
            template: "#= value # mi"
        }
    }
});

In this example code, I’m configuring a chart that will map out the distribution of my runs by the shoe I used for that run, and the time of day that run was performed. The code above, plus the DataSource that you can view in the example code, will produce the result in the Fiddle below.

As you can see, this chart type allows me to quickly view information about which shoes I run in most often, and which times of day are most popular, by shoe. It’s a powerful visualization, and we’re excited to have them in this release.

To learn more about Radar and Polar charts, check out the Radar and Polar chart docs, as well as the Radar and Polar chart demos at demos.kendoui.com.

Canvas Chart Rendering

One of the biggest beneficiaries of the “Modern, Mobile and Lightning Fast” theme for Q2 is DataViz, which includes a brand new HTML5 Canvas rendering mode in this release. As you all know, we’ve always been big fans of SVG for our charts and graphs, mainly because the “resizability” of SVG graphics, and their ability to perform well when animated.

That said, we recognize that Canvas is sometimes a better option for graphics rendering, especially for older Android devices (which don’t support SVG), in some mobile contexts, or in cases where a large number of charts are needed on a single page.

As of today, Canvas rendering mode is available on all Charts and Gauges via a new render configuration option:

$("#chart").kendoChart({
    render: "canvas",
    series: [{
        type: "pie",
        data: [1, 2]
    }]
});

Three of our existing widgets, Sparklines, QRCodes and Barcodes use the new Canvas option by default, and you’re free to use this mode in your apps as well, when the need arises. What’s more, Canvas mode now allows us to provide a Data URL for all charts and gauges, via the new imageDataURL method. To learn more about these new features, check out the DataViz chart docs.

What’s New in Kendo UI Mobile

Now let’s look at Kendo UI Mobile, where performance, a new widget, a uniform theme and ASP.NET MVC wrappers for Kendo UI Mobile make for a jam-packed release!

Performance Upgrades

As we detailed in this morning’s online keynote, performance was a big part of the focus for Kendo UI Mobile in Q2. We recognize that investing in a framework like Kendo UI Mobile means that you believe in the power of HTML5 to build cross-platform web and hybrid mobile apps. We do too, and we also believe that, with the right tools, you can build apps that look, feel and perform just like their native counterparts. In order to deliver on the promise of HTML5 via Kendo UI, we:

• Improved the speed of all view transitions by 200%, out of the box
• Added support for virtualized endless scrolling in the mobile ListView
• Added a “flat ui”-inspired Uniform theme, which improves the on-device performance of mobile web and hybrid apps by 30%.

The result is a Kendo UI Mobile that’s faster and better than ever!

Uniform Mobile Theme

In addition to providing some across-the-board performance improvements, we built the new Kendo UI Mobile theme recognizing that, sometimes, you want to build an app that communicates your brand consistently, across devices. That’s easier than ever with the new theme, which you can enable via you app’s initialization code:

var app = new kendo.mobile.Application(document.body, { skin: "flat" });

Drawer Menu Widget

We also added a new Drawer menu widget in Q2. The Drawer menu, which we’ve increasingly observed in mobile apps like Facebook, Runkeeper and others, enables you to add a separate menu view to your app, which slides into the user’s viewport from the left or the right when a menu button is tapped. For example, let’s say I want to add a drawer menu for a mobile shoe tracker app:

<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['home', 'shoes', 'races']">
    <ul data-role="listview" data-type="group">
        <li>Kendo Runner
            <ul>
                <li data-icon="contacts"><a href="#home">Runs</a></li>
                <li data-icon="favorites"><a href="#shoes">Shoes</a></li>
                <li data-icon="featured"><a href="#races">Races</a></li>

            </ul>
        </li>
        <li>Tasks
            <ul>
                <li>Find a Race</li>
                <li>Add a Shoe</li>
                <li>Add a Run</li>
                <li>Order Shoes</li>
            </ul>
        </li>
        <li>Account
            <ul>
                <li data-icon="settings">Settings</li>
                <li data-icon="off">Log Out</li>
            </ul>
        </li>
    </ul>
</div>

When rendered in my mobile app, I get a nice slide out menu, as shown in the image below.

To learn more about the new Drawer widget, check out the Drawer widget docs, as well as the online Demos.

MVC Wrappers for Kendo UI Mobile

Q2 also includes the very first set of Server Wrappers for Kendo UI Mobile, specifically for ASP.NET MVC. This feature builds on the server navigation features we offered last quarter, and allows you to build Kendo UI Mobile apps that rely on ASP.NET MVC as the backend and Razor or WebForms as the ViewEngine. If you’re already using the wrappers for Web or DataViz, the syntax for Mobile will be familiar. Here’s an example using the new Drawer widget:

   @(Html.Kendo().MobileDrawer()
      .Name("drawer")
      .HtmlAttributes(new { style = "width: 270px" })
      .Views("people-viewer", "drawer-friends")
      .Content(obj => 
          Html.Kendo().MobileListView().Type("group")
              .Items(root => {
                root.Add().Text("Tasks").Items(items =>
                {
                  items.AddLink().Icon("home").Url("/home/people").Text("Home");
                  items.AddLink().Icon("contacts").Url("/home/friends").Text("Friends");
                  items.Add().Text("Romans");
                  items.Add().Text("Countrymen"); 
                });

               root.Add().Text("Account").Items(items =>
               {
                 items.Add().Icon("settings").Text("Settings");
                 items.Add().Icon("off").Text("Log Out");
               });
          })
       )
    ) 

    @(Html.Kendo().MobileApplication()
        .ServerNavigation(true)
    )

To learn more about the new Server Wrappers for Kendo UI Mobile, check out the online docs. You can also view the wrapper code for any of the Kendo UI Mobile demos at demos.kendoui.com.

What’s New in the Kendo UI Labs

Since launching the Kendo UI Labs in March, we’ve seen a ton of interest in our existing projects, as well as a bevy of new projects in the organization. In May and June, I published a few blog posts highlighting all of the activity in the labs, and highlighting our awesome core team members, and I encourage you to check those out:

• This Month in the Kendo UI Labs, May 2013
• This Month in the Kendo UI Labs, June 2013

Kendo UI Bootstrapper (BETA)

In addition to the great labs projects we’ve added to date, I’m happy to announce our biggest labs project to date, the Kendo UI Bootstrapper! The Boostrapper is a standalone utility that’s designed to compliment your Kendo UI app development workflow by providing support for app scaffolding, performing live updates to running apps, running static analysis on project code, and producing optimized build assets. It’s not an IDE, though; it’s the perfect compliment to whichever IDE you’re using today.

To check out the bootstrapper for yourself, you can watch the intro video below, or download and start using it at labs.kendoui.com.

And so much more!

The Kendo UI Q2 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, including:

• TypeScript 0.9 compatibility
• HTML5 Form attribute support for MultiSelect, ComboBox, Date/Time pickers, DropDownList, NumericTextBox
• A redesigned Upload widget
• A new Mobile app init event
• A Mobile slider widget
• An updated Blackberry Theme to match BB10 styling
• Hierarchical ListView support for Mobile
• ListView virtualization for endless scrolling and press to load more
• Annotation support for DataViz Charts
• DataViz Chart scrolling improvements
• and more!

Download the Q2 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 Q2 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 Q2 Release
• Kendo UI Demos
• Kendo UI Documentation
• What’s new in Web
• What’s new in DataViz
• What’s new in Mobile
• Kendo UI Wrappers
• Kendo UI Labs
• Kendo UI Bootstrapper