Preloader is not displaying in the middle of the screen

[Joe]

My preloader is not displaying in the middle of the screen, can't figure out why not.

Here is my HTML:

(

<form id="frmDashboard" runat="server">
    <telerik:RadScriptManager ID="ScriptManagerDashboard" runat="server">
    </telerik:RadScriptManager>
    <telerik:RadFormDecorator ID="RadFormDecorator1" runat="server" DecoratedControls="All"
        Skin="Office2007" />
    <telerik:RadCodeBlock ID="RadCodeBlock0" runat="server">

        <script type="text/javascript">
            var hasChanges, inputs, dropdowns, editedRowNow;

            function RowDblClick(sender, eventArgs) {
                //if (0 == editedRowNow || null == editedRowNow) {
                editedRowNow = eventArgs.get_itemIndexHierarchical();
                //}
                if (eventArgs.getDataKeyValue("LeadPermission") != "Read") {
                    $find("<%= dbgLeads.MasterTableView.ClientID %>").editItem(editedRowNow);
                }
                else {
                    editedRowNow = null;
                }
            }

            function GridCreated(sender, eventArgs) {
                var gridElement = sender.get_element();
                var elementsToUse = [];
                inputs = gridElement.getElementsByTagName("input");
                for (var i = 0; i < inputs.length; i++) {
                    if (inputs[i].type.toLowerCase() == "hidden") {
                        continue;
                    }

                    Array.add(elementsToUse, inputs[i]);
                    inputs[i].onchange = TrackChanges;
                }

                dropdowns = gridElement.getElementsByTagName("select");
                for (var i = 0; i < dropdowns.length; i++) {
                    dropdowns[i].onchange = TrackChanges;
                }
            }

            function TrackChanges(e) {
                hasChanges = true;
            }

            function refreshGrid(arg) {
                if (!arg) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("Rebind");
                }
            }
        </script>

    </telerik:RadCodeBlock>
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="RadAjaxManager1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="dbgLeads" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">

        <script type="text/javascript">
            function LoadCharts(sender, eventArgs) {
                if (sender.get_collapsed() == false) {
                    $find("<%= RadAjaxManager1.ClientID %>").ajaxRequest("UpdateAllCharts");
                }
            }

            function OpenWindow() {
                var wnd = window.radopen("Popups/ConfigureGridColumnBehavior.aspx?UserGridName=dbgLeads&UserGridPage=AstonishResultsReporting.VPCDashboard", 'Configure Fields');
                return false;
            }

            function GetRadWindow() {
                var oWindow = null;
                if (window.radWindow)
                    oWindow = window.RadWindow; //Will work in Moz in all cases, including clasic dialog
                else if (window.frameElement.radWindow)
                    oWindow = window.frameElement.radWindow; //IE (and Moz as well)
                return oWindow;
            }

            function Close() {
                GetRadWindow().Close();
            }

        </script>

    </telerik:RadCodeBlock>
    <div class="DashboardForm">
        <div class="formLineBreak">
            <asp:ImageButton ID="BtnExcelExport" ImageUrl="~/Images/exporttoexcel.gif" runat="server"
                ToolTip="Export To Excel" OnClick="BtnExcelExport_Click" />
        </div>
        <telerik:RadAjaxPanel ID="PolicyAjaxPanel" runat="server" LoadingPanelID="VPCPreloader">
            <telerik:RadWindowManager Behaviors="Close" runat="server" ID="ConfigureFields" Opacity="90"
                ShowContentDuringLoad="true" KeepInScreenBounds="true" VisibleStatusbar="false"
                Modal="true" Width="470" Height="350">
            </telerik:RadWindowManager>
            <div class="DashboardFormInput">
                <label class="LeadFormLabel">
                    <strong>Select Lead Type:</strong></label>
                <asp:CheckBox ID="chkProspect" runat="server" Text="Prospects" Checked="true" CssClass="LeadFormText" />
                <asp:CheckBox ID="chkActive" runat="server" Text="Active Leads" Checked="true" CssClass="LeadFormText" />
                <asp:CheckBox ID="chkActiveClient" runat="server" Text="Active Clients" Checked="true"
                    CssClass="LeadFormText" />
                <label class="LeadFormLabel">
                    <strong>Policy Status:</strong></label>
                <asp:RadioButton ID="rbtnActive" runat="server" Checked="true" GroupName="policyStatus"
                    Text="Active" CssClass="LeadFormText" />
                <asp:RadioButton ID="rbtnInactive" runat="server" Checked="false" GroupName="policyStatus"
                    Text="Inactive" CssClass="LeadFormText" />
                <label class="LeadFormLabel">
                    <strong>Date Filter:</strong></label>
                <asp:DropDownList ID="ddlDateFilter" runat="server" CssClass="LeadFormText">
                    <asp:ListItem Selected="True" Text="30 Days Out" Value="30"></asp:ListItem>
                    <asp:ListItem Selected="False" Text="60 Days Out" Value="60"></asp:ListItem>
                    <asp:ListItem Selected="False" Text="90 Days Out" Value="90"></asp:ListItem>
                    <asp:ListItem Selected="False" Text="120 Days Out" Value="120"></asp:ListItem>
                </asp:DropDownList>
            </div>
            <br />
            <br />
            <div class="DashboardFormInput">
                <asp:Button ID="btnConfigureFields" runat="server" Text="Configure Columns" ToolTip="Brings up a control to display/hide columns of the grid"
                    OnClientClick="return OpenWindow()" />
                &nbsp;
                <asp:Button ID="btnGetData" Text="Get Latest Data" runat="server" OnClick="btnGetData_Click" />
                &nbsp;
            </div>
            <div class="SubMainContent">
                <telerik:RadGrid ID="dbgLeads" runat="server" AllowPaging="True" AllowSorting="True"
                    ClientSettings-Scrolling-AllowScroll="false" AutoGenerateColumns="False" GridLines="None"
                    Height="100%" Width="75%" Skin="Office2007" OnItemDataBound="dbgLeads_OnItemDataBound"
                    OnNeedDataSource="dbgLeads_NeedDataSource" OnItemCommand="dbgLeads_ItemCommand"
                    OnPreRender="dbgLeads_PreRender" ClientSettings-AllowColumnsReorder="true" ClientSettings-ReorderColumnsOnClient="true"
                    ClientSettings-Selecting-AllowRowSelect="true" OnCreateColumnEditor="dbgLeads_OnCreateColumnEditor"
                    ClientSettings-Resizing-AllowColumnResize="true" ShowGroupPanel="True">
                    <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true" />
                    <MasterTableView Name="LeadDetails" Height="100%" Width="100%" Font-Size="9px" Font-Names="Verdana"
                        TableLayout="Auto" GroupLoadMode="Client" DataKeyNames="LeadId,PolicyId,FName,LName,LeadPermission,CompanyId"
                        ClientDataKeyNames="LeadId,LeadPermission" AllowMultiColumnSorting="false" AllowNaturalSort="false"
                        EditMode="InPlace">
                        <Columns>
                            <telerik:GridButtonColumn ButtonType="ImageButton" CommandName="Navigate" HeaderText="Go to Lead Details"
                                Resizable="false" Reorderable="false" UniqueName="GoToLeadDetails" ImageUrl="~/Images/preview.gif"
                                Text="View this lead details" ButtonCssClass="pointerMouseCursor" Groupable="false">
                                <HeaderStyle Width="45px" HorizontalAlign="Center" />
                                <ItemStyle Width="45px" HorizontalAlign="Center" />
                            </telerik:GridButtonColumn>
                            <telerik:GridEditCommandColumn ButtonType="ImageButton" UniqueName="EditCommandColumn"
                                Resizable="false" Reorderable="false" HeaderText="Quick Edit" Groupable="false">
                                <HeaderStyle Width="45px" HorizontalAlign="Center" />
                                <ItemStyle Width="45px" HorizontalAlign="Center" />
                            </telerik:GridEditCommandColumn>
                            <telerik:GridBoundColumn DataField="RenewalDate" DataFormatString="{0:MM/dd/yy}"
                                ColumnEditorID="GridTextBoxColumnEditor1" DataType="System.DateTime" HeaderText="Renewal Date"
                                UniqueName="RenewalDate" HeaderStyle-HorizontalAlign="Center" HeaderStyle-Width="90px"
                                Resizable="false" ItemStyle-Width="90px" SortExpression="RenewalDate">
                                <HeaderStyle HorizontalAlign="Left" Width="90px"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridDropDownColumn UniqueName="AgentName" HeaderText="Agent Name" SortExpression="AgentName"
                                Visible="false" ListTextField="description" ListValueField="LookupId" DataField="AgentName"
                                HeaderStyle-Width="9%">
                                <HeaderStyle Width="9%"></HeaderStyle>
                                <ItemStyle Width="9%" HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px">
                                </ItemStyle>
                            </telerik:GridDropDownColumn>
                            <telerik:GridBoundColumn DataField="CompanyName" HeaderText="Company Name" UniqueName="CompanyName"
                                ReadOnly="true" HeaderStyle-Width="7%" ItemStyle-Width="7%" SortExpression="CompanyName">
                                <HeaderStyle Width="7%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Wrap="true" Font-Names="Verdana" Font-Size="11px">
                                </ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="FName" HeaderText="First Name" UniqueName="FName"
                                HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditorFirstName" ItemStyle-Width="5%"
                                SortExpression="FName">
                                <HeaderStyle Width="5%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="10px"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="LName" HeaderText="Last Name" UniqueName="LName"
                                HeaderStyle-Width="5%" ColumnEditorID="GridTextBoxColumnEditorLastName" ItemStyle-Width="5%"
                                SortExpression="LName">
                                <HeaderStyle Width="5%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridDropDownColumn UniqueName="PolicyType" HeaderText="Policy Type" SortExpression="PolicyType"
                                ListTextField="description" ListValueField="LookupId" DataField="PolicyType"
                                HeaderStyle-Width="9%" ItemStyle-Width="9%">
                                <HeaderStyle Width="9%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridDropDownColumn>
                            <telerik:GridDropDownColumn UniqueName="LeadStatus" HeaderText="Lead Status" SortExpression="LeadStatus"
                                ListTextField="description" ListValueField="LookupId" DataField="LeadStatus"
                                HeaderStyle-Width="9%" ItemStyle-Width="9%">
                                <HeaderStyle Width="9%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridDropDownColumn>
                            <telerik:GridDropDownColumn UniqueName="PolicyStatus" HeaderText="Policy Status"
                                SortExpression="PolicyStatus" Visible="false" ListTextField="description" ListValueField="LookupId"
                                DataField="PolicyStatus" HeaderStyle-Width="3%">
                                <HeaderStyle Width="3%"></HeaderStyle>
                                <ItemStyle Width="3%" HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px">
                                </ItemStyle>
                            </telerik:GridDropDownColumn>
                            <telerik:GridBoundColumn DataField="EmailAddress" HeaderText="Email To" UniqueName="EmailAddress"
                                ColumnEditorID="GridTextBoxColumnEditorEmailAddress" HeaderStyle-Width="7%" ItemStyle-Width="7%"
                                SortExpression="EmailAddress">
                                <HeaderStyle Width="7%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridBoundColumn DataField="Notes" HeaderText="Notes" UniqueName="Notes"
                                ColumnEditorID="GridTextBoxColumnEditorNotes" HeaderStyle-Width="7%" ItemStyle-Width="7%"
                                SortExpression="Notes">
                                <HeaderStyle Width="7%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridBoundColumn>
                            <telerik:GridDropDownColumn UniqueName="MarketingSourceDesc" HeaderText="Marketing Source"
                                ListTextField="description" ListValueField="LookupId" DataField="MarketingSourceDesc"
                                HeaderStyle-Width="10%">
                                <HeaderStyle Width="10%"></HeaderStyle>
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridDropDownColumn>
                            <telerik:GridBoundColumn DataField="LastActivity" HeaderText="Last Activity" UniqueName="LastActivity"
                                ReadOnly="true" ItemStyle-Width="10%" SortExpression="LastActivity">
                                <ItemStyle HorizontalAlign="Left" Font-Names="Verdana" Font-Size="11px"></ItemStyle>
                            </telerik:GridBoundColumn>
                        </Columns>
                        <EditFormSettings>
                            <EditColumn UniqueName="EditCommandColumn1">
                            </EditColumn>
                        </EditFormSettings>
                    </MasterTableView>
                    <ClientSettings ReorderColumnsOnClient="true" AllowColumnsReorder="true" AllowDragToGroup="True">
                        <Selecting AllowRowSelect="True"></Selecting>
                        <ClientEvents OnRowDblClick="RowDblClick" OnGridCreated="GridCreated" />
                        <Resizing AllowColumnResize="True"></Resizing>
                    </ClientSettings>
                </telerik:RadGrid>
                <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditor1" runat="server" TextBoxStyle-Width="70px"
                    TextBoxStyle-CssClass="formFont" />
                <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditorEmailAddress" runat="server"
                    TextBoxStyle-Width="90%" TextBoxStyle-CssClass="formFont" />
                <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditorNotes" runat="server"
                    TextBoxStyle-Width="90%" TextBoxStyle-CssClass="formFont" />
                <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditorFirstName" runat="server"
                    TextBoxStyle-Width="100%" TextBoxStyle-CssClass="formFont" />
                <telerik:GridTextBoxColumnEditor ID="GridTextBoxColumnEditorLastName" runat="server"
                    TextBoxStyle-Width="100%" TextBoxStyle-CssClass="formFont" />
                <ucPL:Preloader ID="DashboardPreloader" runat="server" />
            </div>
            <div class="DashboardFormInput">
                <asp:Label ID="totalRecordCount" runat="server" Text="" CssClass="LeadFormText"></asp:Label>
                <asp:Label ID="leadRange" runat="server" Text="" CssClass="LeadFormText"></asp:Label>
                <asp:Button ID="btnPrevious" runat="server" Text="Previous 250" Width="85px" OnClick="btnPrevious_Click"
                    Visible="false" />
                <asp:Button ID="btnNext" runat="server" Text="Next 250" Width="85px" OnClick="btnNext_Click"
                    Visible="false" />
            </div>
        </telerik:RadAjaxPanel>
    </div>
    </form>

)

