Home / Community / Forums / ASP.NET > Ajax > Incremental page fetch

• Lars

  Posted on Mar 21, 2007 (permalink)

  Hi,
  We have a webform split up into five usercontrols. Our page is quite slow to render do to that the usercontrols access a few different backend systems that are quite slow. Since we've split the page into several autonomous parts we hope that it is possible to apply a incremental page fetch technique on page load. To make the usercontrols render asyncronously.
  
  Is it at all possible to wrap our usercontrols in rad.AjaxPanels to achieve this? If so, how do we trigger the async loading/rendering of the usercontrols when the page loads.
  
  
  
  

  Reply

• Johan Master

  Posted on Mar 21, 2007 (permalink)

  You can start with five rad AjaxPanels - only the first will embed the needed first user control, while the other fours will contain only an empty asp:Panel control.
  
  Then, on client-side page load (body.onload) - you can call the AjaxRequest javascript method for each of the four AjaxPanels with timeout and load user control, as specified in this help article:
  
  http://www.telerik.com/help/aspnet/ajax/ajxClientSideAPI.html
  
  In the sever-side AjaxRequest event handler, just load the user control and add it to the controls collection of the Panel as specified here:
  http://www.telerik.com/help/aspnet/ajax/ajxLoadUserControls.html
  
  
  

  Reply

• Telerik Admin

  Posted on Mar 21, 2007 (permalink)

  Hi Lars,
  
  Please check the following topic which is suited for a different purpose, but hopefully you can see that this technique can work for your scenario as well.
  
  Best wishes,
  Steve
  the telerik team

  
  www.telerik.com | dnn.telerik.com | www.sitefinity.com

  Reply

• Lars

  Posted on Apr 4, 2007 (permalink)

  Thanks for your quick reply! This def got me headed in the right direction :-)
  However we're facing some new issues. Our usercontrols will be used as webparts and thus needs to be autonomous. Hence we can't ajaxify the page that the usercontrols reside on. Trying to make the controls as autonomous as possible we have attached function u suggested to the window.onLoad in each control so that each control looks somehing like this.
  

  1	<td class="searchBox">
  2	<rada:RadAjaxPanel ID="radAjaxPanel" runat="server" OnAjaxRequest="radAjaxPanel_AjaxRequest" LoadingPanelID="AjaxLoadingPanel1" >
  3	<asp:Repeater ID="searchResultsRepeater" runat="server" DataSource='<%#SomeStuff%>'>
  4	<HeaderTemplate>
  5	<table width="100%">
  6	</HeaderTemplate>
  7	<ItemTemplate>
  8	<tr>
  9	<td>
  10	<span style="white-space: nowrap;"><a href="stuffOverview.aspx?stuff=<%#Eval("stuff")%>">
  11	<%#Eval("stuff") + " " + GetDisplayName(Container.DataItem as stuff) + ", " + GetDisplayAddress(Container.DataItem as stuff)%>
  12	</a></span>
  13
  14	</td>
  15	</tr>
  16	</ItemTemplate>
  17	<FooterTemplate>
  18	</table> </table>
  19	</FooterTemplate>
  20	</asp:Repeater>
  21
  22	</rada:RadAjaxPanel>
  23	<radA:AjaxLoadingPanel ID="AjaxLoadingPanel1" runat="server" Height="75px" Width="75px">
  24	<asp:Image ID="Image1" runat="server" AlternateText="Loading..." ImageUrl="~/RadControls/Ajax/Skins/Default/Loading.gif" />
  25	</radA:AjaxLoadingPanel>
  26
  27
  28	<script type="text/javascript">
  29
  30	window.onload = function()
  31	{
  32	setTimeout( function(){
  33	window[ "<%= radAjaxPanel.ClientID %>"].AjaxRequest("doSearch");
  34	}, 100);
  35	}
  36	</script>
  37	</td>

  
  Our problem is now that it seems that the window.onload event only works wit one registered function...Any suggestions on how to work around this issue? or are we doing something wrong in our scripts?
  
  Cheers!
  

  Reply

• Mike Master

  Posted on Apr 4, 2007 (permalink)

  You can use the javascript attachEvent (IE) or addEventListener (FireFox) to add multiple event to the window.onload event. For example, something similar to
  
  
  if(typeof window.addEventListener != 'undefined') 
  {
      window.addEventListener('load', myFunction, false);
  }
  else if(typeof window.attachEvent != 'undefined')  
  {
      window.attachEvent('onload', myFunction);
  }
  
  
  function MyFunction()
  {
      setTimeout( function(){
          window[ "<%= radAjaxPanel.ClientID %>"].AjaxRequest("doSearch");
      }, 100);
  }
  

  Reply

• Johan Master

  Posted on Apr 5, 2007 (permalink)

  This approach is good, the only thing I believe will not work is using a static function (MyFunction in this case), since it will be overwritten for each user control The anonymous functions method originally used by Lars in addition to addEventListener / attachEvent will work.
  
  if(typeof window.addEventListener != 'undefined') 
  {
      window.addEventListener('load', function() { setTimeout( function(){
          window[ "<%= radAjaxPanel.ClientID %>"].AjaxRequest("doSearch");
  }, 100);  } , false);
  }
  else if(typeof window.attachEvent != 'undefined')  
  {
      window.attachEvent('onload', function() { setTimeout( function(){
          window[ "<%= radAjaxPanel.ClientID %>"].AjaxRequest("doSearch");
  }, 100);  } );
  }
  
  

  Reply

Back to Top

Home / Community / Forums / ASP.NET > Ajax > Incremental page fetch