Blogs

It seems like only yesterday that we announced the roadmap for the Q2 release of Kendo UI, and yet, here we at launch day! Several weeks ago, we shared the first preview of what’s coming in Q2 with the Beta release of Kendo UI Complete for ASP.NET MVC, along with the Q2 Beta for Kendo UI proper, last month.

Today, I’m excited to announce that Kendo UI Q2 is live, and that your favorite JavaScript framework is stuffed like a barrel of monkeys with new features and enhancements. To introduce the new bits, I thought I’d put together a quick, whirlwind tour of some of my favorites, and in this post, I’ll share two each from Kendo UI Web, DataViz and Mobile. If you want to follow-along at home, you can head on over to the Download page to grab the Q2 bits now.

Ready? Let’s get started.

What’s New in Kendo UI Web

We’ve been hard at work on Kendo UI Web for this release, and are excited to share both killer enhancements to existing widgets as well as some new widgets for your developing pleasure. Let’s take a look at one of each.

DataSource Support for TreeView

The first feature I’d like to show off if actually an enhancement to an existing widget, the TreeView. Historically the Kendo UI TreeView widget has not offered support for binding to remote data, but I’m happy to share that with the Q2 release, that’s no longer the case. As of today, you can easily create a TreeView and bind it to a DataSource.

Of course, the classic DataSource widget lacks a few features we needed to support the TreeView and other, similar widgets, so this release also introduces the HierarchicalDataSource object, which extends the Kendo UI DataSource and adds support for defining hierarchical relationships among sets of data.

Creating a HierarchicalDataSource is our first step in creating a DataSource-aware TreeView, so let’s start by defining some child data, a common scenario for Tree-based visualizations:

 
var OrderDetails = {
  type: "odata",
  transport: {
    read: {
      url: function(options) {
      return kendo.format("http://services.odata.org/Northwind/Northwind.svc/Products({0})/Order_Details", options.ProductID);
      }
    }
  },
  schema: {
    model: {
      hasChildren: function() {
        return false;
      }
    }
  }
};

var Products = {
  type: "odata",
  transport: {
    read: {
      url: function(options) {
        return kendo.format("http://services.odata.org/Northwind/Northwind.svc/Categories({0})/Products", options.CategoryID);
      }
    }
  },
  schema: {
    model: {
      id: "ProductID",
      hasChildren: "Order_Details",
      children: OrderDetails
    }
  }
};

I’ll start by creating two objects to represent the child data for my TreeView, which will be a total of three-levels deep. First, I specify an OrderDetails object. This object should look mostly familiar, with the exception of the model’s new hasChildren property function. This function is how I specify relationships between other objects in my DataSource. In this case, OrderDetails represents my innermost object, so its hasChildren function will simply return false.

Next up is the Products object, which is the immediate parent of the OrderDetails object. As a parent object, its model object specifies both the name of the object that contains related children, OrderDetails, as well as the relative endpoint of the service used to request the children of an item (“Order_Details”).

Next, I’ll create my top-level object, the HierarchicalDataSource.

 
var Categories = new kendo.data.HierarchicalDataSource({
  type: "odata",
  transport: {
    read: {
      url: "http://services.odata.org/Northwind/Northwind.svc/Categories"
    }
  },
  schema: {
    model: {
      id: "CategoryID",
      hasChildren: "Products",
      children: Products
    }
  }
});

Similar to the Products object does with its parent relationship to OrderDetails, I’ll specify the Products object as the immediate child of the DataSource, and set it’s relative service endpoint. With my data configured and ready to go, I can now bind a TreeView to the new HierarchicalDataSource.

$('#productsTree').kendoTreeView({
  dataSource: Categories,
  dataTextField: ["CategoryName", "ProductName", "OrderID"]
});

The biggest difference here compared to the traditional TreeView is the dataTextField array property. Since the TreeView will be bound to three different objects, we’ll need to specify the field to be used to display the text of each element in the tree when a given child is rendered. Here’s a look at the end result with some dummy Northwind data.

The HierarchicalDataSource creates a world of possibilities for working with related data, and it really expands the utility of the TreeView. For more information about each check out docs.kendoui.com

Combined DateTimePicker Widget

The next new feature we’ll look at is the new combined DateTimePicker widget. This has been a popular request on our UserVoice portal, and we’re happy to add this to the Q2 release. As the name indicates, the DateTimePicker widget allows you to utilize a single widget with a simple interface for capturing both date and time data in a text field. Here’s an example:

$('#appointmentTime').kendoDateTimePicker({
  format: "MM/dd/yy hh:mm tt",
  interval: 10,
  value: new Date(2012, 05, 22, 10, 30, 0)
});

As you can see, the DateTimePicker is just as simple to use as the DatePicker and TimePicker are, while combining the configuration settings offered by each. In this case, I’m setting the full date and time format with the format property, specifying an interval in the time picker to 10 minutes and finally, setting a default date. You can see the result below.

