• New! ActionSheet introduced in the Q1 2012 SP of Kendo UI Mobile (v2012.1.515)
• ActionSheet displays a set of choices related to a task the user initiates
• Super-easy to add the ActionSheet to your apps built on Kendo UI Mobile
• Easy to add ActionSheet to existing Kendo UI Mobile applications (i.e. TeamThing)

Introduction

In case you missed it, we shipped a service pack for the Q1 2012 release of Kendo UI last week. This service pack includes many updates, fixes, and enhancements to all three collections of Kendo UI (Web, DataViz, Mobile). For the release, I wrote a blog post that provided a high-level overview of what’s new. Unfortunately, I neglected to highlight the ActionSheet that we introduced in Kendo UI Mobile.

In my defense, it’s always a challenge to cover everything for our releases!

Introducing the ActionSheet

The purpose of the ActionSheet is to display a list of actions based on user interaction. The ActionSheet provides a native-like menu across all platforms supported by Kendo UI Mobile. In every case, a cancellation button is provided for the user to revoke the action. Additionally, it provides a title bar on Android and BlackBerry devices.

Here’s an example of an ActionSheet that could be displayed when a user selects an email:

ActionSheet of Kendo UI Mobile

The ActionSheet is useful in situations when you want to provide a user with a quick, contextual menu to perform a task. It may also be used to confirm a user’s choice before conducting an action with potentially significant consequences (i.e. deleting an email).

Getting Started

An ActionSheet is displayed when a user interacts with navigational widgets such as a ListView. Adding an ActionSheet to your Kendo UI Mobile is pretty simple. Let’s assume the following example:

An ActionSheet is a ul element with a role data- attribute set to actionsheet. (Alternatively, the ActionSheet can be initialized via a jQuery selector.) It’s a widget that you’ll define within the context of a View like so:

In the example (above), each action is represented by a li element with a nested anchor that contains an action data- attribute. The purpose of the action data- attribute is to specify a callback method to be executed when the user clicks/touches it. For example, when the user clicks/touches the Reply option, the reply callback is triggered.

The callback receives a object with two fields: target and (optional) context as a parameter. The target field provide a reference to the DOM element responsible for displaying the ActionScript. The context field provides access to the actionsheet-context data- attribute of the opening element:

The context field provides allows you to quickly reference the item that the user selected.

Adding the ActionSheet to TeamThing

TeamThing on the iPhone

Earlier this month, Todd Anglin published a sample application entitled, TeamThing. Its purpose is simple to highlight the building blocks of Kendo UI Mobile. From Todd’s blog post on TeamThing:

While the purpose of the app is to showcase Kendo UI Mobile, let’s make sure you understand the basic app concepts. In essence, TeamThing is like a task list app for teams. The idea is that distributed team members can use TeamThing to effortlessly share what they’re working on so that all other team members and observers (like bosses) can easily answer the question, “What are you working on?” at any time.

At the time that TeamThing was built, Kendo UI Mobile didn’t have the ActionSheet. When task was selected by a user, the application simply navigated to a new View:

ThingDetail View of TeamThing

This isn’t an ideal user experience because the transition to a new view didn’t feel natural to the user experience metaphors of the device experience. I wanted to see if I could swap out this View with a more intuitive ActionSheet. I also wanted to see just how easy this was.

As it turns out, it was really easy.

The first step involved building an ActionSheet for TeamThing:

Here’s the resulting output for this markup:

ActionSheet for TeamThing

Notice that I themed the Delete option appropriately. This was done through a simple set of style applied through the CSS classes, km-button and delete:

The next step was to route user interactions for each item to this newly-created ActionSheet. Because the original list utilized databinding and templates, accomplishing this task was easy:

In the markup (above), the template outputs code to inform the Kendo UI Mobile framework to route interactions to the ActionSheet. To make matters simplier for me when modified items, I utilized the actionsheet-context data- attribute to pass information to each of my callbacks that I had created for each action defined.

Final Thoughts

So, there you have it. The ActionSheet is a new widget that will provide you with a quick, contextual menu for performing actions against a collection of items you have in your Kendo UI Mobile applications. We added it to the service pack for Kendo UI Q1 2012 so make sure to sync up your script and style references. And, as always, please continue to send us your awesome feedback!

