This is a migrated thread and some comments may be shown as answers.

Load User Control After Page Load with Progress Bar

3 Answers 530 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
BC
Top achievements
Rank 1
BC asked on 26 Apr 2011, 11:57 PM
I have a user control that is taking a long time to load (15-20 seconds) mainly because there are many data entry fields and loops to load each field. It is optimized as best I can (one db roundtrip, caching, etc.), but it has nested RadTabStrip controls and other things.

How can I allow a page to load and then, after it has loaded, fire off a server-side (update panel?) call to load my custom user control? Ideally, I want a progress bar that I can interact with as the user control loads.

So, in theory:

1. Page loads.
2. OnLoad, the user control is initialized.
3. A progress bar is displayed in place of the user control.
4. Events fired in the child controls bubble up to the Page to update the progress bar.
5. After the control is loaded, the progress bar is removed and the user control is displayed.

Is this possible using the TelerikRadAjaxManager and Telerik progress bar?

3 Answers, 1 is accepted

Sort by
0
Iana Tsolova
Telerik team
answered on 27 Apr 2011, 02:28 PM
Hi,

Try the solution provided in this article and let me know if works for you:
http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html

Kind regards,
Iana
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
BC
Top achievements
Rank 1
answered on 27 Apr 2011, 09:37 PM
It sort of worked, but I can't get the loading panel to show. I've manually adding "loading.gif" to the root of my sample project. Here's the .aspx:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <telerik:RadStyleSheetManager id="RadStyleSheetManager1" runat="server" />
</head>
<body>
    <form id="form1" runat="server">

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

    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" />
            <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQueryInclude.js" />
        </Scripts>
    </telerik:RadScriptManager>
    <script type="text/javascript">
        //Put your JavaScript code here.
    </script>
    
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>   
    </telerik:RadAjaxManager>
 
    <telerik:RadSkinManager ID="RadSkinManager1" Runat="server" Skin="WebBlue">
    </telerik:RadSkinManager>
    <div>

    This should be displayed first.
    <br /><br />

    <asp:Panel ID="Panel1" runat="server">
        <asp:Panel ID="Panel2" Visible="false" runat="server">
            This would be displayed second.
        </asp:Panel>
    </asp:Panel>
    
    <br /><br />
    This should be displayed third.
    
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
        Width="75px" Transparency="50">
        <img alt="Loading..." src="loading.gif" style="border: 0;" />
    </telerik:RadAjaxLoadingPanel>

    </div>
    </form>
</body>
</html>
0
Accepted
Iana Tsolova
Telerik team
answered on 29 Apr 2011, 12:01 PM
Hi BC,

Try modifying the loading panel definitiona as below:
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Height="75px"
    Width="75px" Transparency="50" Skin="" IsSticky="true" 
    style="position:absolute: top:0; left:0; height:100%; width:100%">
    <img alt="Loading..." src="loading.gif" style="border: 0;" />
</telerik:RadAjaxLoadingPanel>


Best wishes,
Iana
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

Tags
Ajax
Asked by
BC
Top achievements
Rank 1
Answers by
Iana Tsolova
Telerik team
BC
Top achievements
Rank 1
Share this question
or