ASP.Net: Adding client side onClick to a HyperlinkField in GridView

Question

I have an existing GridView which contains the field "partner name". It is sortable by partner name.
Now I need to change the Partner Name field and in some condition make it clickable and alert() something.

The existing code is:

  <asp:GridView ID="gridViewAdjustments" runat="server" AutoGenerateColumns="false" AllowSorting="True" OnSorting="gridView_Sorting" OnRowDataBound="OnRowDataBoundAdjustments" EnableViewState="true">
         <asp:BoundField DataField="PartnerName" HeaderText="Name" SortExpression="PartnerName"/>

I've added the column:

<asp:hyperlinkfield  datatextfield="PartnerName" SortExpression="PartnerName" headertext="Name" ItemStyle-CssClass="text2"/>

which enables me to control the CSS and sort. However, I can't find how to add a client side javascript function to it.
I found that adding :

    <asp:TemplateField HeaderText="Edit">                                     
<ItemTemplate>
      <a id="lnk" runat="server">Edit</a>

enable me to access "lnk" by id and add to its attributes. However, I lose the Sort ability.

What's the correct solution in this case?
Thanks.

Nir · Accepted Answer · 2010-05-31 10:08:35Z

10

The solution I found was using asp:TemplateField this way, without losing the Sorting ability and using the datatextfield using Eval:

 <asp:TemplateField HeaderText="Name" SortExpression="PartnerName">
<ItemTemplate>
        <a onclick="javascript:alert('ok')" href="http://<%#Eval("PartnerName")%>"><%#Eval("PartnerName")%></a>
</ItemTemplate></asp:TemplateField>

answered May 31, 2010 at 10:08

Nir

4,0238 gold badges40 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

David Neale · Accepted Answer · 2010-05-31 10:24:29Z

6

Handle the RowDataBound event. In the event handler...

private void CustomersGridView_RowDataBound(Object sender, GridViewRowEventArgs e)
{
   e.Row.Cells[0].Controls[0].Attributes.Add("onclick", "alert(‘An alert’);")
}

You might need to change Controls[0] to Controls[1].

edited May 31, 2010 at 10:24

answered May 30, 2010 at 10:36

David Neale

17.1k6 gold badges64 silver badges87 bronze badges

3 Comments

Nir Over a year ago

The error when defining an ID is: "Id attribute is invalid for tags that are not inherited from Control".

Nir Over a year ago

thanks - but still you can't give the asp:hyperlinkfield an ID... I see your point though.

David Neale Over a year ago

Yes, I forgot to remove that bit.

Zaheer Ahmed · Accepted Answer · 2012-04-26 11:24:29Z

3

The ClientId generated looks quite different from ID but it always ends with ID. We can not use ID in Javascript or Jquery , so we can do as below:

 <asp:TemplateField  SortExpression="partnername" HeaderText="Partner">
    <ItemTemplate>
      <asp:HyperLink ID="kkx" Text='<%#Eval("partnername")%>'  NavigateUrl="# runat="server">
      </asp:HyperLink>
    </ItemTemplate>
    </asp:TemplateField>

Then in Jquery we can do:

$(function() {
         $("#GridView1 a[id$=kkx]").bind('click', function() {
             alert('hi');
          });
      });

edited Apr 26, 2012 at 11:24

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

answered May 31, 2010 at 17:49

josephj1989

9,7299 gold badges50 silver badges70 bronze badges

Comments

Mark Brackett · Accepted Answer · 2010-05-31 14:06:20Z

0

jQuery. Simple one-liners and unobtrusive:

$('A.text2').click(function() {
    alert('ok');
});

answered May 31, 2010 at 14:06

Mark Brackett

85.9k17 gold badges113 silver badges156 bronze badges

Collectives™ on Stack Overflow

ASP.Net: Adding client side onClick to a HyperlinkField in GridView

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related