I’m happy to report that our team has shipped a service pack for Kendo UI Q1 2012 release (version 2012.1.515). In this blog post, I’ll highlight a few of the noteworthy enhancements we’ve implemented for this release. However, as always, I would encourage you to review the change logs:

• What’s New in Kendo UI Web
• What’s New in Kendo UI DataViz
• What’s New in Kendo UI Mobile

The Kendo UI Q1 2012 service pack provides a number of updates, fixes, and enhancements to the version of Kendo UI we shipped earlier this year. From a high-level perspective, we accomplished a great deal of work for this latest milestone:

• 112 bugs fixed
• 17 enhancements added
• 85 issues resolved for Kendo UI Web
• 18 issues resolved for Kendo UI DataViz
• 20 issues resolved for Kendo UI Mobile
• and much more!

Here are just a few of the cooler fixes and enhancements we’ve implemented in this service pack:

New! Method Chaining Support in Kendo UI Web, DataViz, and Mobile
Prior to this service pack, whenever a developer wished to interface with a Kendo UI widget, he/she needed to invoke .data() in order to obtain a reference to the object. For example:

$("#grid").kendoGrid();
$("#grid").data("kendoGrid").refresh();

All of this ceremony caused frustration and so we decided to eliminate it by supporting method chaining. With this latest service pack, you’ll be able to write JavaScript that’s more readable:

$("grid").kendoGrid("refresh");

This enhancement has been implemented across all three collections of Kendo UI; Kendo UI Web, Kendo UI DataViz, and Kendo UI Mobile.

New! Column Reordering and Resizing in the Grid of Kendo UI Web
Fans of our ASP.NET MVC controls will know just how valueable it can be to have a grid that can be modified by users. In this service pack, we’re providing the ability toresize and reorder the columns of the Grid widget in Kendo UI Web.

• Check out a demo of column resizing of the Grid widget in Kendo UI Web
• Check out a demo of column reordering of the Grid widget in Kendo UI Web

Although it’s a minor enhancement, it’s one that got a lot of votes on our UserVoice site. In other words, you asked, so we delivered!

Fixed! kendo.web.js and kendo.dataviz.js can be Included Simultaneously
In certain, edge-case type scenarios, customers would experience runtime errors when attemting to load the JavaScript resources for Kendo UI Web and Kendo UI DataViz on the same page. This behaviour has been resolved in this service pack.

Fixed! Case-Sensitive Filtering and Searching in Kendo UI Web
A few of the widgets of Kendo UI Web - noteably, the AutoComplete, ComboBox, and DatePicker - support the filtering and/or searching of values. In this service pack, we have included support for case sensitivity when conducting these operations against data-bound collections.

New! Dynamic Content in the ScrollView of Kendo UI Mobile
The ScrollView widget provides a finger-friendly control for scrolling through content like images. Through a swipe gesture, you can navigate between a list of local and remote resources. Until this latest release, it was difficult (but not impossible) for developers to dynamically update the content of ScrollView panes. Now, we’re providing a new method - .content() - which will provide this facility.

These are just a few of the updates, fixes, and enhancements that you’ll find in the service pack for the Kendo UI Q1 2012 release. Many of the bugs and feature requests we implemented came directly from you; our customers. We spend a great deal of time tracking your feedback on our forums, our UserVoice site, Stack Overflow, Twitter (@KendoUI) and elsewhere online. As always, we welcome all feedback. Please continue to submit your requests. We’ll continue to make Kendo UI more awesome.

Shot taken from Berwick, Victoria, Australia.

I am considering moving to Kendo UI but I am discouraged by the examples that I see for connecting to the DataSource component. How can I use existing data from a database in a Kendo UI application?

The answer to this question is somewhat nuanced due to the implications it can have on your application’s architecture. Consider for a moment the operating requirements of Kendo UI itself. Kendo UI is a framework that operates entirely within the confines of the browser since it’s built in HTML5, JavaScript, and CSS. Knowing this, one can see the implications of connecting to the data in your underlying database.