To learn more about the DateTimePicker widget, go head over to docs.kendoui.com.

What’s New in Kendo UI DataViz

The Q2 release of Kendo UI DataViz introduces some new chart types, along with a bunch of enhancements to existing types. Let’s take a look at an example of each now.

Donut Chart Type

One new chart type we’re releasing with Q2 is the “Donut” chart. Donut charts are similar in look and functionality to pie charts, with the exception that they consist of an empty center. Often this look is used to provide an alternative feel to the classic pie, though the empty center can also be used to stack multiple sets of statistics together for a comparative view.

For this post, I’ll create a simple Donut chart to display doughnut consumption among members of the Kendo UI team. Let’s start with some raw data: a listing of team members and their percentage share in the total consumption of doughnuts.

var data = [{
  name: "Burke",
  pctConsumed: 54
}, {
  name: "Brandon",
  pctConsumed: 11
}, {
  name: "John",
  pctConsumed: 18
}, {
  name: "Stefan",
  pctConsumed: 7,
  winner: true
}, {
  name: "Todd",
  pctConsumed: 10
}];

The numbers don’t lie. Burke is a big fan of doughnuts. With this data in hand, I can create my chart.

$('#doughnutConsumption').kendoChart({
  theme: "BlueOpal",
  title: {
    text: "Doughnut Consumption by Team Member"
  },
  dataSource: data,
  series: [{
    type: "donut",
    field: "pctConsumed",
    categoryField: "name",
    explodeField: "winner"
  }],
  tooltip: {
    visible: true,
    template: "${ category }: ${ value }%"
  }
}); 

As with other DataViz charts, the kendoChart object is my entry-point into this API. To specify that my data should be rendered as a donut chart, I simply use the “donut” type and specify both data field and categoryField values. For the donut chart, I can also specify an “explodeField,” a Boolean value in my DataSource that will determine if a given segment of the chart should be “exploded,” or called out from the rest. In this case, the explode field belongs to the “winner,” or person who consumed the smallest percentage of doughnuts. The game of doughnuts is much like golf in that regard. Here’s a look at the finished product:

To learn more about the Donut chart type, go check out the docs at docs.kendoui.com.

Date Axis Support for Charts

Another new feature we’re excited to release with Q2 is formal support for date axes on charts, which greatly simplifies working with date series data in Kendo UI DataViz. For instance, let’s say I want to visualize sales data over individual dates, spread across three months.

$('#donughtSales').kendoChart({
  theme: "BlueOpal",
  title: {
    text: "Donughts Sold per Month"
  },
  series: [{
    type: "column",
    data: [500, 405, 65, 10, 345, 55, 400],
    aggregate: "avg" 
  }],
  categoryAxis: {
   baseUnit: "months",
   categories: [
      new Date("2012/05/18"),
      new Date("2012/05/19"),
      new Date("2012/05/20"),
      new Date("2012/06/21"),
      new Date("2012/06/22"),
      new Date("2012/07/30"),
      new Date("2012/06/31"),
     ]
   }
});

Using the new date axis support is as simple as specifying JavaScript Date objects in the “categories” array of the “categoryAxis” property. In this example, I’m using a column chart with seven pieces of sales data, one each for a day of the month. Then, I’ll specify a baseUnit value of “months” and the series aggregate of “avg” to display my data as an average for each month in which I’ve provided data. Here’s a look at my final chart:

We’re excited to make working with dates in DataViz charts that much easier, so try it out for yourself today, and let us know what you think. To learn more about date series in Kendo UI DataViz, check out the online docs at docs.kendoui.com.

What’s New in Kendo UI Mobile

Back in April, we announced that one of the major themes of our Q2 release was the addition of iPad-specific UI to our Kendo UI Mobile suite. In the SP1 release, we announced the addition of the ActionSheet widget, and today I’m excited to announce another iPad/tablet-specific feature, the SplitView, which allows you to add landscape-friendly split screen UI to your Kendo UI Mobile apps, similar to that offered in the native Mail app on the iPad.

SplitView Layout

To use the SplitView layout, you’ll first need to define two or more mobile Pane widgets inside of a div with a data-role of “splitview.”

 <div data-role="splitview">
  <!-- Side Pane -->
  <div data-role="pane" id="side-pane">
    <div data-role="view" data-title="Speakers">
	<ul data-role="listview" data-style="inset" data-type="group">
	  <li> Speakers
	    <ul>
		<li><a href="#burke" data-target="main-pane">Burke Holland</a>
             </li>
		<!-- Other speakers -->
	    </ul>
          </li>
	  <li> Topics
		<ul>
		  <li><a href="#web" data-target="main-pane">Web</a></li>
		  <!-- Other topics -->
		</ul>
	    </li>		       		
	  </ul>
	</div>
    </div>

    <!-- Main Pane --> 
    <div data-role="pane" data-layout="main-default" id="main-pane">
      <div data-role="view" data-title="Speakers and Topics">
	  No Speaker or Topic selected
	</div>

      <div data-role="view" data-title="Burke Holland" id="burke">
        <!-- Additional layout here -->
      </div>
      <!-- Other speakers -->
    </div>
			
    <div data-role="layout" data-id="main-default">
      <div data-role="header">
	 <div data-role="navbar">
	   <span data-role="view-title">Speakers</span>
        </div>
      </div>
    </div>
  </div>
