Keep RadAjaxPanel visible while loading

[Jesse]

I'm trying to achieve the same effect while loading a grid as the demos (e.g. http://demos.telerik.com/aspnet-ajax/ajax/examples/manager/partialajaxification/defaultcs.aspx). But when my grid is updating, the RadAjaxPanel is set to display:hidden while the RadAjaxLoadingPanel is displayed. I want the semi-transparent contents of the loading panel to be displayed on top of the grid, like the demo. How can I make the ajax panel contents remain visible?

[Eyup]

Hi Jesse,

Generally, this is the default and expected behavior:
http://demos.telerik.com/aspnet-ajax/ajax/examples/loadingpanel/transparency/defaultcs.aspx

Can you please double check whether you have any setting or CSS rule interfering with the loading panel transparency?

Regards,
Eyup
Telerik

[Jesse]

Thanks Eyup. The transparency is working correctly. I realized I was misunderstanding the RadAjaxManager and was using both it and the RadUpdatePanel so I've since abandoned the panel, but the problem still occurs. The the problem is something hides the Grid when a postback is triggered. The grid markup gets changed from:

<div class="RadGrid RadGrid_Default" id="PaymentHistory1_RadGrid1" tabindex="0">

to:

<div class="RadGrid RadGrid_Default" id="PaymentHistory1_RadGrid1" style="visibility: hidden;" tabindex="0">

and then back to visibility:visible once the update completes. Maybe I have something else configured incorrectly. Here is my code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="PaymentHistory.ascx.cs"
    Inherits="PRGWebAccounts.UserControls.PaymentHistory" %>
<telerik:RadAjaxManagerProxy ID="testAjaxManagerProxy" runat="server">
    <AjaxSettings>
        <telerik:AjaxSetting AjaxControlID="btnLoadHistory">
            <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
            </UpdatedControls>
        </telerik:AjaxSetting>
    </AjaxSettings>
</telerik:RadAjaxManagerProxy>

    <div style="font: 9pt arial, tahoma">
        <span>From </span>
        <telerik:RadDatePicker ID="dpStartDate" runat="server">
        </telerik:RadDatePicker>
        <span>To </span>
        <telerik:RadDatePicker ID="dpEndDate" runat="server">
        </telerik:RadDatePicker>
        <asp:Button ID="btnLoadHistory" runat="server" Text="Go" CausesValidation="False"
            Style="vertical-align: bottom" />
         <asp:CompareValidator ID="CompareValidator1" runat="server"
            ErrorMessage="Invalid Date Range" ControlToCompare="dpEndDate"
            ControlToValidate="dpStartDate" Operator="LessThanEqual" Type="Date"></asp:CompareValidator>
    </div>

    <telerik:RadGrid ID="RadGrid1" runat="server" AllowSorting="True" AutoGenerateColumns="False"
        CellSpacing="0" GridLines="None" DataSourceID="PaymentsDataSource">
        <ClientSettings>
            <Scrolling AllowScroll="True" UseStaticHeaders="True" />
        </ClientSettings>
        <MasterTableView DataSourceID="PaymentsDataSource" DataKeyNames="OMSID"
            HierarchyLoadMode="Client">
            <DetailTables>
                <telerik:GridTableView runat="server" DataSourceID="ObjectDataSource2" HierarchyLoadMode="ServerBind">
                    <ParentTableRelation>
                        <telerik:GridRelationFields DetailKeyField="FamilyPaymentID" MasterKeyField="OMSID" />
                    </ParentTableRelation>
                    <CommandItemSettings ExportToPdfText="Export to PDF" />
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column" Visible="True">
                        <HeaderStyle Width="20px" />
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column" Visible="True">
                        <HeaderStyle Width="20px" />
                    </ExpandCollapseColumn>
                    <Columns>
                        <telerik:GridBoundColumn DataField="TransactionDescription" FilterControlAltText="Filter Description column"
                            HeaderText="Description" UniqueName="Description">
                        </telerik:GridBoundColumn>
                        <telerik:GridBoundColumn DataField="PaymentAmount" FilterControlAltText="Filter Amount column"
                            HeaderText="Amount" UniqueName="Amount" DataFormatString="{0:c}">
                        </telerik:GridBoundColumn>
                    </Columns>
                    <EditFormSettings>
                        <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                        </EditColumn>
                    </EditFormSettings>
                </telerik:GridTableView>
            </DetailTables>
            <CommandItemSettings ExportToPdfText="Export to PDF"></CommandItemSettings>
            <RowIndicatorColumn Visible="True" FilterControlAltText="Filter RowIndicator column">
                <HeaderStyle Width="20px"></HeaderStyle>
            </RowIndicatorColumn>
            <ExpandCollapseColumn Visible="True" FilterControlAltText="Filter ExpandColumn column">
                <HeaderStyle Width="20px"></HeaderStyle>
            </ExpandCollapseColumn>
            <Columns>
                <telerik:GridBoundColumn DataField="PaymentDate" DataType="System.DateTime" FilterControlAltText="Filter PaymentDate column"
                    HeaderText="Date" UniqueName="PaymentDate" DataFormatString="{0:d}">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PaymentTypeName" FilterControlAltText="Filter PaymentTypeName column"
                    HeaderText="PaymentTypeName" SortExpression="PaymentTypeName" UniqueName="PaymentTypeName">
                </telerik:GridBoundColumn>
                <telerik:GridBoundColumn DataField="PaymentAmount" DataType="System.Decimal" FilterControlAltText="Filter PaymentAmount column"
                    HeaderText="Amount" SortExpression="PaymentAmount" UniqueName="PaymentAmount"
                    DataFormatString="{0:c}">
                </telerik:GridBoundColumn>
            </Columns>
            <EditFormSettings>
                <EditColumn FilterControlAltText="Filter EditCommandColumn column">
                </EditColumn>
            </EditFormSettings>
            <PagerStyle PageButtonCount="5" Mode="Advanced" ShowPagerText="False" />
        </MasterTableView>
        <FilterMenu EnableImageSprites="False">
        </FilterMenu>
    </telerik:RadGrid>

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" InitialDelayTime="250"
    MinDisplayTime="500">
    <div class="loadingDivImage">
    </div>
    <div class="loadingDivBackground">
    </div>