I'm using a preloader user control:

Here is the HTML for the User control

Thanks everyone

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PreLoader.ascx.cs" Inherits="AstonishResultsReporting.UIControls.PreLoader.PreLoader" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<div class="Loading">

<telerik:RadAjaxLoadingPanel ID="VPCPreloader" runat="server" Transparency="30">

<asp:Image ID="AjaxLoadingImage" runat="server" ImageUrl="~/Images/Preloader/Loading3.gif" />

</telerik:RadAjaxLoadingPanel>

</div>

[Dimo]

Hello Joe,

The RadAjaxLoadingPanel in your scenario is not configured to be centered on the screen. Please refer to:

http://www.telerik.com/help/aspnet-ajax/ajxcenterloadingpanel.html

http://www.telerik.com/community/code-library/aspnet-ajax/ajax/how-to-make-a-radajaxloadingpanel-span-over-the-whole-page.aspx

Kind regards,
Dimo
the Telerik team

[Joe]

It's still not working.  I want the preloader to be displayed on the grid or center page.  How can this be accomplished?  Not sure how to do this within the code:
Thanks,

 function centerLoadingPanel() {
                centerElementOnScreen($get("<%= DashboardPreloader.ClientID %>"));
            }
            function centerElementOnScreen(element) {
                var scrollTop = document.body.scrollTop;
                var scrollLeft = document.body.scrollLeft;
                var viewPortHeight = document.body.clientHeight;
                var viewPortWidth = document.body.clientWidth;
                if (document.compatMode == "CSS1Compat") {
                    viewPortHeight = document.documentElement.clientHeight;
                    viewPortWidth = document.documentElement.clientWidth;
                    scrollTop = document.documentElement.scrollTop;
                    scrollLeft = document.documentElement.scrollLeft;
                }
                var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);
                var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);
                var top = scrollTop + topOffset - 40;
                var left = scrollLeft + leftOffset - 70;
                element.style.position = "absolute";
                element.style.top = top + "px";
                element.style.left = left + "px";
            }

