Can I control when external content of panes is rendered?

3 posts, 1 answers
  1. Ed
    Ed avatar
    124 posts
    Member since:
    Jan 2008

    Posted 30 Sep 2011 Link to this post

    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();
        RadPane rp = new RadPane();
        // set URL
        rp.ContentUrl = _mapUrlBase + Request.QueryString["URL" + i.ToString()] + "&MultiMap=true&Title=" + Request.QueryString["Title" + i.ToString()];

    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
        // >>>> PSEUDO-CODE: this is the bit I'd like to do <<<<
        while (!pane.HasFinishedLoading)

    Any insights would be gratefully received!

    Ed Graham
  2. Answer
    Dobromir avatar
    1633 posts

    Posted 03 Oct 2011 Link to this post

    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.

    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Ed
    Ed avatar
    124 posts
    Member since:
    Jan 2008

    Posted 03 Oct 2011 Link to this post

    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 ()

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

    <telerik:RadSplitter ID="rsMaps" runat="server" OnClientLoad="LoadPanes">
    <script language="javascript" type="text/javascript">
      // parse request string
      var queryString =;
      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
          // 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)
      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, '/');
    //  function AfterIFrameLoad(sender)
    //  {
    //    currentPaneIndex++;
    //    if (currentPaneIndex < rsMaps.getPanes().length)
    //    {
    //      //setTimeout('LoadSinglePane(' + currentPaneIndex.toString() + ')', 1000);
    //      LoadSinglePane(currentPaneIndex);
    //    }
    //  }
      function AfterSinglePaneLoaded()
        //alert('in AfterSinglePaneLoaded');
        if (currentPaneIndex < rsMaps.getPanes().length) LoadSinglePane();

    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 ...
Back to Top