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

Keep RadAjaxPanel visible while loading

3 Answers 35 Views
Ajax
This is a migrated thread and some comments may be shown as answers.
Jesse
Top achievements
Rank 1
Veteran
Jesse asked on 28 Aug 2013, 03:18 PM
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?

3 Answers, 1 is accepted

Sort by
0
Eyup
Telerik team
answered on 02 Sep 2013, 10:28 AM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
0
Jesse
Top achievements
Rank 1
Veteran
answered on 03 Sep 2013, 04:43 PM
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%;
}




0
Eyup
Telerik team
answered on 06 Sep 2013, 01:06 PM
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
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Tags
Ajax
Asked by
Jesse
Top achievements
Rank 1
Veteran
Answers by
Eyup
Telerik team
Jesse
Top achievements
Rank 1
Veteran
Share this question
or