JavaScript Editor jscript editor     Web designer 
↑


Main Page

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 Creating Web Server Control Templates.

  2. Set the control's SelectedItemStyle properties. For details, see ASP.NET Server Controls and CSS Styles (.NET Framework SDK Guide).

  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:

    Visual BasicВ CopyCode imageCopy Code
    Protected Sub DataList1_SelectedIndexChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) _
        Handles DataList1.SelectedIndexChanged
   DataList1.DataBind()
End Sub

    C#В CopyCode imageCopy Code
    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 bubbled to the DataGrid control's ItemCommand event. The complete code might look something like the following:

Visual BasicВ CopyCode imageCopy Code
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

See Also



JavaScript Editor jscript editor     Web designer 
→