NGWS SDK Documentation  

This is preliminary documentation and subject to change.
To comment on this topic, please send us email at ngwssdk@microsoft.com. Thanks!

Allowing Users to Select Items

You can specify that users can select individual items in the DataList Web control. Typically, selecting an item highlights it visually. In addition, you might display different information for a selected item.

To allow users to select items in a DataList control

  1. Create a SelectedItemTemplate for the control to include appropriate text and controls, and set the template's styles. For details, see Creating Web Control Templates.
  2. In the ItemTemplate (and AlternatingItemTemplate, if you are using that), add a Button or LinkButton Web control and set its Text property "Select" or something similar.
  3. Set the Command property of the button from Step 2 to select (case-sensitive).
  4. Create an event-handling method for the control's OnItemCommand event. For details, see Writing Event Handlers for Web Forms Controls. In the event-handling method, do the following:
    1. Check the Command property of the event-argument object's CommandSource to see if the term select was passed.
    2. If so, then set the DataList control's SelectedIndex property to the index of the item to be selected. You can get that index value as a property of the event-argument object.
    3. Call the control's DataBind method to refresh the information in the control.
  5. To cancel the selection, set the control's SelectedIndex property to -1.

    The following example shows a complete DataList control declaration. It includes an ItemTemplate that displays a Select button (a LinkButton control) and a product name. The declaration also includes a SelectedItemTemplate that displays the product name and a product order date. The BackColor property for the SelectedItemStyle object is set to yellow. Finally, the OnItemCommand event is bound to the DataList1_OnItemCommand method.

    [C#]
    <asp:DataList id="DataList1" runat="server"
       DataSource="[need datasource reference here]"
       SelectedItemStyle-BackColor="yellow"
       OnItemCommand="DataList1_OnItemCommand"
       >
          <template name="ItemTemplate">
             <asp:LinkButton id="button1" runat="server"
             Text="Select"
             Command="select"
          />
          <%# DataBinder.Eval(Container, "DataItem.ProductName") %>
         </template>
         <template name="SelectedItemTemplate">
             Item:
             <%# ((DataRowView)Container.DataItem)["ProductName"]  %>
             <br>
             Order Date:
             <%# DataBinder.Eval(Container, "DataItem.OrderDate", 
                "{0:d}") %>
             <br>
         </template>
    </asp:DataList>

    The following example shows the event-handling method for the DataList control's OnItemCommand event. It checks whether the user clicked the Select button defined in the control. If so, it sets the control's SelectedIndex property to the index of the item clicked, which causes the control to display the SelectedItemTemplate for that item.

    protected void DataList1_ItemCommand(object Source, 
          DataListCommandEventArgs e)
    {
       // See if the "select" button was clicked
       string cmd = ((LinkButton)e.CommandSource).Command;
       if (cmd == "select"){
          // Set the SelectedIndex property to the index of the item
          // where the user clicked.
             DataList1.SelectedIndex = e.Item.ItemIndex;}
       DataList1.DataBind();
       }
    }

See Also

Introduction to the DataList Web Control | Allowing Users to Delete Items | Allowing Users to Edit Items | Responding to Button Events in DataList Items