mouse rollover row on datagrid

B

Brian Henry

I have a data grid with data, which each row will tie to a link to open that
row in a seperate window of data for it, the data grid has multiple columns.
I want it so when a mouse rolls over a row, the entire row (all columns) are
displayed in a background color. I have figured out how to do it cell by
cell, just not the entier row at once. How would i do this? thanks!
 
J

jongalloway

Brian -
I think the best way to do this is to define two tr classes - on and
off. Then define td classes that inherit from the tr's with the right
background colors. Then you just have mouseover and mouseout events
that set the class. Sounds more complex than it is.

Sample code (tested in IE6 and Firefox):
<html>
<head>
<style>
TABLE
{
border: none;
border-collapse: collapse;
}
TR.off TD
{
background-color:white;
}
TR.on TD
{
background-color:silver;
}
</style>
</head>
<body>
<table>
<tr class=off onmouseover="this.className='on'"
onmouseout="this.className='off'">
<td>column 1</td>
<td>column 2</td>
</tr>
<tr class=off onmouseover="this.className='on'"
onmouseout="this.className='off'">
<td>column 1</td>
<td>column 2</td>
</tr>
<tr class=off onmouseover="this.className='on'"
onmouseout="this.className='off'">
<td>column 1</td>
<td>column 2</td>
</tr>
<tr class=off onmouseover="this.className='on'"
onmouseout="this.className='off'">
<td>column 1</td>
<td>column 2</td>
</tr>
</table>
</body>
</html>

Some other references:
Article on AListApart for a system that does this automatically for all
tables on a page: http://www.alistapart.com/articles/tableruler/

CodeProject server control that extends a DataGrid to write out the
javascript for you:
http://www.codeproject.com/aspnet/AlPaMOD.asp
- Jon
http://weblogs.asp.net/jgalloway
 
S

Steven Cheng[MSFT]

Thanks for Jon's good suggestions.

Hi Brian,

I think Jon's idea is pretty good and as for webform datagrid, the "<tr>"
should mapping to the DAtaGridItem class and we can reference it and set
the "onmouseover" and "onmouseout" attribute for it. And I suggest that you
set the attributes in the DataGrid's "ItemCreated" event. Here is a simple
demo page, you may have a look :

===============aspx ================
<HTML>
<HEAD>
<title>mouseeffect</title>
<style>

TR.off { BACKGROUND-COLOR: white }

TR.on { BACKGROUND-COLOR: yellow }

</style>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<table width="100%" align="center">
<tr>
<td>
<asp:DataGrid id="dgStyle" runat="server" AutoGenerateColumns="False">
<Columns>
<asp:BoundColumn DataField="Column1"
HeaderText="Column1"></asp:BoundColumn>
<asp:BoundColumn DataField="Column2"
HeaderText="Column2"></asp:BoundColumn>
<asp:BoundColumn DataField="Column3"
HeaderText="Column3"></asp:BoundColumn>
</Columns>
</asp:DataGrid>
</td>
</tr>
</table>
</form>
</body>
</HTML>

========code behind=================
public class mouseeffect : System.Web.UI.Page
{
protected System.Web.UI.WebControls.DataGrid dgStyle;

private void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
Bind_Data();
}
}

private void Bind_Data()
{
DataTable dt = new DataTable("dt");
dt.Columns.Add("Column1",typeof(string));
dt.Columns.Add("Column2",typeof(string));
dt.Columns.Add("Column3",typeof(string));

for(int i=0;i<5;i++)
{
DataRow row = dt.NewRow();
row[0] = "Column1Value"+ i;
row[1] = "Column2Value"+ i;
row[2] = "Column3Value"+ i;
dt.Rows.Add(row);
}

dgStyle.DataSource = dt;
dgStyle.DataBind();

}

#region Web Form Designer generated code
override protected void OnInit(EventArgs e)
{
InitializeComponent();
base.OnInit(e);
}


private void InitializeComponent()
{
this.dgStyle.ItemCreated += new
System.Web.UI.WebControls.DataGridItemEventHandler(this.dgStyle_ItemCreated)
;
this.Load += new System.EventHandler(this.Page_Load);

}
#endregion

private void dgStyle_ItemCreated(object sender,
System.Web.UI.WebControls.DataGridItemEventArgs e)
{
if(e.Item.ItemType == ListItemType.Item || e.Item.ItemType ==
ListItemType.AlternatingItem)
{
e.Item.Attributes.Add("onmouseover","this.className='on'");
e.Item.Attributes.Add("onmouseout","this.className='off'");
}
}
}

=======================================

Hope also helps. Thanks.

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 
S

Steven Cheng[MSFT]

You're welcome Brian.

I'm also glad that it's of assistance. Have a good day!

Regards,

Steven Cheng
Microsoft Online Support

Get Secure! www.microsoft.com/security
(This posting is provided "AS IS", with no warranties, and confers no
rights.)
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,483
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top