I've found some interesting notes on ASP .NET's GridView, it's limitations and work arounds. For work I was looking for a way to execute JavaScript from clicking a link on a GridView Cell. An example would be to having a list of transactions and wanting to click a link to update it's details. I noticed that many functions of GridView used <a> tags to execute JavaScript. An example would be:
-
<a href="javascript:myFunction('variable');">Link</a>
Since I had experience with the HyperLinkField before, I thought I would add a HyperLinkField to my GridView and set the DataNavigateUrlFields to the needed fields and the DataNavigateUrlFormatString to use the fields properly. I was hoping to accomplish it by using the following code, which in turn I found out this solution does not work:
-
<asp:HyperLinkField DataNavigateUrlFields="UserID,Date" DataNavigateUrlFormatString="javascript:updatePanel('{0}','{1:d}');"
-
HeaderText="View" Text="Details" />
It turns out that there is a bug with the DataNavigateUrlFormatString and HyperLinkField that when trying to use javascript inside, it strips the href attribute and leaves just a <a>Text</a>, not giving the user a link. I found information here at this forum post. This is as of ASP .NET 2.0 and I don't know about 3.0 or 3.5. As show in the forum post, this is the correct way to insert JavaScript into your gridview:
-
<asp:TemplateField HeaderText="Details">
-
<ItemStyle CssClass="viewLines" />
-
<ItemTemplate>
-
<a id="user<%# Eval("userid") %>" href="javascript:updatePanel('<%# Eval("userid") %>','<%# Eval("date") %>');">View User</a>
-
</ItemTemplate>
-
</asp:TemplateField>
Now, using this technique I was able to use jQuery to insert a row below the clicked item and add additional information.
-
<script type="text/javascript">
-
function updatePanel(user,date)
-
{
-
$('#LineItems').remove(); // remove previous entries anywhere in the grid
-
-
// Now I got up two parents, to get to the TR tag, and I append after it another row with id's so I can identifier them easily with jQuery.
-
$('#tran'+tran_id).parent().parent().after('<tr id="LineItems"><td>Add. Info.</td><td colspan=\"10\" id="LineItemsContent">Getting information...</td></tr>');
-
// I load the information through an ajax call
-
$('#LineItemsContent').load('Details.aspx?u='+user+'&date='+date);
-
-
}
-
</script>
I hope this can help people who are struggling to figure out why their HyperLinkFields won't work correctly with JavaScript.
Justin
Related Posts
- Empowering JavaScript Through jQuery Once I discovered jQuery, my life as a web developer changed. There are few libraries, tools, etc. that I can honestly say have completely changed the way I code. In all honesty, jQuery makes the difficult aspects of JavaScript and turns them into a strength. I recommend it over any...
- ASP .NET, GridViews, SqlDataSource, and Guid Parameters Another thing I ran into today. I actually ran into it awhile back but since I ran into it again today I'd thought I'd post on it to help anyone who happens to find it. Problem You have a GridView and a SqlDataSource that takes 1 or more Guids as...
- iPhone Web Development: Controlling the viewport via Javascript Lately I've been doing a lot of iPhone web applications. A client wanted to create a portion of their site for the iPhone, and they wanted it to look a very specific way. In order to do this we had to set the view port's maximum-scale and minimum-scale to 1....
- ASP .NET, LINQ, GridViews, and GUID Errors I found a simple problem today. Here is the deal, there were several times where I had to base a LinqDataSource off a Guid that I would set in the Page_Load(). I created an<asp:HiddenField /> to hold the value so all my DataSources could pull it from the control. The...
- Page.FindControl() Returning Null Issues and Solutions Within Another Control Alright, I'm going to have a lot of blog posts over the next few days going over my wonderful expereinces learning how to create advanced server controls, and just how hard it is to find good information on the subject. But the problem I ran into today was having Page.FindControl()...
Recent Comments