The DataSource component is an abstraction in JavaScript that manages in-memory and remote data sources. Its purpose is to simplify the process of propagating updates to and from these data sources. In the case of data that’s stored in a remote database (SQL Server, Oracle, MySQL, CouchDB, etc.), there’s an assumption on our part that the data is accessible to query via HTTP. This is necessary since we are talking about JavaScript running in the context of the browser. So, at a basic level, this is what is required for us to integrate your data with our framework. In terms of the actual data coming across the wire, this can be represented in a number of different ways. Out-of-the-box, we support XML, OData, and JSON.

Coming back to the question posed earlier, if you want to “use existing data from a database in a Kendo UI application” then you need to expose it via HTTP. There are a lot of different ways to do this; your options really do vary wildly, database to database. That stated, I’m a fan of implementing a service layer that can be exposed and consumed by frameworks like Kendo UI. For example, if you’re a .NET developer then you can take advantage of ASP.NET Web API. Many other solutions exist for Java, PHP, and others. The point is that you can have a great deal of control over how your data is provided to consuming clients. Of course, how you chose to implement these endpoints is another topic entirely. For now, know that for Kendo UI, we need some mechanism of accessing your data. Because we’re on the web, that means HTTP.

I was in Sydney earlier this week to speak at webDU. This year marked the 10th anniversary of this conference and I admit that I walked away impressed by the quality of the presentations that were delivered along with the professionalism of the organising staff.

Initially, I had planned to deliver a talk on responsive design. However, I was asked to cover for a missing speaker due to illness. My first talk entitled, “Make Awesome Web” covered a top 25 list of sites and tools I had curated on Make Awesome Web.

• Kendo UI
• Raphaël
• HTML5 Please
• CSS3 Please
• CSS3 Test
• 39 Ridiculous Things To Do With CSS3 Box Shadows
• Bootstrap, from Twitter
• HTML5 Boilerplate
• httpstat.us
• FitText
• OMG Text!
• Pretty Loaded
• BuiltWith
• HTML5 Progress Polyfill
• Bacon Ipsum
• PeopleMov.in
• NewZealand.com
• JS Bin
• Paper.js
• MicroJS
• PhoneGap
• CreateJS
• jsFiddle
• HTTP Archive
• The Noun Project
• Wheels of Steel
• Anatomy of a Mashup
• Mother-effing Text-Shadow
• Mother-effing HSL
• Mother-effing Animated GIF
• FOUT-B-Gone

This talk went very well. In retrospect, I probably should have given the presentation a better title. Something like “Johnny’s Crazy-Ass Brain-Dump of Awesome Sites and Tools” would have been much more appropriate.

Later in the night, I was a panelist in a BOF entitled, Building Native Apps with Web Frameworks, which featured a lively discussion about building applications for mobile devices with web development technologies. Of course, I spoke at-length about how we (at Telerik) approach this problem with Kendo UI. Our view is that many developers and companies want to build applications that look and feel native without having to resort to differing frameworks and unfamiliar languages. During our discussion, I made the point that of all the viable mobile platforms in existence (and soon-to-be-in existence), the Metro UX metaphor presented by Microsoft is the one that certainly disrupts the in-and-out push-button experience you see across iOS, Android, and Blackberry today. This certainly got a few questions raised. Of course, the reality is somewhat interesting this days with Apple and Google owning a great deal of developer and consumer mindshare in this space. Nevertheless, it’s one that a lot of folks are watching with great interest.

As I stated earlier, I had planned to deliver a talk on responsive design on the following day of the conference. Unfortunately, my son back in Melbourne was very sick and I received word from my wife that I needed to come home immediately. I was (therefore) unable to deliver my talk but I suppose that’s life as a parent.

On a side note, I was great to meet a number of the speakers and attendees at webDU. I was quite impressed by the level of expertise and experience at this conference. I truly hope to be invited back to speak next year and I look forward to seeing the list of talks on-offer at that time.

The ListView is ideally suited for scenarios where you wish to display a list of items in a consistent manner. Examples of its use can be seen in commonplace design structures applied on the Internet today; search engine results, tweets from Twitter, Facebook updates, inbox items in Gmail, card lists in Trello, and so on.