[Dimo]

Hi Joe,

Did you really try the examples suggested above?

RadAjaxLoadingPanel by default assumes the width and height of the updated control. You don't have to do anything special to achieve that. The IsSticky property must be set to false and the control must not have any width or height.

Here is a working demo which shows how to center a loading panel on the screen. Please replace "~/grid_images/loading.gif" with a valid image of yours and adjust the following numbers:

var top = scrollTop + topOffset - 40;
var left = scrollLeft + leftOffset - 70;

40 and 70 are half of the image's height and width.

<%@ Page Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

<script runat="server">

    protected void Button1_Click(object sender, EventArgs e)
    {
        System.Threading.Thread.Sleep(2000);
    }

</script>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<title>RadControls</title>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

 <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
   <script type="text/javascript">
       function centerLoadingPanel() {
           centerElementOnScreen($get("<%= RadAjaxLoadingPanel1.ClientID %>"));
       }
       function centerElementOnScreen(element) {
           var scrollTop = document.body.scrollTop;
           var scrollLeft = document.body.scrollLeft;
           var viewPortHeight = document.body.clientHeight;
           var viewPortWidth = document.body.clientWidth;
           if (document.compatMode == "CSS1Compat") {
               viewPortHeight = document.documentElement.clientHeight;
               viewPortWidth = document.documentElement.clientWidth;
               if (!$telerik.isSafari) {
                   scrollTop = document.documentElement.scrollTop;
                   scrollLeft = document.documentElement.scrollLeft;
               }
           }
           var topOffset = Math.ceil(viewPortHeight / 2 - element.offsetHeight / 2);
           var leftOffset = Math.ceil(viewPortWidth / 2 - element.offsetWidth / 2);
           var top = scrollTop + topOffset - 40;
           var left = scrollLeft + leftOffset - 70;
           element.style.position = "absolute";
           element.style.top = top + "px";
           element.style.left = left + "px";
       }
   </script>
</telerik:RadCodeBlock>
<telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" DefaultLoadingPanelID="RadAjaxLoadingPanel1">
   <ClientEvents OnRequestStart="centerLoadingPanel"></ClientEvents>
   <AjaxSettings>
    <telerik:AjaxSetting AjaxControlID="Button1">
        <UpdatedControls>
            <telerik:AjaxUpdatedControl ControlID="Panel1" />
        </UpdatedControls>
    </telerik:AjaxSetting>
   </AjaxSettings>
</telerik:RadAjaxManager>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true">
   <asp:Image ID="Image1" runat="server" ImageUrl="~/grid_images/loading.gif" />
</telerik:RadAjaxLoadingPanel>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<asp:Button ID="Button1" runat="server" Text="AJAX" OnClick="Button1_Click" />

<asp:Panel ID="Panel1" runat="server" style="width:800px;height:400px;border:1px solid red">
asp:Panel
</asp:Panel>

</form>
</body>
</html>

Best wishes,
Dimo
the Telerik team

[Joe]

Thanks it's working