The DataView control and the select command

In the previous posts, we’ve met commands and saw how to use them from within a DataView control.What I didn’t mention at the time was that the DataView control understand commands named select. In other words, the DataView understands that type of commands and reacts to them by setting the current selected item.

Currently, the DataView control exposes several properties related with setting the current selected item:

  • initialSelectedIndex: used for setting the index of the default current selected item. This value is only used during initialization time. Setting the default selected item is important in some scenarios (ex.: master-detail scenarios);
  • selectedIndex: read/write property which gets or sets the index of the current selected item;
  • selectedItemClass: you can use this property to pass the name of a CSS class that will be applied to the element that is selected.

The DataView control applies the CSS class you’ve passed into the selectedItemClass in response to a select command (that is, of course, if you don’t cancel the command bubbling from within an existing command handler). The next snippet shows how to take advantage of the automatic handling of select commands:

  <style type="text/css">
      .sys-template{ display: none;}
      .selected{ background-color: green;}
      #view div{ cursor: pointer;}
  <script src="Scripts/MicrosoftAjax/start.debug.js" 
type="text/javascript"></script> <script type="text/javascript"> Sys.require([Sys.components.dataView]); var arr = [{ name: "luis", address: "fx" }, { name: "john", address: "fx" }, { name: "peter", address: "fx"}] </script> </head> <body xmlns:sys="javascript:Sys" xmlns:dv="javascript:Sys.UI.DataView"> <div id="view" class="sys-template" sys:attach="dv" dv:data="{{ arr }}" dv:selecteditemclass="selected" dv:initialselectedindex="0"> <div sys:command="select">{{name}}-{{address}}</div> </div> </body>

And here’s what happens when you click over the second line:


Bottom line: currently, the only command that is interpreted by the DataView are select commands. The DataView control exposes a couple of poperties which let you define several features related with the selected item. In the next post,we’ll see how we can improve this sample by building a simple master-detail scenario. Stay tuned.


~ 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 )

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: