Clickable Rows in a DataGrid

Introduction

Ah, everyone's favorite tool, the DataGrid. While a great tool, it can be difficult to work with, as I'm sure you all know. In several of my page making conquests, the DataGrid was the weapon of choice for displaying data, but left a need in the user interface for the users of my site. Being confined to clicking buttons or links to edit data or to expand on a row, while still functional, it left quite a bit of confusion for first time and often repeat users. So, towel in hand, I set out to find out how to setup a DataGrid's rows to be clickable.

Background

In my quest, I had searched several sites that gave some or incomplete information on how to setup a DataGrid properly to handle Click events. After many hours of banging my head and finally getting it to work, I vowed to document it all and share the code to try to prevent some other poor soul from having to go through what I did.

Using the code

The idea behind getting this to work is to create an OnClick event for that row that mimics hitting an ASP.NET WebForm button; in my example it's the Select button. If you're not familiar with how ASP.NET's web form controls work, when you click on them, they fire a JavaScript function called __doPostBack(eventTarget, eventArgument). The control clicked passes its ID along to the JavaScript function and the function starts the postback process. Now it becomes difficult because these IDs are generated on the fly when the page is viewed, but at least in a predictable manner. While not difficult to setup, there are several small things you need to do to make everything fit together.

//The select button's code as viewed in the running page's source
<a href="javascript:__doPostBack('_ctl0$dgRequests$_ctl4$_ctl0','')">Select</a>
//The Datagrid row with our added attributes as viewed 
//in the running page's source. Notice how the onclick command 
//matches the select button above
<tr onmouseover="this.style.backgroundColor='beige';this.style.cursor='hand'" 
        onmouseout="this.style.backgroundColor='#D9E2FF';" 
        onclick="javascript:__doPostBack('_ctl0$dgRequests$_ctl4$_ctl0','')">

In my example, I mimic a Select button. So for this, I had to add a Select button column to my DataGrid. However, it doesn't need to be visible so this column can just be hidden. If this column isn't added, the Click event won't detect properly and the event listener won't know how to trigger the proper listener. Next, the OnClick event can be added to the DataGrid row. The ItemCreated event for the DataGrid is used to add the necessary JavaScript to each row. The only line that is necessary is the OnClick attribute; the first line changes the cursor to a hand cursor and changes the color of the row background, while the second line removes the color change on mouse out. I split up alternating items and items because I had my DataGrid set up for alternating colors for visibility. If you aren't playing with the colors, you can combine the if statements as you see in the second piece of code.

private void dgRequests_ItemCreated(object sender, 
         System.Web.UI.WebControls.DataGridItemEventArgs e)
//For Datagrig's with alternating colors
{
    if(e.Item.ItemType == ListItemType.AlternatingItem)
    {
        e.Item.Attributes.Add("onmouseover", 
               "this.style.backgroundColor='beige';this.style.cursor='hand'");
        e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#99B3FF';");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" + 
               "('_ctl0$DataGrid1$_ctl" + 
               ((Convert.ToInt32(e.Item.ItemIndex.ToString()))+2) + 
               "$_ctl0','')");
    }
    if(e.Item.ItemType == ListItemType.Item)
    {
        e.Item.Attributes.Add("onmouseover", 
               "this.style.backgroundColor='beige';this.style.cursor='pointer'");
        e.Item.Attributes.Add("onmouseout", "this.style.backgroundColor='#D9E2FF';");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" + 
               "('_ctl0$DataGrid1$_ctl" + 
               ((Convert.ToInt32(e.Item.ItemIndex.ToString()))+2) + 
               "$_ctl0','')");
    }
}

private void dgRequests_ItemCreated(object sender, 
                  System.Web.UI.WebControls.DataGridItemEventArgs e)
//For a single color Datagrid
{
    if(e.Item.ItemType == ListItemType.AlternatingItem || 
       e.Item.ItemType == ListItemType.Item)
    {
        e.Item.Attributes.Add("onmouseover", 
               "this.style.backgroundColor='beige';this.style.cursor='pointer'");
        e.Item.Attributes.Add("onmouseout", 
               "this.style.backgroundColor='#99B3FF';");
        e.Item.Attributes.Add("onclick", "javascript:__doPostBack" + 
               "('_ctl0$DataGrid1$_ctl" + 
               ((Convert.ToInt32(e.Item.ItemIndex.ToString()))+2) + 
               "$_ctl0','')");
    }
}

If you have problems with the post back function lining up, you can unhide the Select column and look at the runtime source to see if the row postback functions match the Select button.

The rest of the code is handled in the same manner as a Select button event; set up the SelecteIndexChanged function and create the event listener. The whole thing is rather simple to set up and can be done for any of the button columns you want, saving you from the perils of user navigation issues!

A small change you will need to make if you choose to use this in VB is to change the __doPostBack function to this:

e.Item.Attributes.Add("onclick", _
   "javascript:__doPostBack('dgRequests$_ctl" & _
   ((Convert.ToInt32(e.Item.ItemIndex)) + 2) & "$_ctl0','')")

Conclusion

When I started looking into this, I wasn't familiar with the __doPostBack function that ASP.NET uses, so for me it was an interesting project. It's a simple way to improve your UI, and hey, a happy user = peace and quiet! *Pulls out towel and sticks thumb out* Till next time!

History

• 11-26-05 - Initial writing.
• 11-28-05 - Changed the OnMouseOver event to handle Firefox better and added an OnClick event for VB.NET.