Can I control when external content of panes is rendered?

[Ed]

I have a simple RadSplitter page with a variable number of panes; in each pane, a local ASPX page is rendered that shows a map of the UK with a graph of data overlaid on top.  The map is the same for every pane but the graphs of data vary: e.g., in the first pane I have data from 1983, in the second data from 1990, and so on.  I am constructing the RadSplitter (rsMaps) on the server like this:

// add a new pane (in the splitter) for each map
for (int i = 0; i < _numMaps; i++)
{
    if (i > 0)
    {
        // add splitter-bars in between each map
        RadSplitBar rsb = new RadSplitBar();
        rsMaps.Items.Add(rsb);
    }
    RadPane rp = new RadPane();
    // set URL
    rp.ContentUrl = _mapUrlBase + Request.QueryString["URL" + i.ToString()] + "&MultiMap=true&Title=" + Request.QueryString["Title" + i.ToString()];
    rsMaps.Items.Add(rp);
}

So far so good -- the URL of each pane is read from the Request string (of the page containing the RadSplitter) and the content is subsequently loaded.  However, the data graphs are getting mixed up!  The results are random but generally what happens is that two of the panes will show the same graph (e.g. for 1983) and some graphs will not be shown at all (e.g. 1990).  I think this is because the panes are loaded simultaneously (in parallel) and that the page is becoming confused somehow.  Therefore I wanted to try loading the panes in sequence (so that one pane must have finished loading before the next one starts) rather than in parallel, to see if that might fix it.

My question, then, is as follows: Can I set the content URLs on the client and force the panes to load one at a time?  I was trying to do something like this, where the OnClientLoaded event of the RadSplitter is handled by the function below:

function LoadPanes(sender)
{
  var rsMaps = sender;
  var panes = rsMaps.getPanes();
  for (var i = 0; i < panes.length; i++)
  {
    var pane = panes[i];
    var contentUrl = getContentUrl(i); // this would come from the Request String
    pane.set_contentUrl(contentUrl);
    // >>>> PSEUDO-CODE: this is the bit I'd like to do <<<<
    while (!pane.HasFinishedLoading)
    {
       sleep(1000);
    }
  }
}

Any insights would be gratefully received!

Ed Graham

[Dobromir]

Hi Ed,

Please review the following KB article:
Display a loading animation while an external page is loading in a RadPane

You can use the same approach to determine if / when the external content of a RadPane has finished loading.

Greetings,
Dobromir
the Telerik team

[Ed]

Thanks Dobromir -- that did the trick.  For the benefit of anyone else reading this, the approach was to put a JavaScript event handler in the content page (i.e., that which is to be loaded into the panes of the RadSplitter) that handles the onload event, like so:

<script type="text/javascript">
  window.onload = function ()
  {
    window.parent.AfterSinglePaneLoaded();
  }
</script>

In the page containing the RadSplitter, I had the following JavaScript code:

<telerik:RadSplitter ID="rsMaps" runat="server" OnClientLoad="LoadPanes">
</telerik:RadSplitter>

<script language="javascript" type="text/javascript">
  // parse request string
  var queryString = window.location.search.substring(1);
  var queryParams = qs(queryString);
  // put constant query params into local variables
  var mapTitleBase = queryParams['MapTitleBase'];
  var mapUrlBase = queryParams['MapUrlBase'];
  var numMaps = queryParams['NumMaps'];
  var mapWidth = 400, mapHeight = 550;
  var rsMaps;
  var currentPaneIndex = 0;

  function LoadPanes(sender)
  {
    // get Telerik client-side object
    rsMaps = sender;
//    var panes = rsMaps.getPanes();
//    alert('in LoadPanes');
    //for (var i = 0; i < panes.length; i++)
    //{
      //var pane = panes[i];
      // set the content URL of the pane to be blank initially: have to do this in order to gain a reference to the containing iFrame object later on
      //pane.set_contentUrl('');
      // this *must* come after the contentUrl has been set
      //var iFrame = pane.getExtContentElement();
      //iFrame.onload = AfterIFrameLoad;
    //}
    // load the first pane (kick-start the loading process)
    LoadSinglePane(currentPaneIndex);
  }

  function LoadSinglePane()
  {
    //alert('in LoadSinglePane');
    var panes = rsMaps.getPanes();
    var pane = panes[currentPaneIndex];
    // set content URL from the request string, then decode it
    var contentUrl = mapUrlBase + queryParams['URL' + currentPaneIndex.toString()] + '&MultiMap=true&NumMaps=' + numMaps.toString() + '&Title=' + queryParams['Title' + currentPaneIndex.toString()] + mapTitleBase + '&Height=' + mapHeight.toString() + '&Width=' + mapWidth.toString();
    // replace the ?, &, = and / symbols using regular expressions (need the "g" for "greedy" to match ALL instances)
    contentUrl = contentUrl.replace(/\%26/g, '&').replace(/\%3f/g, '?').replace(/\%3d/g, '=').replace(/\%2f/g, '/');
    pane.set_contentUrl(contentUrl);
  }

//  function AfterIFrameLoad(sender)
//  {
//    currentPaneIndex++;
//    if (currentPaneIndex < rsMaps.getPanes().length)
//    {
//      //setTimeout('LoadSinglePane(' + currentPaneIndex.toString() + ')', 1000);
//      LoadSinglePane(currentPaneIndex);
//    }
//  }

  function AfterSinglePaneLoaded()
  {
    //alert('in AfterSinglePaneLoaded');
    currentPaneIndex++;
    if (currentPaneIndex < rsMaps.getPanes().length) LoadSinglePane();
  }
</script>

I left the commented-out parts in because they show my previous attempt, which was to attach an event handler to the iFrame element contained in the pane; this worked sometimes but not consistently.  I would have thought the two approaches would be equivalent; however, it turns out that setting the event handler of the content page works whereas setting a handler for the iFrame doesn't.  Answers on a postcard ...