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

4 posts, 0 answers
  1. sunil
    sunil avatar
    8 posts
    Member since:
    Mar 2011

    Posted 05 Feb 2012 Link to this post

    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.
     
  2. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 08 Feb 2012 Link to this post

    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 >>
  3. sunil
    sunil avatar
    8 posts
    Member since:
    Mar 2011

    Posted 09 Feb 2012 Link to this post

    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.  
  4. Antonio Stoilkov
    Admin
    Antonio Stoilkov avatar
    530 posts

    Posted 13 Feb 2012 Link to this post

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