Wednesday, June 10, 2009

Highlight gridview row on mouse over in asp net web page: Adding effects to the gridview control

Programmers heavily use the asp.net gridview control. Adding some effects to the gridview will change the appearance so that user interactivity increases. One of such effects is highlighting the gridview row on mouseover. With this short background let's go for the design markup of the example gridview.

<asp:GridView ID="gridTest" runat="server" OnRowDataBound="gridTest_RowDataBound" AutoGenerateColumns="false">

<Columns>

<asp:BoundField HeaderText="Status" DataField="Status" />

<asp:BoundField HeaderText="Name" DataField="Name" />

<asp:BoundField HeaderText="Comment" DataField="Comment" />

<asp:BoundField HeaderText="Date" DataField="Date" />

</Columns>

</asp:GridView>

Now we have the asp.net gridview, why not choose the highlighted row's color? Let's define a style sheet class for highlighted row.

<style type="text/css">

/*for gridview row hover, select etc*/

.normalrow

{

background-color:white;

}

.highlightrow

{

background-color:#cccccc;

}

</style>

(The gridview markup shown above is only for example purpose. So you will not see any matches between the figure showing highlighted row and the example markup. Further you will also need to implement your own css styling, if you prefer any). Note the OnRowDataBound event handler in the gridview design markup. We will write some lines of code in this event handler to add the effect of highlighting gridview rows on mouse over. Here goes the code.

//row created event
protected void gridTest_RowCreated(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'");
e.Row.Attributes.Add("onmouseout", "this.className='normalrow'");
}
}

We have specified the css class to adapt by the gridview row on mouse over. At the same time, we need to assign another css class on mouse out so that the gridview will be highlighted only on mouseover and on mouse out the effect will be void. Happy programming!

kick it on DotNetKicks.com pimp it Shout it

5 comments:

Anonymous said...

e.Row.Attributes.Add("onmouseover", "this.className='highlightrow'");
Dont work i dont know why, asking to some friend the only way is put directly the color with style.background = "#cccccc", aparently this.className is not working

e.Row.Attributes.Add("onMouseOver", "this.style.background = '#cccccc'"); -> this works ok.

Any idea? please

Unknown said...

Did you define the style class 'highlightrow' at the head section, as illustrated in the article above? Please sure this. If you have defined the class in the style sheet outside the page, you should reference it first.

Thank you.

Anonymous said...

I have the same problem with this.className...
I didn't search further since this.style.background is OK.

By the way, if you use alternate row style, test e.Row.RowIndex to alternate styles :

protected void myGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes.Add("onmouseover", "this.style.backgroundColor='FF1C1C';");
if (e.Row.RowIndex % 2 == 0)
{ // even
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#FFFFFF';");
} // odd
else{
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor='#DEE4E7';");
}
}
}

Anonymous said...

its very good and very easy to do.

thanks

== Jagdeep Mankotia

Anonymous said...

thanks. it works well and really easy to do.

Post a Comment

Hope you liked this post. You can leave your message or you can put your valuable suggestions on this post here. Thanks for the sharing and cooperation!

Popular Posts

Recent Articles