I am pretty new to the whole JavaScript thing. I have a gridview that I want the user to be able to hover over the whole row (believe its the whole TR) and be able to click anywhere and that would be able to select that row. I need the server-side code to be able to know which row was clicked.
I don't really know where to start with this and would love some guidance on:
Best way to add the ability to show that the user is hovering over a row (changing the background colour or something)
How to hook up the ability to click anywhere on that row and fire server-side code to know which row was clicked.
Was reading this article .aspx?ID=109 on firing server-side code from client-side but don't know how to figure out what row it would have e from.
I am pretty new to the whole JavaScript thing. I have a gridview that I want the user to be able to hover over the whole row (believe its the whole TR) and be able to click anywhere and that would be able to select that row. I need the server-side code to be able to know which row was clicked.
I don't really know where to start with this and would love some guidance on:
Best way to add the ability to show that the user is hovering over a row (changing the background colour or something)
How to hook up the ability to click anywhere on that row and fire server-side code to know which row was clicked.
Was reading this article http://www.dotnetcurry./ShowArticle.aspx?ID=109 on firing server-side code from client-side but don't know how to figure out what row it would have e from.
Share Improve this question edited Sep 25, 2020 at 14:16 NearHuscarl 82.2k24 gold badges320 silver badges283 bronze badges asked Feb 10, 2009 at 9:37 JonJon 15.2k30 gold badges95 silver badges133 bronze badges2 Answers
Reset to default 3This should do the trick, just make the gridview selectable
protected void Gridview1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.RowType == DataControlRowType.DataRow)
{
e.Row.Attributes["onmouseover"] = "this.style.background = '#CCCCCC';";
e.Row.Attributes["onmouseout"] = "this.style.background = '#FFFFFF';";
e.Row.Attributes["onclick"] = ClientScript.GetPostBackClientHyperlink(this.Gridview1, "Select$" + e.Row.RowIndex);
}
}
The click will be detected server-side by the GridView click event.
I always work with repeater control, for hover effect on repeater i use jQuery
This goes between the <head> tags
$(document).ready(function() {
$(".tr-base").mouseover(function() {
$(this).toggleClass("trHover");
}).mouseout(function() {
$(this).removeClass("trHover");
});
});
and this is the CSS class.
.trHover{background-color: #D5E5ED;}
If you won't do anything in server-side when the row is clicked you can use jQuery again for the selected effect.