Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Ajax > showing loading panel on initial pageload in a master-content page

Not answered showing loading panel on initial pageload in a master-content page

Feed from this thread
  • sunil avatar

    Posted on Feb 5, 2012 (permalink)

    hi telerik,

             i am using codes from  http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html  link to show loading panel .  since i am using master-content page , i have to make little change in the code as below

    In Master Page 

    <body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager ID="RadScriptManager1" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            function pageLoad(sender, eventArgs) {
                if (!eventArgs.get_isPartialLoad()) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");
                    if (window.contentPageLoad) {
                        window.contentPageLoad(sender, eventArgs);
                    }
                }
            } 
        </script>
    </telerik:RadCodeBlock>
    <div>
        <telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
            DefaultLoadingPanelID="RadAjaxLoadingPanel1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="Panel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" Skin="Black">
            Loading.........
        </telerik:RadAjaxLoadingPanel>
        <asp:Panel ID="Panel1" runat="server">
            <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
            </asp:ContentPlaceHolder>
        </asp:Panel>
    </div>
    </form>
</body>


    In Content Page

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
 
            function contentPageLoad(sender, eventArgs) {
                alert("i am from content page");
 
                // on pageLoad doing lot of stuffs for example
                document.getElementById("<%= Label1.ClientID %>").innerHTML = "hello"
            }
        </script>
    </telerik:RadCodeBlock>
    <telerik:RadAjaxPanel runat="server" ID="ajaxPanel">
       <%--  all controls will be residing inside the ajax panel--%>
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
    </telerik:RadAjaxPanel>
</asp:Content>


      
    	now the problem is on page load the ajaxrequest starts and the contentPageLoad() assigns value to the label, but when the ajaxrequest ends the value assigned through 
    contentPageLoad() is refreshed . Please Help Me.
    
      

    Reply

  • Antonio Stoilkov Antonio Stoilkov admin's avatar

    Posted on Feb 8, 2012 (permalink)

    Hi Sunil,

    You could resolve the issue by replacing the contentPageLoad function with pageLoad function as it is shown below. This approach is needed because the contentPageLoad fires before the RadAjaxManager ResponseEnd event. Additionally, I have attached the project I used for testing. 
    function pageLoad()
    {
        alert("i am from content page");
        document.getElementById("<%= Label1.ClientID %>").innerHTML = "hello"
    }

    Kind regards,
    Antonio Stoilkov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
    Attached files

    Reply

  • sunil avatar

    Posted on Feb 9, 2012 (permalink)

    hi antonio,

    thanks for your reply. In your attached sample the master page pageLoad is not even firing, since it is not firing , it wont initiate the ajax request..  Also i will explain my requirement , among the two pageLoad (master page and content page) events i need the master page pageLoad should fire first because i am doing lot of calculations in the content page pageLoad which may take 2 or 3 sec :-) , so if content page pageLoad is fired first then the loading panel will be shown only after performing this calculation . Waiting for your reply.  

    Reply

  • Antonio Stoilkov Antonio Stoilkov admin's avatar

    Posted on Feb 13, 2012 (permalink)

    Hi Sunil,

    I have updated the project using different approach. Calling the contentPageLoad on EndRequest event as it is shown below.
    <telerik:RadAjaxManager ID="RadAjaxManager1" OnAjaxRequest="RadAjaxManager1_AjaxRequest"
        DefaultLoadingPanelID="RadAjaxLoadingPanel1" runat="server">
        <ClientEvents OnResponseEnd="ResponseEnd" />
    var contentPageParameters = null;
    function pageLoad(sender, eventArgs)
    {
        if (!eventArgs.get_isPartialLoad())
        {
            $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("InitialPageLoad");
            contentPageParameters = [sender, eventArgs];
        }
    }
     
    function ResponseEnd()
    {
        if (window.contentPageLoad)
        {
            window.contentPageLoad(contentPageParameters[0], contentPageParameters[1]);
        }
    }

    Greetings,
    Antonio Stoilkov
    the Telerik team
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
    Attached files

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Developer Productivity Tools Forums / ASP.NET AJAX > Ajax > showing loading panel on initial pageload in a master-content page
Related resources for "showing loading panel on initial pageload in a master-content page"

[  ASP.NET Ajax Features  |  Documentation  |  Demos  |  Telerik TV  |  Self-Paced Trainer  |  Step-by-step Tutorial  ]