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

loading panel on initial page load

1 Answer 179 Views

Ajax

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

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:Content>

loading panel on initial page load

1 Answer, 1 is accepted