Gridview within an UpdatePanel does not render in the DOM

Question

I'm using the ASP net Ajax toolkit and have a GridView within the UpdatePanel, everything works fine.

When I attempt to run some jquery against the table that should be generated, there isn't any sign of the gridview (or table HTML) in the DOM that is returned. I am assuming this is all done by ASP generated Javascript?

How can I perform any actions on a gridview that lies within an UpdatePanel?

Answer 1

ASP.NET will mangle the names for controls under certain conditions. You may want to look at the generated source to make sure that you are referencing the control by the name given it by ASP.NET when it is generated. It probably isn't the name you gave it in the mark up.

Answer 2

If you can generate your javascript in the codebehind, in the Page_Load for insistence, then you can inject your GridView1.ClientID, etc into your javascript. (I use a TextBox here for instance, but it follows the same concept.)

protected void Page_Load(object sender, EventArgs e)
{
    string js = "$(document).ready(function(){$(\"#" + this.TextBox1.ClientID + "\").text('hello world');});";
    HtmlGenericControl script = new HtmlGenericControl("script");
    script.Attributes.Add("type", "text/javascript");
    script.InnerHtml = js;
    Page.ClientScript.RegisterStartupScript(this.GetType(), "key", js, true);
}

Answer 3

There are three solutions to this that I can think of. The first, injecting javascript from the server with ClientID as Dave suggests, works but gets really messy really fast. I did this for a while but that kind of tight-coupling of server-side and client-side causes problems.

The second is to provide another way to identify the entities, such as a css class. This is better than the first option, but leaves you with a lot of extraneous class definitions you have to keep straight.

The solution I prefer is to use a javascript framework like jQuery that has a selector engine. That way, you can get around the UniqueID garbage through some clever selection and DOM traversal.

Lets say you have a control named myControl. ASP.Net will generate a huge namespace before that so there aren't any id collisions when it renders. But you can select every myControl by doing $('[id$=myControl]') which selects every object with an id that ends with myControl. There are probably analogous ways of doing this in other frameworks, but I'm not familiar enough with them to give an example.