How to: Select Items in the DataView Control

[This documentation is for preview only, and is subject to change in later releases. Blank topics are included as placeholders.]

The ASP.NET AJAX DataView client control renders UI for each data item by using an ASP.NET AJAX template. You can associate commands with UI elements in a template. At run time, the commands are passed up the DOM hierarchy and can be handled by the DataView control. This enables the DataView control to respond to commands that are invoked for its child controls.

You can create custom commands and bind them to a handler by setting the onCommand property of the DataView control. The following example shows how to bind a handler to a command.

dataview:oncommand="{{ sampleCommandHandler }}"

Note

The DataView control handles the Select command automatically. You do not have to provide a handler to implement selection behavior.

This topic explains how to invoke the Select command for an element in the item template of the DataView control. When the user clicks that element, the DataView control sets its selectedItemIndex and selectedData properties to match the selected data item. However, in order to display the item as selected, you must set the selectedItemClass property to a CSS class name.

You can use the selectedItem and selectedData properties of the DataView control in a master-detail scenario. For more information, see How to: Create a Master-Detail View with Inline Binding Expressions.

Using the Select Command to Make Items Selectable in the DataView Control

You make an element selectable by adding an attribute to it.

To make a UI element selectable

Add the sys:command="select" attribute to the UI element in the item template.

The following example shows an li element that is configured so that when a user clicks anywhere in the element, that item is selected.
```
<li sys:command="select">
  <span>{binding CompanyName}</span>
</li>
```

Assigning a CSS Class to the Selected Item

You can specify the name of a CSS class that is applied to the top-level HTML element or elements for the selected item. This enables you to specify the display characteristics for a selected item. If you do not specify a CSS class, the item is selected, but it is not displayed any differently than non-selected items.

To assign a CSS class to the selected item

Add the dataview:selecteditemclass attribute to the container UI element that forms the template wrapper.

Note

Use the prefix (dataview:) that has been assigned to the DataView control class.

The following example shows how to set the selectedItemClass property of the DataView control.

<ul id="companyListView" 
    class="sys-template"
    sys:attach="dataview"
    dataview:autofetch="true"
    dataview:serviceuri="CompanyService.svc"
    dataview:fetchoperation="GetCompanies"
    dataview:selecteditemclass="myselected">
  <li sys:command="select">
    <span>{binding CompanyName}</span>
  </li>
</ul>

Example

The following code shows the complete HTML file for a DataView control that lets users select an item.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
  <title>Sys.UI.DataView</title>
  <link href="../styles/divList.css" rel="stylesheet" type="text/css" />
  <script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjax.js"></script>
  <script type="text/javascript" src="../MicrosoftAjax/MicrosoftAjaxTemplates.js"></script>
</head>
<body xmlns:sys="javascript:Sys"
  xmlns:dataview="javascript:Sys.UI.DataView"
  sys:activate="*">

  <h1>Selectable Image Name</h1>
  <div id="top">
    <ul id="companyListView" 
        class="sys-template"
        sys:attach="dataview"
        dataview:autofetch="true"
        dataview:dataprovider="../Services/ImagesWcfService.svc"
        dataview:fetchoperation="GetImages"
        dataview:fetchparameters="{{ {orderBy: 'Name'} }}"
        dataview:selecteditemclass="myselected">
      <li sys:command="Select">
        <span class="name">{binding Name}</span>
      </li>
    </ul>
  </div>
</body>
</html>

How to: Select Items in the DataView Control

Using the Select Command to Make Items Selectable in the DataView Control

To make a UI element selectable

Assigning a CSS Class to the Selected Item

To assign a CSS class to the selected item

Example

See Also

Tasks

Additional resources