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

[Alex]

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!!!

[Maria Ilieva]

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

 

 

[Alex]

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!

[Alex]

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

Thanks!

[Alex]

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

[Maria Ilieva]

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