1

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.

1 Answer 1

0

Your solution looks like a good one!

For consistency, I would have tweaked it slightly so that jquery was used to implement both hover behaviours, e.g. by adding this to your existing script:

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.