Making the whole cell a Hyperlink when mouse is moved over it

MikeMCSD
MikeMCSD used Ask the Experts™
on
I want to make this whole cell (column) a hyperlink, so when the mouse is moved over it,
the cell back color changes, and you can click any where in the cell to go to the link.

<asp:TemplateField ItemStyle-Width="35%">
<ItemTemplate>
<a href="ProductDetails.aspx?ProductId=<%#Eval("ProductId")%>" style="font-size:14px;">
<%#Server.HtmlEncode(Eval("Name").ToString())%>
</a>
</ItemTemplate></asp:TemplateField>

How can I do this? thanks
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
Commented:
try this:

 
<asp:TemplateField ItemStyle-Width="35%">
<ItemTemplate>
<a href="ProductDetails.aspx?ProductId=<%#Eval("ProductId")%>" class="wholeCell" >
<%#Server.HtmlEncode(Eval("Name").ToString())%>
</a>
</ItemTemplate></asp:TemplateField>

<style type="text/css">
.wholeCell {font-size:14p}
.wholeCell:hover {background:red;}
</style>

Open in new window

Author

Commented:
thanks .  .

When I tried that, it only made the text of the cell change its back color, not the whole cell.

I tried this :

<asp:TemplateField ItemStyle-Width="35%" ItemStyle-CssClass="wholeCell">
<ItemTemplate>
<a href="ProductDetails.aspx?ProductId=<%#Eval("ProductId")%>" class="wholeCell" style="font-size:14px;" >
...

When I move the mouse over, the whole cell changes back color, but only the text has a clickable link.

Being this is a ASP.NET <asp:GridView>, it's hard to do these kind of things because you don't know what the
gridview is doing behind the scenes. Just have to experiment I guess.

Commented:
Can you do it like follows?
 
<a href="ProductDetails.aspx?ProductId=<%#Eval("ProductId")%>" class="wholeCell" >
<asp:TemplateField ItemStyle-Width="35%">
<ItemTemplate>
<%#Server.HtmlEncode(Eval("Name").ToString())%>
</ItemTemplate></asp:TemplateField>
</a>

Open in new window

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
was thinking of trying that but figured the compiler wouldn't like that, and it didn't.
I'm guessing this is not possible to do with these templates in the grid view.
Just have to keep experimenting I guess.

Commented:
Try this:

Protected Sub GridView1_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.DataBound
        For Each row As GridViewRow In GridView1.Rows
            row.Cells(1).Attributes("onmouseover") = "this.style.cursor='pointer';this.style.textDecoration='none';"
        Next
    End Sub

Open in new window

Commented:
ignore the above..i forgot to check type of row. try the following:

  Protected Sub GridView1_DataBound(ByVal sender As Object, ByVal e As System.EventArgs) Handles GridView1.DataBound
        For Each row As GridViewRow In GridView1.Rows
            If row.RowType = DataControlRowType.DataRow Then
                row.Cells(1).Attributes("onmouseover") = "this.style.cursor='pointer';this.style.textDecoration='none';"
            End If
        Next
    End Sub

Open in new window

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial