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.

Answer 1

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

Answer 2

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://&lt;%#Eval("PartnerName")%&gt;"&gt;&lt;%#Eval("PartnerName")%&gt;&lt;/a&gt;
</ItemTemplate></asp:TemplateField>

Answer 3

jQuery. Simple one-liners and unobtrusive:

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

Answer 4

The ClientId generated looks quite different from ID but it always ends with ID. We cannot 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');
            });
        });