Showing RadAjaxLoadingPanel on initial page loan in a Master Page scenario is not working

6 posts, 0 answers
  1. Alex
    Alex avatar
    7 posts
    Member since:
    Nov 2014

    Posted 14 Nov 2014 Link to this post

    Hello all,

    I have really two problems, but they are connected to each other, so I will explain both in this thread. 

    Problem 1 - Loading panel - Master Page

    I have been at this for a while, and even though I am following the code sample from here: http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-on-initial-pageload.html the Loading Panel is not working.

    Code for Main.Master:

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


    <form id="form1" runat="server">
             
            <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>
     
            <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
                <AjaxSettings>
                    <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                        <UpdatedControls>
                            <telerik:AjaxUpdatedControl ControlID="MainContentPanel" />
                        </UpdatedControls>
                    </telerik:AjaxSetting>
                </AjaxSettings>
            </telerik:RadAjaxManager>
     
    ......


            <div id="mainContent">
                <section class="container-content">
                    <div class="bottom-container-content">
                        <div class="content-page">
     
                            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
                            <asp:Panel ID="MainContentPanel" runat="server">
                                <asp:Panel ID="AjaxMainContentPanel" runat="server" Visible="false">
                                    <asp:ContentPlaceHolder ID="MainContent" runat="server"></asp:ContentPlaceHolder>
                                </asp:Panel>
                            </asp:Panel>
     
    .......

    Code for Main.Master.vb:

    Private Sub RadAjaxManager1_AjaxRequest(sender As Object, e As Telerik.Web.UI.AjaxRequestEventArgs) Handles RadAjaxManager1.AjaxRequest
     
        If e.Argument = "InitialPageLoad" Then
            AjaxMainContentPanel.Visible = True
        End If
     
    End Sub


    Symptoms:

    Although the page seems to load in the correct order, master and content page layout, menus, images, etc... the RadAjaxLoadingPanel does not show. 
    I have a RadGrid on the content page being loaded from some very heavy queries which can take up to 5 seconds, and the place where the grid would show is blank until the data is loaded. 


    Problem 2 - RadGrid's NeedDataSource event will not fire with the above scenario:


     Code for Content.aspx:

    <asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
         
        <telerik:RadAjaxManagerProxy ID="AjaxManagerProxy1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="AjaxManagerProxy1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="rdList" LoadingPanelID="RadAjaxLoadingPanel1" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManagerProxy>
     
        <telerik:RadGrid ID="rdList" runat="server" AllowPaging="False" Skin="Silk" AllowMultiRowSelection="true" AutoGenerateColumns="false">
            <MasterTableView>
                <Columns>
     
    .....

    Code for Content.aspx.vb:
    Private Sub rdList_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rdList.NeedDataSource
     
        LoadGrid()
     
    End Sub

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     
        If Not Page.IsPostBack Then
     
     
        Else
            If PageIsLoaded.Value <> "true" Then
                rdList.Rebind()
                PageIsLoaded.Value = "true"
            End If
        End If
     
    End Sub


    Symptoms:

    On the initial page load (I haven't gotten to the point where I have any PostBack on the Content page yet), the NeedDataSource event will not fire.
    The solution I found was to call the Grid's Rebind() method on the Content page's Page_Load method. However, I am not sure that this is correct. To me it seems an unnecessary action. And I had to use a Hidden Field so that I could check whether or not it's been called so that I don't do any unnecessary rebinds, and it only happens on the initial page load.

    Can anyone help?

    Thanks!!!




















  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 19 Nov 2014 Link to this post

    Hello Alex,

    1. Try setting a Skin for the RadAjaxLoadingPanel and see if this makes any difference.

    2. Note that the bind event for the invisible controls does not fire. As the AjaxRequest fire too late the RadGrid NeedDataSource event will not fire properly. In this case you can simply modify the asp Panel visibility in the MasterPage PageLoad event like this:
    Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
          If Not IsPostBack Then
              AjaxMainContentPanel.Visible = True
          End If
      End Sub

    instead of using AjaxRequest.

    Give this try and verify if it helps.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Alex
    Alex avatar
    7 posts
    Member since:
    Nov 2014

    Posted 19 Nov 2014 in reply to Maria Ilieva Link to this post

    Hi Maria,

    Thanks for replying. 
    I tried what you suggested, and none worked. 

    1. I am actually using a RadSkinManager. But just for trying it, I did set the skin property on the Panel; still, it did not work. One clarification: I know the RadAjaxLoadingPanel works because If I set my grid to post back when selecting a row (the grid is on the content page), I do see the RadAjaxLoadingPanel.

    2. If I do it in the IsPostBack, it still does not work; I don't see the page at all until my grid is fully loaded with data. I actually like the AjaxRequest better because at least that way I can see static information on the page which the data on the grid is loading.

    Any other ideas?

    Thanks!






  5. Alex
    Alex avatar
    7 posts
    Member since:
    Nov 2014

    Posted 19 Nov 2014 in reply to Maria Ilieva Link to this post

    Another clarification: I did try both approaches on both the Master Page itself, and on the Content Page. Neither worked.

    Thanks!
  6. Alex
    Alex avatar
    7 posts
    Member since:
    Nov 2014

    Posted 19 Nov 2014 Link to this post

    Oddly enough, I got it to work. It was really luck I guess. The only way I was able to get it to work properly was to apply some of the code to both the Master and the Content pages.

    By doing it this way, when I call this page from another, the page's static information loads right away, and the RadAjaxLoadingPanel overlays it until the grid is loaded.



    New Code for Main.Master:

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

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="Panel1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
                            <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">Please wait while we load information...</telerik:RadAjaxLoadingPanel>
     
                            <asp:Panel ID="Panel1" runat="server">
                                <asp:Panel ID="Panel2" runat="server" Visible="false">
     
                                    <asp:Panel ID="MainContentPanel" runat="server">
     
     
    .....


    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        If Not IsPostBack Then
            Panel2.Visible = True
        End If
    End Sub


    New Code for Content page:

    <asp:Panel ID="Panel2" runat="server" Visible="false">
     
                    <telerik:RadGrid ID="rdList" runat="server" AllowPaging="False" AllowMultiRowSelection="true" AutoGenerateColumns="false">
     
     
    .....
       Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
     
            Dim ajaxManager As RadAjaxManager = RadAjaxManager.GetCurrent(Page)
            AddHandler ajaxManager.AjaxRequest, AddressOf ajaxManager_AjaxRequest
     
    .....

    Protected Sub ajaxManager_AjaxRequest(ByVal sender As Object, ByVal e As Telerik.Web.UI.AjaxRequestEventArgs)
     
        If e.Argument = "InitialPageLoad" Then
            Panel2.Visible = True
            rdList.Rebind()
        End If
     
    End Sub

    Private Sub rdList_NeedDataSource(sender As Object, e As Telerik.Web.UI.GridNeedDataSourceEventArgs) Handles rdList.NeedDataSource
     
        LoadGrid()
     
    End Sub



  7. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 24 Nov 2014 Link to this post

    Hello Alex,

    I further tested the application I have provided and it appears to work totally correct on my side. See the movie below:

    http://screencast.com/t/9VAukbT0g2A

    Nevertheless that the provided project does not work properly for you, the solution you have invented is accurate so you can continue using it for achieving the required functionality.

    Regards,
    Maria Ilieva
    Telerik
     

    Check out the Telerik Platform - the only platform that combines a rich set of UI tools with powerful cloud services to develop web, hybrid and native mobile apps.

     
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017