Yesterday I wrote a post as about adding a mailto link to a GridViewColumn and was surprised with the amount of response i got via email regarding that topic. One person asked me a frequently asked question which i realized I haven't tackled on my blog yet. The question was:

Keith,

   Is it possible to add javascript code in a GridView Column? I'd like to attach a javascript function to a hyperlink that will show an alert that show's the selected Name whenever a user clicks that link.

Thanks,

XXXXX (Identity hidden)

The answer to the question is Yes you can add javascript code to a control inside your GridView and believe it or not there is two ways to do it. There's the easy way and there's the complicated but not hard to do way.

Let's start with the easy way. The easiest way to do this is by create a TemplateField in your GridView and add a HyperLink control inside the ItemTemplate of your TemplateField. Next, you need to modify the NavigateUrl property of the HyperLink control to something similar to this:

<asp:TemplateField>
   <ItemTemplate>
      <asp:HyperLink ID="selectionHyperLink" 
                     runat="server" 
                     NavigateUrl='<%# Eval("Name", "javascript:showMessage(&#039;{0}&#039;);") %>'
                     Text="Select" />
   </ItemTemplate>
</asp:TemplateField>

What the code on my NavigateUrl property does is that it attaches a javascript function called showMessage passing a parameter which in this case is a value from column taken from the binded datasource of the GridView. The javascript for the above code would like this:

<script language="javascript">
   function showMessage(personName)
   {
      alert("You clicked " + personName + "!");
   }
</script>

The second approach is adding a GridView_RowDataBound event to our GridView and add some control logic inside that event but first we need to modify our control attributes:

<asp:TemplateField>
   <ItemTemplate>
      <asp:HyperLink ID="selectionByCodeHyperLink" 
                     runat="server" 
                     Text="Select" />
   </ItemTemplate>
</asp:TemplateField>

As you can see i have removed the NavigateUrl attribute. The reason behind this is because i'll be feeding that information inside the GridViewDatabound event. To accomplish what we have accomplished on our first example we need to decide on two things: 1.) Do we want to use the same logic wherein we specify the javascript via the navigate url? or 2.) Do want to use the Control.Attribute.Add() method of the control to attach a onclick event to it.

Anyway, I'll leave that thinking to you and just show the code for both instead so that you can choose which approach is right for you:

Here's the code for the straight up NavigateUrl assignment of the javascript.

As you can see, all we did was assign the same string that we assigned on our first example. Below is the add attribute version of the above code.

protected void peopleGridView_RowDataBound(object sender, GridViewRowEventArgs e)
{
   //determine if the row type is DataRow
   if (e.Row.RowType == DataControlRowType.DataRow)
   {
      //find the hyperlink control in the GridView
      HyperLink hyperLink = (HyperLink)e.Row.FindControl("selectionByCodeHyperLink");

      //check whether the the hyperlink exist on our GridView
      if (hyperLink != null)
      {
         //get the dataitem assigned to the row.
         //assume that the dataitem is of type Person
         Person person = (Person)e.Row.DataItem;

         //add this code to make the text act as hyperlink
         hyperLink.NavigateUrl = "javascript:;";
         //add our javascript attribute
         hyperLink.Attributes.Add("onclick",String.Format("javascript:showMessage('{0}');", person.Name));
      }
   }
}

And that's it! That's how you add javascript code to controls inside a GridView. Hope that you learned something from this tutorial. 

Want to download the source for this project? Get it here: KeithRull.MappingLinksInGridViews.zip (3.28 KB)