Master-detail made easy with the DataView control

We can reuse our knowledge of the previous post to create a master-detail scenario. The idea is simple: we configure our master DataView to show all the elements and then we add a second DataView control that will only show the details of the current selected item on the master DataView. I will spare you from long texts and I’ll jump right away into some code (I’m adapting the code from the previous post):

<body xmlns:sys="javascript:Sys"
   <div id="master"
        dv:data="{{ arr }}"
      <div sys:command="select">
          <span>{binding name}</span>-
          <span>{binding address}</span>
   <div id="detail"
        dv:data="{binding selectedData, source=$master}">
      <input type="text" sys:value="{binding name}" />
      <br />
      <input type="text" sys:value="{binding address}" />

There are some observations I’d like to make about the previous snippet:

  • you’ll notice that I’ve removed the one-time/one-way bindings of the previous post. I’ve replaced them with live bindings to ensure proper propagation of changes made from the details DataView control;
  • still on the master, I’ve ended up adding two span elements because you can’t put two binding expressions within a single tag;
  • the details DataView control is configured so that it gets its data from the selectedData property of the master DataView control. The selectedData references the object used to fill the current selected item of the DataView control (ie, it references one of the objects from the arr array). Notice that any modifications performed over this object will also be replicated  on the master DataView control because we’ve used live bindings on it between each object of the arr array and each line generated through template instantiation;
  • since we’re applying live bindings to INPUT elements, we can get away with not setting the mode to twoWay (remember that you’ll get the default auto mode which is translated into twoWay for INPUT controls);

And that’s it: as you can see, no JS code and you get updates everywhere.

However, this might not be what you want in some scenarios. You might be interested in having a traditional form where you need to click an edit button for editing an item and then need to click on the confirm on cancel button before making the change persistence. This requires some code, but it’s not that complicated with preview 6. On the next post we’ll see work in this scenario and we’ll see how things have become really really easy! Stay tuned for more.


~ by Luis Abreu on October 23, 2009.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: