Keep RadAjaxPanel visible while loading

4 posts, 0 answers
  1. xr280xr
    xr280xr avatar
    13 posts
    Member since:
    Aug 2013

    Posted 28 Aug 2013 Link to this post

    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?
  2. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 02 Sep 2013 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. xr280xr
    xr280xr avatar
    13 posts
    Member since:
    Aug 2013

    Posted 03 Sep 2013 Link to this post

    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%;
    }




  5. Eyup
    Admin
    Eyup avatar
    3015 posts

    Posted 06 Sep 2013 Link to this post

    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.
Back to Top