Referencing content page in a splitter pane from the parent page and vice versa

HOW-TO
Reference content page in a splitter pane from the parent page and vice versa




DESCRIPTION
Consider that you have inserted a RadSplitter control in an aspx page. Let us call that page a parent page. Additionally, assume that the ContentUrl property of one of the splitter panes is set to another aspx page (content page). On various occasions you may need to reference the content page from within the parent page or to reference the parent page from within the content page. This KB article's aim is to clarify how you can deal with such situations.

Note that you can apply this solution only in case both the parent page and the content page are in the same security domain.

SOLUTION

1. Let us first refer to the case in which you want to reference the parent page from within the content page of RadSplitter. In this situation you can get a reference to the page that contains the RadSplitter control (the parent page) by using the parent keyword in your javascript function. You can further use this reference in order to obtain a reference to the RadSplitter object itself. The following code fragment demonstrates the usage of the parent keyword in the context of the discussed scenario:  
    

   <script> <!-- //parent page script

   //obtain reference to the RadSplitter object-->

   function GetRadSplitter ()

   {

   return <%= [RadSplitter_ID].ClientID %>;

   }

   </script>

   <script> <!-- //content page script

   ...

   //obtain reference to the parent page

   var splitterPageWnd = window.parent;

   //call a method from the parent page-->

   var splitterObject = splitterPageWnd.GetRadSplitter();

   ...

   </script>

2. Now we will refer to the second case, namely when you would like to obtain reference to the content page from within the parent page.
   
   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. Below is a simple example demonstrating how this can be done:
   
   

   <script>

   ...

   var splitter = <%= [Your_Splitter_ID].ClientID %>;

   var pane = splitter.GetPaneById("<%= [Your_Pane_ID].ClientID %>");

   var iframe = pane.GetExtContentContainerElement();

   var contentWindow = iframe.contentWindow;

   ...

   </script>

For a simple example that demonstrates both functionalities, please download the attached zip archive and extract the files.




The logic when using RadSplitter for ASP.NET AJAX (Prometheus) and referencing content page in a splitter pane from the parent page and vice versa is the same. The only difference is that its client-side API differs from the one of RadSplitter for ASP.NET due to MS AJAX Framework specific conventions. You should also obtain reference to the RadSplitter object in the manner, in which ajax object are referenced - using the $find method.

This being said, the above declared function should look like the following ones when using RadSplitter for ASP.NET AJAX:

1. Reference the parent page from within the content page of RadSplitter:
   
   

   <script> <!-- //parent page script

   //obtain reference to the RadSplitter object-->

   function GetRadSplitter ()

   {

   return $find("<%= RadSplitter1.ClientID %>");

   }

   </script>

   <script> <!-- //content page script

   ...

   //obtain reference to the parent page

   var splitterPageWnd = window.parent;

   //call a method from the parent page-->

   var splitterObject = splitterPageWnd.GetRadSplitter();

   ...

   </script>

2.  Reference the content page from within the parent page:
   
   
   

   <script>

   ...

   var splitter = $find("<%= RadSplitter1.ClientID %>");

   var pane = splitter.getPaneById("<%= RadPane2.ClientID %>");

   var iframe = pane.getExtContentElement();

   var contentWindow = iframe.contentWindow;

   contentWindow.AlertFromChild();

   ...

   </script>

You can find a sample, running demonstration of the discussed approaches when using RadSplitter for ASP.NET AJAX in the attached archive file, called ReferencingParent_Or_Content_Prometheus.zip.