How to: Allow Users to Select Items in DataList Web Server Controls

You can specify that users can select individual items in the DataList Web server 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 to define the layout of markup and controls for a selected item. For details, see ASP.NET Web Server Controls Templates.

2. Set the control's SelectedItemStyle properties. For details, see ASP.NET Web Server Controls and CSS Styles.

3. In the ItemTemplate (and AlternatingItemTemplate, if you are using it), add a Button or LinkButton Web server control.

4. Set the CommandName property of the button from Step 3 to select (case-sensitive).

5. Create an event handler for the DataList control's SelectedIndexChanged event. In the event handler, call the control's DataBind method to refresh the information in the control. The complete code would look something like this:

   Protected Sub DataList1_SelectedIndexChanged(ByVal sender As _
           System.Object, ByVal e As System.EventArgs) _
           Handles DataList1.SelectedIndexChanged
      DataList1.DataBind()
   End Sub
   

   protected void DataList1_SelectedIndexChanged (object sender, 
       System.EventArgs e)
   {
      DataList1.DataBind();
   }
   

To cancel the selection, set the control's SelectedIndex property to -1. To accomplish this, you could add a Button Web server control to the SelectedItem template and set its CommandName property to "unselect". The Click event for this button would also be forwarded to the DataGrid control's ItemCommand event.

The complete code might look something like the following:

Protected Sub DataList1_ItemCommand(ByVal source As Object, _
        ByVal e As DataListCommandEventArgs) _
        Handles DataList1.ItemCommand
   If e.CommandName = "unselect" Then
      DataList1.SelectedIndex = -1
   End If
   DataList1.DataBind()
End Sub

protected void DataList1_ItemCommand(object source, 
    DataListCommandEventArgs e)
{
   if (e.CommandName == "unselect")
   {
      DataList1.SelectedIndex = -1;
   }
   DataList1.DataBind();
}

See Also

Reference

DataList Web Server Control Overview