</telerik:RadAjaxLoadingPanel>

<asp:ObjectDataSource ID="PaymentsDataSource" runat="server" SelectMethod="GetFamilyPayments"
    TypeName="PRGWebAccounts.ObjectDataSources.PaymentHistoryDataSource">
    <SelectParameters>
        <asp:Parameter DbType="Guid" Name="userID" />
        <asp:Parameter DbType="Guid" Name="facilityID" />
        <asp:Parameter DbType="Guid" Name="familyID" DefaultValue="B49D49BA-7A20-4735-9A27-591E9D46DF34" />
        <asp:ControlParameter ControlID="dpStartDate" DefaultValue="" Name="startDate" PropertyName="SelectedDate"
            Type="DateTime" />
        <asp:ControlParameter ControlID="dpEndDate" Name="endDate" PropertyName="SelectedDate"
            Type="DateTime" />
    </SelectParameters>
</asp:ObjectDataSource>
<asp:ObjectDataSource ID="ObjectDataSource2" runat="server" SelectMethod="GetFamilyPaymentTransactions"
    TypeName="PRGWebAccounts.ObjectDataSources.PaymentHistoryDataSource">
    <SelectParameters>
        <asp:Parameter DbType="Guid" Name="familyPaymentID" />
    </SelectParameters>
</asp:ObjectDataSource>

And CSS:

.loadingDivImage
{
    background-image: url('/<%=WebResource("PRGWebAccounts.Resources.Images.loading.gif")%>');
    background-color: rgba(0, 0, 0, 0);
    background-position: center center;
    background-repeat: no-repeat;
    position: relative;
    z-index: 2;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

.loadingDivBackground
{
    opacity: 0.6;
    background-color: #E6E6E6;
    color: #3B3B3B;
    background-image: none;
    left: 0;
    position: absolute;
    top: 0;
    z-index: 1;
    height: 100%;
    margin: 0;
    padding: 0;
    width: 100%;
}

[Eyup]

Hello Jesse,

Please remove the InitialDelayTime from your LoadingPanel and add the grid to the AJAX settings as an initiator:

<telerik:AjaxSetting AjaxControlID="RadGrid1">
    <UpdatedControls>
        <telerik:AjaxUpdatedControl ControlID="RadGrid1" LoadingPanelID="RadAjaxLoadingPanel1" />
    </UpdatedControls>
</telerik:AjaxSetting>

This should resolve the issue. Please give it a try and let me know about the result.

Regards,
Eyup
Telerik