Posts
203
Comments
1119
Trackbacks
51
Kendo UI Mobile with Knockout for Master-Detail Views

Lately I’ve been playing with Kendo UI Mobile to build iPhone apps. It’s similar to jQuery Mobile in that they are both HTML5/JavaScript based frameworks for buildings mobile apps. The primary thing that drew me to investigate Kendo UI was its innate ability to adaptively render a native looking app based on detecting the device it’s currently running on. In other words, it will render to look like a native iPhone app if it’s running on an iPhone and it will render to look like a native Droid app if it’s running on a Droid. This is in contrast to jQuery Mobile which looks the same on all devices and, therefore, it can never quite look native for whatever device it’s running on.

My first impressions of Kendo UI were great. Using HTML5 data-* attributes to define “roles” for UI elements is easy, the rendering looked great, and the basic navigation was simple and intuitive. However, I ran into major confusion when trying to figure out how to “correctly” build master-detail views. Since I was already very family with KnockoutJS, I set out to use that framework in conjunction with Kendo UI Mobile to build the following simple scenario: I wanted to have a simple “Task Manager” application where my first screen just showed a list of tasks like this:

kendoui-tasks

 

Then clicking on a specific task would navigate to a detail screen that would show all details of the specific task that was selected:

kendoui-taskdetail

 

Basic navigation between views in Kendo UI is simple. The href of an <a> tag just needs to specify a hash tag followed by the ID of the view to navigate to as shown in this jsFiddle (notice the href of the <a> tag matches the id of the second view):

 

Direct link to jsFiddle: here.

That is all well and good but the problem I encountered was: how to pass data between the views? Specifically, I need the detail view to display all the details of whichever task was selected. If I was doing this with my typical technique with KnockoutJS, I know exactly what I would do. First I would create a view model that had my collection of tasks and a property for the currently selected task like this:

   1:  function ViewModel() {
   2:      var self = this;
   3:      self.tasks = ko.observableArray(data);
   4:      self.selectedTask = ko.observable(null);
   5:  }

Then I would bind my list of tasks to the unordered list - I would attach a “click” handler to each item (each <li> in the unordered list) so that it would select the “selectedTask” for the view model. The problem I found is this approach simply wouldn’t work for Kendo UI Mobile. It completely ignored the click handlers that I was trying to attach to the <a> tags – it just wanted to look at the href (at least that’s what I observed). But if I can’t intercept this, then *how* can I pass data or any context to the next view? The only thing I was able to find in the Kendo documentation is that you can pass query string arguments on the view name you’re specifying in the href. This enabled me to do the following:

  1. Specify the task ID in each href – something like this: <a href=”#taskDetail?id=3></a>
  2. Attach an “init method” (via the “data-show” attribute on the details view) that runs whenever the view is activated
  3. Inside this “init method”, grab the task ID passed from the query string to look up the item from my view model’s list of tasks in order to set the selected task

I was able to get all that working with about 20 lines of JavaScript as shown in this jsFiddle. If you click on the Results tab, you can navigate between views and see the the detail screen is correctly binding to the selected item:

 

Direct link to jsFiddle: here.

 

With all that being done, I was very happy to get it working with the behavior I wanted. However, I have no idea if that is the “correct” way to do it or if there is a “better” way to do it. I know that Kendo UI comes with its own data binding framework but my preference is to be able to use (the well-documented) KnockoutJS since I’m already familiar with that framework rather than having to learn yet another new framework.

While I think my solution above is probably “acceptable”, there are still a couple of things that bug me about it. First, it seems odd that I have to loop through my items to *find* my selected item based on the ID that was passed on the query string - normally, with Knockout I can just refer directly to my selected item from where it was used. Second, it didn’t feel exactly right that I had to rely on the “data-show” method of the details view to set my context – normally with Knockout, I could just attach a click handler to the <a> tag that was actually clicked by the user in order to set the “selected item.”

I’m not sure if I’m being too picky. I know there are many people that have *way* more expertise in Kendo UI compared to me – I’d be curious to know if there are better ways to achieve the same results.

posted on Sunday, July 1, 2012 12:06 AM Print
Comments
Gravatar
# re: Kendo UI Mobile with Knockout for Master-Detail Views
Steve
7/2/2012 3:25 PM
I think if you tried Kendo MVVM you'd prefer it over knockout. Syntax is almost the same, but one thing I love is that you don't need to make things in the viewmodel as observable or observableArray...they just automatically are, if they're part of the model :)

Like if you get some json data back from a webservice, just .set() it on the model and it'd magically observable instead of having to have a separate mapping plugin (etc)
Gravatar
# re: Kendo UI Mobile with Knockout for Master-Detail Views
szoftver
7/2/2012 5:34 PM
Looks great, but has some tipological issues: the margins/paddings are not correct everywhere but except this is a really cool mvvm.

I'll test responsivity on my iphone immediately:)
Gravatar
# re: Kendo UI Mobile with Knockout for Master-Detail Views
Steve Michelotti
7/3/2012 12:50 PM
@Steve - sure would be great to find an example of what you're talking about - I wasn't able to find any in the Kendo UI documentation.
Gravatar
# re: Kendo UI Mobile with Knockout for Master-Detail Views
Lei
7/6/2012 12:46 AM
MVC4 mobile project template includes the JQM library. So I wonder if MS is pushing it and what it means to developers, as it did to jQuery. jQuery certainly gained more momentum with MS's push.
Gravatar
# re: Kendo UI Mobile with Knockout for Master-Detail Views
Anil
10/28/2012 10:43 AM
Great post...
I want to do similar thing using jquery and knockout....
I have list of categories...if I select one category, I should display the details of that category in second div..

Please let me know if you have any example of that..

Thanks
Gravatar
# re: Kendo UI Mobile with Knockout for Master-Detail Views
Marc
6/12/2013 4:52 PM
Hello and thanks so much for this :)
I think it's the right way to do it.
I was able to do it in Kendo based on your article:


LIST_VIEW:
<a href="\\#DetailView?UID=#= uid #" data-icon="more">

DETAIL_VIEW:

<div id="VehicleDetailView" data-role="view" data-title="Detail" data-show="Load">

<form id="MyForm">
<ul data-role="listview" data-style="inset">
<li data-bind="text: SomeDataFromVM"></li>
</ul>
</form>

<script type="text/javascript">
function Load(e) {
// Obtenir le ID de l'élément
var EntityUID = e.view.params.UID;
if (!EntityUID) return;

var Entity = LocalController.DataSource.getByUid(EntityUID);
if (!Entity) return;

kendo.bind($("#MyForm"), Entity);
}
</script>

</div>

Post Comment

Title *
Name *
Email
Comment *  
Verification

View Steve Michelotti's profile on LinkedIn

profile for Steve Michelotti at Stack Overflow, Q&A for professional and enthusiast programmers




Google My Blog

Tag Cloud