Multiple AJAX calls on pageLoad

[Greg]

I'm developing a dashboard type web page where I have multiple (6 currently, more will be added later) widgets I would like to load asynchronously after the page loads.  I would like each widget to be it's own UserControl, but if that is not possible, I can put everything on one page.  It is also desired for each widget to have its own loading panel, so a widget is finished loading, their respective panel is hidden and the widget is usable.  

I need these to all begin loading at the same time because each widget is pulling data from different systems and could take several seconds for each one.  If they are loaded serially, it will take a long time for the page to completely load.  I've tried using both the RadAJAXManager and RadAJAXPanels and have been unable to come up with a working solutions.

A similar question was posted (http://www.telerik.com/community/forums/aspnet-ajax/ajax/multiple-radajaxpanel-s-invoked-on-pageload-causes-errors.aspx) but I never saw a solutions posted that worked.

Here is the one version of the code I'm trying.

<telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
    <script type="text/javascript">
        function pageLoad(sender, eventArgs) {
            if (!eventArgs.get_isPartialLoad()) {
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadWidget1");
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadWidget2");
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadWidget3");
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadWidget4");
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadWidget5");
                $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("LoadWidget6");
            }
        }
    </script>
</telerik:RadCodeBlock>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel2" runat="server" BackColor="Red"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel3" runat="server" BackColor="Red"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel4" runat="server" BackColor="Red"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel5" runat="server" BackColor="Red"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel6" runat="server" BackColor="Red"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" RequestQueueSize="10" EnableAJAX="true">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                <telerik:AjaxUpdatedControl ControlID="panel2" LoadingPanelID="RadAjaxLoadingPanel2" />
                <telerik:AjaxUpdatedControl ControlID="panel3" LoadingPanelID="RadAjaxLoadingPanel3" />
                <telerik:AjaxUpdatedControl ControlID="panel4" LoadingPanelID="RadAjaxLoadingPanel4" />
                <telerik:AjaxUpdatedControl ControlID="panel5" LoadingPanelID="RadAjaxLoadingPanel5" />
                <telerik:AjaxUpdatedControl ControlID="panel6" LoadingPanelID="RadAjaxLoadingPanel6" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManager>

<asp:Panel ID="panel1" runat="server"></asp:Panel><br />
<asp:Panel ID="panel2" runat="server"></asp:Panel><br />
<asp:Panel ID="panel3" runat="server"></asp:Panel><br />
<asp:Panel ID="panel4" runat="server"></asp:Panel><br />
<asp:Panel ID="panel5" runat="server"></asp:Panel><br />
<asp:Panel ID="panel6" runat="server"></asp:Panel><br />

Protected Sub RadAjaxManager1_AjaxRequest(sender As Object, e As Telerik.Web.UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
    If e.Argument = "LoadWidget1" Then
        System.Threading.Thread.Sleep(1000)
        panel1.Controls.Add(New LiteralControl(Now.ToLongTimeString))
    ElseIf e.Argument = "LoadWidget2" Then
        System.Threading.Thread.Sleep(1000)
        panel2.Controls.Add(New LiteralControl(Now.ToLongTimeString))
    ElseIf e.Argument = "LoadWidget3" Then
        System.Threading.Thread.Sleep(3000)
        panel3.Controls.Add(New LiteralControl(Now.ToLongTimeString))
    ElseIf e.Argument = "LoadWidget4" Then
        System.Threading.Thread.Sleep(4000)
        panel4.Controls.Add(New LiteralControl(Now.ToLongTimeString))
    ElseIf e.Argument = "LoadWidget5" Then
        System.Threading.Thread.Sleep(5000)
        panel5.Controls.Add(New LiteralControl(Now.ToLongTimeString))
    ElseIf e.Argument = "LoadWidget6" Then
        System.Threading.Thread.Sleep(6000)
        panel6.Controls.Add(New LiteralControl(Now.ToLongTimeString))
    End If
End Sub

Any guidance would be greatly appreciated.

Thanks,
Greg

[Maria Ilieva]

Hi Greg,

I'm afraid that the exact required scenario could not be implemented with the ajax framework. It is not possible to fire multiple ajax request finishing independently. The only possibility you have is to enable the RadAjax queuing mechanism as you already use and have the asynchronous loading of each independent module.

Greetings,
Maria Ilieva
the Telerik team

[Greg]

Maria,
Could you explain this a little more?  I'm not sure I'm following.

The only possibility you have is to enable the RadAjax queuing mechanism as you already use and have the asynchronous loading of each independent module.

Thanks,
Greg

[Maria Ilieva]

Hi Greg,

With this statement I mean that loading the different modules at the same time would not be possible with the ajax framework. You could enable the RadAjaxManager queuing mechanism by setting RequestQueueSize property and the ajax requests will be added in a queue and will be performed one after another.

All the best,
Maria Ilieva
the Telerik team