No RadAjaxLoadingPanel animation when content is “display: none”

[Kristijan]

Hi Experts,

I am building a page divided in two sections. The first section is a table of SellingSubjects and the second a form where the details of the selected SellingSubject are displayed (<div class="divDetails" style="display: none">).

In order to enhance the user experience I wrapped each section in RadPane and use some client script to trigger the upload of the appropriate details when a line in a table is selected.

When the page is first loaded no line in the table is selected and I do not want to show an empty form. Therefore the details are hidden with “display: none”.

With this configuration I noticed that the RadAjaxLoadingPanel animation is not shown at first click on the table line in order to show the SellingSubject details. After some investigation I found out that the cause is in the “display: none” of the details. Do you have any suggestion to overcome this problem without changing the main functionality?

My site is a  DNN 6.00 module and I am using the embedded Telerik Ajax Controlls.

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SellingSubjectsView.ascx.cs"
    Inherits="Vits.Modules.VipCrm.Controls.Admin.SellingSubjectsView" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>
<%@ Register Src="~/DesktopModules/VipCrm/Controls/Admin/SellingSubjectsBasic.ascx"
    TagName="SellingSubjectsBasic" TagPrefix="vits" %>
<telerik:RadAjaxLoadingPanel ID="ralPanel" runat="server" BackgroundPosition="Center"
    Transparency="60" Skin="Windows7">
</telerik:RadAjaxLoadingPanel>
<asp:Button runat="server" Text="abc" ID="btnSaveDetails" CausesValidation="false"
    CssClass="AllTrigger" OnClick="btnSave_Click" Style="display: none;" />
<telerik:RadSplitter ID="RadSplitter" runat="server" Width="100%" Height="855px" CssClass="MainSplitter">
    <telerik:RadPane ID="rpTable" runat="server">
        <telerik:RadAjaxPanel ID="raxTable" runat="server" LoadingPanelID="ralPanel" ClientEvents-OnRequestStart="HideDetails">
            <asp:Panel ID="panTable" runat="server">
                <telerik:RadGrid ID="rgvMain" runat="server" OnInit="InitRagGrid" DataSourceID="gridData"
                    Height="850px" OnItemCreated="rgvMain_ItemCreated" CssClass="MainGrid" OnItemCommand="rgvMain_ItemCommand"
                    AllowPaging="True" PageSize="10">
                    <MasterTableView DataKeyNames="Id" AutoGenerateColumns="false" AllowFilteringByColumn="True"
                        AllowSorting="True" TableLayout="Auto" CssClass="fSelectable" OverrideDataSourceControlSorting="true"
                        CommandItemDisplay="Top">
                        <CommandItemTemplate>
                            <telerik:RadButton ID="btnAdd" runat="server" AutoPostBack="false" OnClientClicked="NewSellingSubject">
                                <Icon PrimaryIconUrl="~/images/Add.gif" PrimaryIconLeft="5px" />
                            </telerik:RadButton>
                            <telerik:RadButton ID="btnDelete" runat="server" CommandName="DeleteCMD" OnClientClicking="AlertDelete">
                                <Icon PrimaryIconUrl="~/images/delete.gif" PrimaryIconLeft="5px" />
                            </telerik:RadButton>
                        </CommandItemTemplate>
                        <Columns>
                            <telerik:GridBoundColumn DataField="Id" DataType="System.Int32" ItemStyle-CssClass="fId"
                                SortExpression="Id" />
                            <telerik:GridBoundColumn DataField="Name" HeaderText="Name" ItemStyle-CssClass="fName"
                                SortExpression="Name" DataType="System.String" UniqueName="Name" CurrentFilterFunction="StartsWith"
                                AutoPostBackOnFilter="true" FilterDelay="801" FilterControlWidth="100%" ShowFilterIcon="false" />
                        </Columns>
                        <SortExpressions>
                            <telerik:GridSortExpression FieldName="Id" SortOrder="Descending" />
                        </SortExpressions>
                    </MasterTableView>
                    <FilterMenu EnableImageSprites="False" />
                    <GroupingSettings CaseSensitive="false" />
                    <ClientSettings AllowRowsDragDrop="True" AllowColumnsReorder="true" ReorderColumnsOnClient="true">
                        <Resizing AllowColumnResize="true" />
                        <Selecting AllowRowSelect="True" EnableDragToSelectRows="false" />
                        <Scrolling AllowScroll="true" UseStaticHeaders="true" />
                    </ClientSettings>
                    <PagerStyle Mode="NextPrevAndNumeric" AlwaysVisible="true"></PagerStyle>
                </telerik:RadGrid>
                <asp:ObjectDataSource ID="gridData" runat="server" TypeName="Vits.Modules.VipCrm.Dal.Admin.DaoSellingSubjects"
                    SelectMethod="GetAll" />
            </asp:Panel>
        </telerik:RadAjaxPanel>
    </telerik:RadPane>
    <telerik:RadSplitBar ID="spliteBar" runat="server" CollapseMode="Both" />
    <telerik:RadPane ID="rpDetails" runat="server">
        <telerik:RadAjaxPanel ID="raxDetails" runat="server" LoadingPanelID="ralPanel" ClientEvents-OnResponseEnd="ShowDetails">
            <vits:SellingSubjectsBasic ID="sellingSubjectsBasic" runat="server" Visible="true" />
        </telerik:RadAjaxPanel>
    </telerik:RadPane>
</telerik:RadSplitter>

Details:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="SellingSubjectsBasic.ascx.cs"
    Inherits="Vits.Modules.VipCrm.Controls.Admin.SellingSubjectsBasic" %>
<%@ Register TagPrefix="dnn" TagName="Label" Src="~/controls/LabelControl.ascx" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<asp:Panel ID="panDetails" runat="server" OnLoad="panDetails_Load">
    <div class="divDetails" style="display: none">
        <a href="#" class="selected" onclick="__doPostBack('<%= panDetails.ClientID %>', '');">
        </a>
        <asp:HiddenField ID="hdCmd" runat="server" />
        <asp:HiddenField ID="hdId" runat="server" />
        <div class="divDetailsHead NoMenu fDetHead">
            <asp:Label ID="lblItemName" runat="server" />
        </div>
        <div class="fEditCommand">
            <telerik:RadButton ID="btnEdit" runat="server" AutoPostBack="false" OnClientClicked="EditDetails">
                <Icon PrimaryIconUrl="~/images/edit_pen.gif" PrimaryIconLeft="5px" />
            </telerik:RadButton>
        </div>
        <table class="VitsDetails">
            <tr>
                <td>
                    <dnn:label id="lblName" runat="server" controlname="lblName" />
                </td>
                <td>
                    <asp:TextBox ID="txtName" CssClass="NormalTextBox fEdit fName NotAllowed" runat="server" />
                    <asp:RequiredFieldValidator ID="rfvName" ControlToValidate="txtName" Display="Dynamic"
                        CssClass="dnnFormMessage dnnFormError" runat="server" ErrorMessage="*"></asp:RequiredFieldValidator>
                </td>
            </tr>
            <tr>
                <td>
                    <dnn:label id="lblDescription" runat="server" controlname="lblDescription" />
                </td>
                <td>
                    <asp:TextBox ID="txtDescription" CssClass="NormalTextBox fEdit Wider NotAllowed" runat="server"
                        TextMode="MultiLine" />
                </td>
            </tr>
        </table>
        <table class="fCommand Commands Hidden">
            <tr>
                <td>
                    <telerik:RadButton ID="btnSave" runat="server" AutoPostBack="false" OnClientClicked="SubmitAll">
                        <Icon PrimaryIconUrl="~/images/save.gif" PrimaryIconLeft="5px" />
                    </telerik:RadButton>
                </td>
                <td>
                    <telerik:RadButton ID="btnCancel" runat="server" CausesValidation="false" OnClick="btnCancel_Click">
                        <Icon PrimaryIconUrl="~/images/cancel.gif" PrimaryIconLeft="5px" />
                    </telerik:RadButton>
                </td>
            </tr>
        </table>
    </div>
</asp:Panel>

Thank you,

Kristijan

[Iana Tsolova]

Hello Kristijan,

The behavior you experienced is rather expected. The RadAjaxLoadingPanel cannot calculate its dimentions as there are no visible controls based on which to do it, it is not displayed. The easiest way to overcome this, is to position the RadAjaxLoadingPanel absolutely:

<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server" IsSticky="true"
    style="position:absolute; top:0; left:0; width:100%; height:100%" />

You can of course change the settings for left, topo, width and height, to simulate that the loading panel is displayed over the hidden div.
For more information on how to set these styles dynamically, check the below article:
http://www.telerik.com/help/aspnet-ajax/ajax-show-loadingpanel-next-to-ajax-initiator.html

Regards,
Iana
the Telerik team

[Kristijan]

HI Iana, 

Thank you for your accurate answer.
Now I got the point. I am using jQuerry hide/show funcrions to display the content which operates with the “display: none” values.
To overcome this problem I just to set the  "visibility: hidden" values manually.

Kristijan