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='hand'");
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='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 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!
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!
posted @ 2005-11-29 09:19
天梦 阅读(234)
评论(0) 编辑 收藏 网摘 所属分类:
asp.net DataGrid