</div>

There’s a lot of markup here, but the idea is pretty simple: I create a main container for my SplitView layout, and then place two or more divs directly inside with a data-role value of “pane.” The divs are rendered in order and given a 1:2 size proportion (a value that can be changed, btw), similar to native iOS apps that use this layout. Simple hyperlinks will link to other elements in a pane, or I can use the data-target attribute to specify a link on another pane, as illustrated above. In this case, When I click on Burke’s name in the side pane, the view with an id of “burke” is rendered in the main window, like so:

We’re excited to add the SplitView to this quarter’s collection of tablet-specific UI for Kendo UI Mobile, and we hope you like it. To learn more, head over to docs.kendoui.com.

ModalView Widget

The final new Q2 feature I want to show off in today’s post is the ModalView widget, a widget that you can use to create native-looking modal windows on iOS, Android and Blackberry devices. Continuing with our SplitView example, I’ll create a ModalView for sending an email to Burke when the user clicks on the “Contact Burke” button.

 
<div data-role="modalview" id="contact">
  <div data-role="header">
    <div data-role="navbar">
      <span>Contact Burke</span>
	  <a data-click="closeSendMessage" data-role="button" data-align="right">Cancel</a>
    </div>
  </div>

  <ul data-role="listview" data-style="inset">
    <li><label for="fromEmail">From:</label> 
        <input type="text" id="fromEmail" />
    </li>
    <li><label for="Message">Message:</label><br /> 
        <textarea id="message">You are teh awesome, Burke!</textarea>
    </li>
  </ul>
  <a data-click="closeSendMessage" id="messageSend" type="button" data-role="button">Send</a>
</div>

The ModalView widget is defined in a similar fashion to other View widgets, and just as the View widget itself, can contain any markup you require. The real difference is in how it’s presented to the user. To initiate a ModalView, I’ll add a few attributes to my “Contact Burke” button:

  <a href="#contact" data-rel="modalview" data-icon="action" data-role="button">Contact Burke </pre>

The two relevant attributes are the data-rel and href attributes. Data-rel tells Kendo UI Mobile that the target is a ModalView widget, which the href points to by id. Here’s the end result:

The ModalView has been designed for both tablet and phone experiences, so you’re free to use for either when your app wants to perform some task without navigating away from the user’s current context. You can read more about the ModalView at docs.kendoui.com.

Docs.Kendoui.com

In this post, you might have noticed a few mentions of our new documentation site. With the official Q2 release of Kendo UI, we’ve also launched docs.kendoui.com, our new home for all your documentation needs, including api reference, getting started guides, tutorials and more. This new site was designed from the ground up to deliver a better docs experience to you, while making the authoring process for us simple and efficient. If you haven’t yet, check out the new site, docs.kendoui.com.

Oh, and did we mention that our docs are now open sourced? Yep, all of our documentation source now lives over at http://github.com/telerik/kendo-docs under an MIT license. You’re free to grab or copy, enter issues telling us what needs improvement or even send us a pull request! And we’re serious about that last part. So serious that we’re going to raffle off an iPad to one lucky committer who sends us an accepted pull request between today and July 18th. Interested? Head on over to the site to learn more.

Download the Q2 Release Today!

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. I hope I’ve been able to whet your appetite to try the new bits out, so go check it out for yourself now.

Also, don’t forget that our first set of server wrappers, Kendo UI Complete for ASP.NET MVC, also launched today, and you can check them out for yourself, or read Burke Holland’s excellent blog post to get an overview of the new wrappers. We’ll be adding more details about the wrappers here on the blog, as well as over at our new docs site, docs.kendoui.com so keep your browser’s fixed there and here for details.

As always, its up to you to tell us what features you need and want from Kendo UI, so visit us at our UserVoice portal today and give us your feedback!

About the Author
Brandon Satrom (@BrandonSatrom) is Product Manager for Kendo UI and is based in Austin, TX. A unapologetic lover of the web, Brandon loves to talk about HTML, JavaScript, CSS, open source and whatever new shiny tool or technology has distracted him from that other thing he was working on. Brandon loves writing and speaking and loves hanging out with and learning from other passionate developers, both online and in person. He blogs on occasion at UserInExperience.com