LA.NET [EN]

Oct 23

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:

<head>
  <style type="text/css">
      .sys-template{ display: none;}
      .selected{ background-color: green;}
      #view div{ cursor: pointer;}
  </style>
  <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:



selecteddataview



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.

Leave a Reply

Your email address will not be published. Required fields are marked *


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>