This is a migrated thread and some comments may be shown as answers.

loading panel on initial page load

1 Answer 80 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
newbie
Top achievements
Rank 1
newbie asked on 08 Jul 2010, 06:59 PM
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>

1 Answer, 1 is accepted

Sort by
0
Maria Ilieva
Telerik team
answered on 12 Jul 2010, 02:08 PM
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
Tags
Ajax
Asked by
newbie
Top achievements
Rank 1
Answers by
Maria Ilieva
Telerik team
Share this question
or