Within each row of a GridView (using the TemplateField), I would like to display image buttons that will be used to control the data in that row. I would then like to swap out the images of the buttons when a user first hovers over the GridView row and then again when the user hovers over a specific button.
I can easily accomplish this hover functionality using CSS and image hyperlinks, however when using image hyperlinks, I am unable to raise any server-side events to handle editing the particular row.
In the past, I've used ImageButtons instead of image hyperlinks. I added the CommandName parameter to the ImageButtons and then handled the GridView RowCommand in code:
<asp:ImageButton ID="btnSelect" CommandName="select" runat="server" ImageUrl="~/images/iconSelect1.png" />
In order to change the ImageButton image on hover, I used Javascript:
<asp:ImageButton ID="btnSelect" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" runat="server" ImageUrl="~/images/iconSelect1.png" />
However, in this case, I need to also replace the ImageButton image when a user first hovers over the GridView row itself.
To sum up, when a user hovers over a GridView row, the ImageButtons on that row will all swap image1 for image2. Then when a user hovers over a specific ImageButton, its image will switch from image2 to image 3.
Thanks in advance for any suggestions you may have as to the best approach.
-------------------------------------EDIT-----------------------------------------
Not sure if this is the best approach, but I found a potential solution using jQuery:
<ItemTemplate>
<div class="gvRow">
<asp:ImageButton ID="btnSelect" CssClass="btnSelect" runat="server" ImageUrl="~/images/iconSelect1.png" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" />
</div>
</ItemTemplate>
<script type="text/javascript">
$('.gvRow').hover(
function () {
$(this).find(".btnSelect").attr("src", "../images/iconSelect2.png");
},
function () {
$(this).find(".btnSelect").attr("src", "../images/iconSelect1.png");
}
);
</script>
So far, this is working well, but I'm open to suggestions for handling this better.
Hopefully, this will help someone else.