Kendo UI Q1 2012 Commercial Service Pack Available Now

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.

"Another Day, Another Beautiful Sunrise"

Shot taken from Berwick, Victoria, Australia.

Connecting the Kendo UI DataSource to Remote Data

Over the past number of months, I’ve fielded an enormous number of questions about Kendo UI. In this post, I’d like to answer a question I’ve received about the DataSource component. This question speaks more to the architectural concerns of your application as opposed to the technical aspects of Kendo UI. Nevertheless, it’s a question that warrants some examination.

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.

webDU 2012

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.

An In-Depth Look at the ListView in Kendo UI Web

The ListView is a widget that was recently introduced in the March 2012 release of Kendo UI Web. Its purpose is to display a custom layout of data-bound items through templates. In this article, I’ll highlight how the ListView works as well as identify scenarios where it is suitable to use.

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.