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

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.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

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(" rel="nofollow noreferrer noopener"PartnerName")%>"><%#Eval("PartnerName")%></a>
</ItemTemplate></asp:TemplateField>

Method 2

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].

Method 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');
          });
      });

Method 4

jQuery. Simple one-liners and unobtrusive:

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

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0