[Solved] Run javascript *after* RadControls are created (client-side)

[Scott R]

Hi,

I would like to run some Javascript directly *after* the RadControls are created on the client-side. If I use "ScriptManager.RegisterStartupScript" then the javascript is inserted *before* the RadControls are created.

What I am ultimately trying to do is get a "handle" to all of my client-side RadControls. I know that I can call $find to get them, but I prefer to assign them all to variables on page load then access those variables. Here is an example:

The javascript should be generated on the server like this:

js =

"var BAN = $find('" + BAN.ClientID + "'); ";

 

 

ScriptManager.RegisterStartupScript(this, this.GetType(), "InitControls", js, true);

 

Now, on the client, I could just access "BAN.get_value()". The problem, of course, is that "$find" fails to find the control because this script executes before the client-side control is created. To work-around the problem I am currently doing a two step process (declare the variables then assign them during page load) like this:

string js = "var BAN, CompanyName, Contact, Address1, Address2, City, State, Zip, LocalBAN, Phone, Email; ";
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "DeclareControls", js, true);

js  = "BAN = $find('" + BAN.ClientID + "'); ";
js += "CompanyName = $find('" + CompanyName.ClientID + "'); ";
js += "Contact = $find('" + Contact.ClientID + "'); ";
js += "Address1 = $find('" + Address1.ClientID + "'); ";
js += "Address2 = $find('" + Address2.ClientID + "'); ";
js += "City = $find('" + City.ClientID + "'); ";
js += "State = $find('" + State.ClientID + "'); ";
js += "Zip = $find('" + Zip.ClientID + "'); ";
js += "LocalBAN = $find('" + LocalBAN.ClientID + "'); ";
js += "Phone = $find('" + Phone.ClientID + "'); ";
js += "Email = $find('" + Email.ClientID + "'); ";
ScriptManager.RegisterClientScriptBlock(this, this.GetType(), "InitControls", "function InitControls() {" + js + "}", true);
ScriptManager.RegisterStartupScript(this, this.GetType(), "InitControlsCall", "Sys.Application.remove_load(InitControls); Sys.Application.add_load(InitControls);", true);

If I could just get my javascript to run *after* the RadControls are created I could clean this up a bit.

Thanks!
Scott

P.S. It would be nice to be able set a property on the control (e.g. RadControl.ClientSideId) and have the control do this for us automatically!

[Scott R]

Oh, I guess I should mention that the main motivation for wanting to declare a global client-side variable to reference the control is so that I can put all of my javascript in an external .js file. The external file still needs to reference the RadControls, but doing the regular "$find('"+ServerControl.ClientID+"');" method doesn't work for external js files. So the page needs to declare global variables referencing the controls so that the js file can use them.

[Martin]

Hello Scott,

Please review the attached sample project demonstrating how to declare your external Javascript file from the server and still be able to reference the needed controls.

I hope this helps.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.

[Scott R]

Thanks for the reply Martin.

Using an anonymous js function and not pre-declaring the javascript variables does simplify it a little.

I notice that you used "Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded" instead of "

Sys.Application.add_load". Is there any particular reason for this?

Also, is the call to "window.setTimeout" really necessary? Here's what I ended up with on my own:

 

string js = "Sys.Application.add_load(function () {";
js += "BAN = $find('" + BAN.ClientID + "'); ";
js += "});";
ScriptManager.RegisterStartupScript(this, this.GetType(), "InitControls", js, true);

It seems to work fine.

Thanks again.
Scott

[Martin]

Hello Scott,

The handler added through "Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded" is called before the one added with "Sys.Application.add_load". Using the PageRequestManager approach under Internet Explorer causes error without using the SetTimeOut() function. However under other browsers (Firefox, Opera, Chrome) the SetTimeOut() function is not needed.
So the "Sys.Application.add_load" method seems to be more suitable in this case. For more information I would suggest you to review the following links:

ASP.NET AJAX Client Life-Cycle Events

Sys.WebForms.PageRequestManager pageLoaded Event

Sys.Application.load Event

I hope this helps.

Regards,
Martin
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.