loading panel on initial page load

2 posts, 0 answers
  1. newbie
    newbie avatar
    355 posts
    Member since:
    Feb 2008

    Posted 08 Jul 2010 Link to this post

    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>
  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 12 Jul 2010 Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items
Back to Top