Dynamic Nested ASP.Net GridView using AJAX, Webservices and jQuery

Introduction

I haven’t blogged for a while, I have been really swamped at work.

Anyway last week I after using jQuery for a while (for those who don’t know jQuery is awesome, take the time to try it) I had a brilliant idea. After numerous previous attempts at building nested ASP.Net GridViews I thought hang on a minute, once a gridview has been rendered it is normal HTML. Thus its a table with rows(<tr>) and columns(<td>), so all I need to do is somehow get a empty row after every row to act as a place holder(<div></div>) for the nested grid.

RowDataBound

I did a couple of Google searches and found weird and wonderful ways to implement the empty rows but most of them were far to complex for what I needed. Then I found a post (sorry I cant remember the source) with the following code for the RowDataBound event:

Protected Sub GridView_RowDataBound(ByVal sender As Object, ByVal e As System.Web.UI.WebControls.GridViewRowEventArgs)
  If e.Row.RowType = DataControlRowType.DataRow ThenRead More »

jQuery: “Could not get the display property. Invalid argument.” error in Internet Explorer 7

I’m really very new (using it for a week or two) to jQuery myself and this had me stumped for a few minutes. I got the error “Could not get the display property. Invalid argument.” in Internet Exploder 7 and not in Firefox 3.6 so typical :). I went through the usual troubleshooting method of commenting line by line I found the offending line.

It looked something like this

$("#helpdiv").animate({ position: "fixed", top: ($(window).height() - $("#helpdiv").height()) - 2 }, 2000);

So I commented out all the options between {} and added them back one by one and found that it was the position: “fixed” option that was causing the error.

Solution:

Remove the position: “fixed” option from the animate and set it with css then do the animate.

$("#helpdiv").css({ position: "fixed" });
$("#helpdiv").animate({ top: ($(window).height() - $("#helpdiv").height()) - 2 }, 2000);