Click here to Skip to main content
15,867,453 members
Articles / Web Development / ASP.NET
Article

Highlighting and selecting an item in a DataList

Rate me:
Please Sign up or sign in to vote.
4.33/5 (16 votes)
14 Feb 20062 min read 130.1K   2.9K   47   14
This article describes how you can easily highlight and select an item in a DataList.

Introduction

ASP.NET server controls provide a rich environment to produce high quality web sites. Sometimes though, you just want to go that little bit further. DataLists offer a convenient way to render lists with data that can be fully customized using templates. I was last experimenting with a DataList control and I soon found two features that where not immediately available out of the box:

  • Providing visual feedback on which row the mouse is over.
  • Enabling the user to select a DataListItem by clicking anywhere on the item.

I will show how this can be easily accomplished.

Using the code

The example provided assumes the following things:

  • The Northwind database is available (the example uses the local SqlExpress connection with the default parameters).
  • The DataList will be bound to the Northwind database and shows some info from the Employee table.
  • The DataList uses 'Flow' as RepeatLayout (otherwise the proposed highlighting solution does not work).

After you have implemented the binding for the DataList, you need to modify the DataList ItemTemplate by adding a LinkButton as the first control, let's call it for a change 'SelectButton'. The documentation reads the ItemCommand event will be raised when any button of the ItemTemplate is clicked. Since we don't want to use this LinkButton directly for selecting a row, we are going to hide it. This can be done by adding a style attribute:

HTML
<ItemTemplate>
<asp:LinkButton id="SelectButton" 
           Text="Select" 
                CommandName="Select" 
                runat="server" 
                style="display:none"/>
...

By setting the display style attribute to none, we assure that the button will be rendered and is available in the DOM structure.

Once we have a button available, we know that when it's clicked, it will trigger the ItemCommand event. This can be achieved as follows:

C#
protected void DataList1_ItemDataBound(object sender, 
                             DataListItemEventArgs e) 
{
     if (e.Item.ItemType == ListItemType.Item || 
         e.Item.ItemType == ListItemType.AlternatingItem)
     { 
         //Add eventhandlers for highlighting 
         //a DataListItem when the mouse hovers over it.
         e.Item.Attributes.Add("onmouseover", 
                "this.oldClass = this.className;" + 
                " this.className = 'EntryLineHover'"); 
         e.Item.Attributes.Add("onmouseout", 
                "this.className = this.oldClass;");
         //Add eventhandler for simulating 
         //a click on the 'SelectButton'
         e.Item.Attributes.Add("onclick", 
                this.Page.ClientScript.GetPostBackEventReference(
                e.Item.Controls[1], string.Empty));
     }
}

The code is executed during the ItemDataBound event. Here, we add new attributes to the rendered DataListItems. The first two attributes have to do with the highlighting of the row when the mouse hovers over it. We just switch between two CSS styles.

The third attribute serves to simulate a click on the hidden 'SelectButton'. The GetPostBackEventReference refers to the first control in the item, the 'SelectButton', and will result, for example, in the following script added to the OnClick event of the rendered SPAN element:

HTML
javascript:__doPostBack('DataList1$ctxxx$SelectButton','')

In order to show info about the selected DataListItem, you could use:

C#
protected void DataList1_ItemCommand(object source, 
                         DataListCommandEventArgs e) 
{ 
    txtEmployeeId.Text = 
      ((Label)e.Item.FindControl("LastNameLabel")).Text; 
}

LastNameLabel is the name of the label in the ItemTemplate that holds the last name of the selected employee.

Acknowledgements

The basic idea of implementing highlight and selection comes from an article that deals with the same issues but then for DataGrids instead of DataLists.

The article can be found here: Steps to Write GridView PostBack Events.

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
United States United States
This member has not yet provided a Biography. Assume it's interesting and varied, and probably something to do with programming.

Comments and Discussions

 
Generalthank you Pin
Member 1096947824-Jul-14 11:23
Member 1096947824-Jul-14 11:23 
GeneralMy vote of 4 Pin
iman khalil24-Sep-12 7:20
iman khalil24-Sep-12 7:20 
Questioni need u help Pin
mavicocuQ16-Jul-12 23:06
mavicocuQ16-Jul-12 23:06 
AnswerRe: i need u help Pin
tranthuyet11-Dec-14 22:23
tranthuyet11-Dec-14 22:23 
GeneralMy vote of 1 Pin
aasheeshh29-Dec-09 19:21
aasheeshh29-Dec-09 19:21 
GeneralGridView similare way [modified] Pin
zitun4-Apr-07 22:48
zitun4-Apr-07 22:48 
GeneralRe: GridView similare way Pin
JD814-May-08 17:34
JD814-May-08 17:34 
GeneralRe: GridView similare way Pin
ashutosh kumar jha9-Feb-10 7:17
ashutosh kumar jha9-Feb-10 7:17 
QuestionHow to remove highlighting when DataList is refreshed? Pin
spin2k22-Jun-06 12:37
spin2k22-Jun-06 12:37 
GeneralGridview CSS Class hover with Javascript Pin
dwatkins@dirq.net27-Apr-06 6:06
dwatkins@dirq.net27-Apr-06 6:06 
AnswerRe: Gridview CSS Class hover with Javascript Pin
Zaz9996-Aug-07 1:52
Zaz9996-Aug-07 1:52 
GeneralHighlighting and selecting an item in a DataList Example Pin
grigorythegreat22-Feb-06 4:03
grigorythegreat22-Feb-06 4:03 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.