The ListView is designed to put you back in control when it comes to displaying data. In fact, it does not provide a default rendering of data-bound items. Instead, it relies entirely on templates to define how a list of items - including alternating items and items being edited - is displayed.

Let’s see how the ListView works by building a simple example that integrates the Twitter API.

First, we’ll define a target HTML element such as a list or div:

Next, we’ll initialize the ListView by referring the template and a result set from the Twitter API to be displayed:

Here’s the live example of the representation (above) with additional styling:

In scenarios where the number of items bound to a ListView is larger than expected, a Pager will control the items being displayed. Using a Pager is relatively simple. First, you create a target element for its rendering. Typically, it should be placed in the vicinity of the ListView.

The next step is to update the ListView configuration to state that it support paging through its pageable property and to initialize the Pager.

Here’s the same live example with a Pager applied to the ListView:

From a design perspective, it may be useful to visually differiante each alternating item in a ListView. For example, in the previous example, I may wish to have every second item have a slightly darker background (i.e. banded rows). Defining the altTemplate property accomplishes this through the use of a template that you define. Let’s go ahead and update our working example to include a template for alternating items.

Here’s how the live example how looks with a template for alternating items:

In addition to paging, the ListView supports item selection, navigation, and inline editing. Supporting these operations is achieved through the initialization of its Boolean configuration options. In the case of inline editing, the ListView provides the editTemplate property, which defines a template for this mode. Once define, the ListView can render out this editing template via the edit method. When invoked, the editTemplate for the ListView is applied against the target item. In most scenarios, you should implement this through an event model that is triggered when the user selected an item to modify.

The ListView encapsulates operations for adding and removing items, item selection, editing, and persisting changes. These methods enable you to modify the underpinning list of items through a series of user-initiated actions/events. In the case of inline editing, the first step is to define a template that is to be used when editing items.

The template you define for the inline editing of items may include other Kendo UI widgets. Looking at the example for editing items on KendoUI.com, you can see that the edit template defines a series of widgets for editing an item:

The inline editing of ListView items is triggered by a click event initiated by a user and is wired up via .delegate() in jQuery.

Item selection is another scenario supported by the ListView. By setting the selectable property to either “single” or “multiple”, you can provide the ability to have users select items.

You can capture when items are selected through the change event that is triggered when a user selected one or more items (via shift-select).

Updating the example using the Twitter API that I created before, here’s the live representation of that with item selection enabled:

As you’ve seen, the ListView is ideally suited for scenarios where you wish to display a list of items in a consistent manner. I hope this blog post has shed some light on the use of this widget. As always, if you have any questions, please feel free to drop us a line on Twitter (@KendoUI).

This blog post also appears on the Kendo UI Blog.

Of course, building a great product also means connecting with your customers on a face-to-face level. This usually involves a lot of travel and time away from family, but it’s value cannot be understated. Nothing gets us more excited than hearing a story about the Next Big Thing being built on Kendo UI. Or, talking to a developer who wants us to implement a feature for the next release. We love it.

That’s why I wanted to take this opportunity to share with you the whereabouts of some of the Kendo UI team memebers over the next few months. Specifically, you’ll find Todd Anglin (@ToddAnglin), Burke Holland (@BurkeHolland), Brandon Satrom (@BrandonSatrom), and I (John Bristowe, @JohnBristowe) at one of the following events near you:

• April 2-3: JSConf 2012
• April 30 - May 1: Melbourne Internet Show
• May 3-4: WebDU
• May 4-6: New England GiveCamp
• May 16-18: WebVisions
• May 23-24: Web Directions Code
• June 11-14: TechEd North America 2012
• June 15-16: CodeStock 2012
• June 28-29: jQuery San Francisco Conference 2012
• July 31: CSS Summit 2012
• August 29-31: devLINK 2012
• October 16-19: Web Directions South 2012

If you’re at one of these events, please track us down! We’d love to have a chat.

In the meantime, please continue to submit your awesome feedback. It’s what keeps us going. Also, don’t forget to follow us on Twitter! We’re at @KendoUI. Tell your friends.

Having travelled across Canada three times, I found this absolutely hilarious. SO TRUE.

I’d strongly recommend watching this video if you’re looking for a good lap-around Kendo UI.