Use Ajax request to update part of an external page, loaded in a RadPane

HOW-TO: 

Use Ajax request to update part of an external page, loaded in a RadPane

SOLUTION:



Let's assume that we have a RadSplitter and an external page is loaded in one of its RadPanes. When you want to update a part of this nested page you can perform a postback but a better solution is to update by using AJAX.

In order to achieve the described functionality you should go through the following steps:

1. Add a RadAjaxManager control to the content page (the external page which is loaded in the RadPane).
2. Write a javascript function which is placed on the content page and which uses the RadAjaxManager's client-side API to perform an ajax request as shown below:
   
    

   function UpdateLabel()

   {

   $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("UpdateLabel");

   }

3. Handle the ajax request on the server:
   
   

   protected void RadAjaxManager1_AjaxRequest(object sender, Telerik.Web.UI.AjaxRequestEventArgs e)

   {

   if (e.Argument == "UpdateLabel")

   {

   this.Label1.Text = "The content page was updated!";

   }

   }

4. In your main page (the one which contains the RadSplitter control) implement a javascript function which references the RadPane's content iframe's window and executes the UpdateLabel() function:
   
   

   function UpdateContentPage()

   {

   var pane = $find("<%=RadPane2.ClientID %>");

   //When you set the ContentUrl property of the pane of your choice,

   //you actually insert an iframe element into the pane.

   //So in order to get a reference to the content page you have to get a reference to the iframe window

   pane.getExtContentElement().contentWindow.UpdateLabel();

   }

Please, note, that this approach concerns only scenarios in which the main page and the content page are from the same domain due to security reasons.

You can find a working project which demonstrates the above explained approach in the attached archive file.