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)
{
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)
{
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.