Home / AJAX

HOW TO Select Items in the DataView Control

RSS
Modified on 2009/12/18 00:29 by Erik Reitan Categorized as Uncategorized
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.
        <span sys:command="Select" class="listitem" id="listItem" >
            <input type="button" sys:value="{binding Name}" />
            <!--Live binding oneWay-->
            <img sys:src="{binding Uri}"/>
            <span sys:innerhtml="{binding Contributor}"></span>
        </span>

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 following attribute to the container UI element that forms the template wrapper:
{{dataview:selecteditemclass}}

Note:

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

Example

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

    <div id="imagesListView" class="imageslist sys-template" 
        sys:attach="dataview"
        dataview:autofetch="true"
        dataview:dataprovider="{{ dataContext }}" 
        dataview:fetchoperation="GetImages"
        dataview:fetchparameters="{{ fetchParameters }}"
        dataview:selecteditemclass="selecteditem" 
        dataview:onrendering="{{ onRendering }}" 
        dataview:initialselectedindex="0">
        <span sys:command="Select" class="listitem" id="listItem" >
            <input type="button" sys:value="{binding Name}" />
            <!--Live binding oneWay-->
            <img sys:src="{binding Uri}"/>
            <span sys:innerhtml="{binding Contributor}"></span>
        </span>
    </div>

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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--
This sample demonstrates how you can modify database data when interacting with 
a WCF service, by using a Sys.Data.DataContext.
-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Read-write, with DataContext</title>
    <link href="../styles/Images.css" rel="stylesheet" type="text/css"/>
    
    <script src="../Scripts/MicrosoftAjax/Start.debug.js" type="text/javascript"></script>

<script type="text/javascript"> var imagesList, imageData, dataContext, fetchParameters = { orderby: "Name" }

Sys.activateDom = false; Sys.require([Sys.components.dataView, Sys.components.dataContext, Sys.scripts.WebServices]);

Sys.onReady(function() { dataContext = Sys.create.dataContext({ serviceUri: "../Services/ImagesWcfService.svc", saveOperation: "SaveImages" });

Sys.activateElements(document.documentElement); }); function onRendering(sender, args) { imagesList = sender; imageData = args.get_data(); Sys.Observer.makeObservable(imageData); }

function onSort(orderby) { fetchParameters.orderby = orderby; imagesList.fetchData(); }

function onInsert() { var newImage = { Name: "Name", Description: "Description", Contributor: "Contributor", Uri: "../images/question.jpg" };

dataContext.insertEntity(newImage); imageData.add(newImage);

var newIndex = imageData.length - 1; imagesList.set_selectedIndex(newIndex); Sys.get(".listitem", imagesList.get_contexts()[newIndex]).scrollIntoView(); }

function onDetailViewCommand(sender, args) { switch (args.get_commandName()) { // A custom command case "Delete": var index = imagesList.get_selectedIndex(); var deletedImage = imageData[index];

dataContext.removeEntity(deletedImage); imageData.remove(deletedImage);

if (index >= imageData.length) index--; imagesList.set_selectedIndex(index); } } </script> </head>

<body xmlns:dataview="javascript:Sys.UI.DataView" xmlns:sys="javascript:Sys"> <div class="title">Image Organizer</div> <!--Toolbar--> <div class="sorttoolbar"> Sort: <select onchange="onSort(this.value)"> <option value="Name">Name</option> <option value="Contributor">Contributor</option> <option value="Description">Description</option> </select> <a class="editbutton" href="#" onclick="onInsert()">Add Image</a> <a class="editbutton" href="#" onclick="dataContext.saveChanges()">Save Changes</a> <a class="editbutton" href="#" onclick="imagesList.fetchData()">Fetch Images</a> </div>

<!--Master View--> <div id="imagesListView" class="imageslist sys-template" sys:attach="dataview" dataview:autofetch="true" dataview:dataprovider="{{ dataContext }}" dataview:fetchoperation="GetImages" dataview:fetchparameters="{{ fetchParameters }}" dataview:selecteditemclass="selecteditem" dataview:onrendering="{{ onRendering }}" dataview:initialselectedindex="0" > <span sys:command="Select" class="listitem" id="listItem" > <input type="button" sys:value="{binding Name}" /> <!--Live binding oneWay--> <img sys:src="{binding Uri}"/> <span sys:innerhtml="{binding Contributor}"></span> </span> </div>

<!--Detail View--> <!--Live binding to Master View--> <div id="detailView" class="sys-template" sys:attach="dataview" dataview:oncommand="{{ onDetailViewCommand }}" dataview:data="{binding selectedData, source=$imagesListView}" > <div class="detailbox edit"> <a href="#" sys:command="Delete" class="leftbutton" >Delete Image</a> <div class="detailtitle">{binding Name}</div> <div class="fieldblock"> <label for="name">Name: </label> <input id="name" type="text" sys:value="{binding Name}"/> </div> <div class="fieldblock"> <label for="description">Description: </label> <input id="description" type="text" sys:value="{binding Description}"/> </div> <div class="fieldblock"> <label for="uri">Uri: </label> <input id="uri" type="text" sys:value="{binding Uri}"/> </div> <div class="fieldblock"> <label for="contributor">Contributor: </label> <input id="contributor" type="text" sys:value="{binding Contributor}"/> </div> </div> <img class="detailimage" sys:alt="{binding Name}" sys:src="{binding Uri}" /> </div> </body> </html>