loading panel on initial page load

[newbie]

Hi,

I have a grid on one of my pages that take a long time to load. The first page load shows a blank screen till the time the grid is loaded. I need to show a loading panel while the grid is loading on the initial page load.

I have master content pages in my app and the RadAjaxManager resides on the master page.

I tried to follow the examples here:
http://www.telerik.com/help/aspnet-ajax/ajxshowloadingpaneloninitialpageload.html
http://www.telerik.com/help/aspnet-ajax/ajax-manager-proxy.html

However, my manager_AjaxRequest never seems to fire.

Below is my aspx code. A working sample will be appreciated.

<%@ Page Language="C#" MasterPageFile="~/MasterPage.master" AutoEventWireup="true"
    CodeFile="Calendar.aspx.cs" Inherits="Calendar"  %>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolderContent" runat="Server">
    <asp:ScriptManagerProxy ID="ScriptManagerProxy1" runat="server">
    </asp:ScriptManagerProxy>
    <telerik:RadAjaxManagerProxy ID="RadAJAXManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadComboBoxCalendarFor">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadComboBoxCalendarFor" />
                    <telerik:AjaxUpdatedControl ControlID="dummyTextBox" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadGridCalendar" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">

            function GridCreated(sender, args) {
                var scrollArea = sender.GridDataDiv;
                var dataHeight = sender.get_masterTableView().get_element().clientHeight;
                if (dataHeight < 350) {
                    scrollArea.style.height = dataHeight + 17 + "px";
                }

                sender.get_masterTableView().hideFilterItem();
            }

            function pageLoad(sender, eventArgs) {
                if (!eventArgs.get_isPartialLoad()) {
                    $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>").ajaxRequest("InitialPageLoad");
                }
            }

        </script>

    </telerik:RadCodeBlock>
    <asp:Panel ID="Panel1" runat="server">
        <asp:Panel ID="Panel2" Visible="false"  runat="server">
            <div style="width: 100%; text-align: center;">
                <table border="0" cellspacing="0" class="calendar" >
                    <tr>
                        <th colspan="8" class="calendar" >
                            <table>
                                <tr>
                                    <td style="color: #000000; font-size: 10pt">
                                        User Calendar
                                    </td>
                                    <td>
                                        <telerik:RadComboBox runat="server" ID="RadComboBoxCalendarFor" Width="175px" OnPreRender="RadComboBoxCalendarFor_PreRender"
                                            OnSelectedIndexChanged="RadComboBoxCalendarFor_SelectedIndexChanged" AllowCustomText="true"
                                            AutoPostBack="true" HighlightTemplatedItems="true">
                                        </telerik:RadComboBox>
                                    </td>
                                </tr>
                            </table>
                        </th>
                    </tr>

                    <tr>
                        <td colspan="8" >
                            <telerik:RadGrid ID="RadGridCalendar" runat="server" GridLines="None" AllowPaging="true"
                                PageSize="20" AllowFilteringByColumn="true" Width="975px" ShowHeader="true" OnColumnCreated="RadGridCalendar_ColumnCreated"
                                OnItemCreated="RadGridCalendar_ItemCreated" OnItemDataBound="RadGridCalendar_ItemDataBound"
                                OnPreRender="RadGridCalendar_PreRender" AutoGenerateColumns="False" EnableLinqExpressions="false"
                                ShowGroupPanel="false" OnItemCommand="RadGridCalendar_ItemCommand" AllowSorting="true"
                                AllowCustomPaging="false" OnNeedDataSource="RadGridCalendar_NeedDataSource">
                                <ClientSettings Resizing-AllowColumnResize="true">
                                    <ClientEvents OnGridCreated="GridCreated" />
                                    <Scrolling AllowScroll="true" UseStaticHeaders="true" ScrollHeight="450px" />
                                </ClientSettings>
                                <ExportSettings IgnorePaging="true" OpenInNewWindow="true" ExportOnlyData="false"
                                    FileName="CalendarExport">
                                    <Pdf AllowAdd="false" AllowCopy="true" AllowModify="true" AllowPrinting="true" Author="Anonymous"
                                        Keywords="None" PageBottomMargin="1in" PageLeftMargin="1in" PageRightMargin="1in"
                                        PageWidth="297mm" PageHeight="210mm" PageTopMargin="1in" PageTitle="Calendar"
                                        Subject="Calendar Export" Title="Calendar" />
                                </ExportSettings>
                                <MasterTableView TableLayout="Fixed" HierarchyDefaultExpanded="true" ClientDataKeyNames="ActivityID"
                                    Width="100%" CommandItemDisplay="Top" DataKeyNames="ActivityID">
                                    <GroupByExpressions>

                                        <telerik:GridGroupByExpression>
                                            <SelectFields>
                                                <telerik:GridGroupByField FieldName="ActivityDate"></telerik:GridGroupByField>
                                            </SelectFields>
                                            <GroupByFields>
                                                <telerik:GridGroupByField FieldName="Date" FormatString="{0:d}" SortOrder="Descending">
                                                </telerik:GridGroupByField>
                                                <telerik:GridGroupByField FieldName="ActivityDate" FormatString="{0:d}" SortOrder="None">
                                                </telerik:GridGroupByField>
                                            </GroupByFields>
                                        </telerik:GridGroupByExpression>
                                    </GroupByExpressions>
                                    <Columns>
                                        <telerik:GridTemplateColumn UniqueName="TempColumn" HeaderText="">
                                            <ItemStyle Width="125px" BorderStyle="None"></ItemStyle>
                                            <HeaderStyle Width="125px" BorderStyle="None" />
                                            <ItemTemplate>
                                                <div>
                                                </div>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                        <telerik:GridTemplateColumn UniqueName="TimeColumn" HeaderText="Time">
                                            <ItemStyle Width="125px" BorderStyle="None"></ItemStyle>
                                            <HeaderStyle Width="125px" HorizontalAlign="Center" />
                                            <ItemTemplate>
                                                <div>
                                                    <%# DataBinder.Eval(Container.DataItem, "StartTime") %>
                                                    <asp:Label ID="Label1" runat="server">-</asp:Label>
                                                    <%# DataBinder.Eval(Container.DataItem, "EndTime") %>
                                                </div>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>

                                        <telerik:GridTemplateColumn UniqueName="DueDate" HeaderText="Due Date" Visible="false">
                                            <ItemStyle BorderStyle="None"></ItemStyle>
                                            <HeaderStyle HorizontalAlign="Center" />
                                            <ItemTemplate>
                                                <div>
                                                    <%# Eval("DueDate")%>
                                                </div>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>

                                                                             <telerik:GridTemplateColumn UniqueName="Company" HeaderText="Company">
                                            <ItemStyle BorderStyle="None"></ItemStyle>
                                            <HeaderStyle HorizontalAlign="Center" />
                                            <ItemTemplate>
                                                <div>
                                                    <%# Eval("Employer")%>
                                                </div>
                                            </ItemTemplate>
                                        </telerik:GridTemplateColumn>
                                    </Columns>
                                    <HeaderStyle Width="125px" />
                                    <CommandItemTemplate>
                                        <asp:ImageButton ID="ImageButtonAdd" runat="server" ImageUrl="~/App_Themes/Layout/plus-icon.png"
                                            AlternateText="Add" PostBackUrl=""/>
                                                                           </CommandItemTemplate>
                                    <PagerStyle Position="TopAndBottom" PrevPageText="Prev" NextPageText="Next" Mode="NextPrev" />
                                </MasterTableView>
                            </telerik:RadGrid>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="8" align="center">
                            <br />

                            <asp:Button ID="btnCancel" runat="server" OnClientClick="location.href='../Lookup.aspx';return false;"
                                Text="Cancel" />
                            <asp:TextBox ID="dummyTextBox" BorderColor="White" BorderStyle="None" runat="server"></asp:TextBox>
                        </td>
                    </tr>
                </table>
            </div>
        </asp:Panel>
    </asp:Panel>
</asp:Content>

[Maria Ilieva]

Hello,

We are not able to replicate the issue in a simple scenario. Please open a regular support ticket and send us small application which replicates the problem. We will test it locally and advise you further.

Best wishes,
Maria Ilieva
the Telerik team