RadAjax, RadWindow ans master page combination

[Simon]

I have a complicated, though I suspect not unique scenario.

1. I have a page that is used to edit a record on a database.  The edit screen is shown as a popup form within the main page using a RadWindow control (definition as thus:...)

 

 

 

<telerik:RadWindow ID="wndPopup" runat="server" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" Skin="ControlCentre" VisibleOnPageLoad="false" VisibleStatusbar="false" VisibleTitlebar="true" Modal="true" ShowContentDuringLoad="false" Behaviors="Close" style="z-index:8000 !important" > </telerik:RadWindow>

2. The popup page uses a master page to control the look and feel etc..  This has the following defined on the top of the page:

 

 

    <form id="form1" runat="server">

        <telerik:RadScriptManager id="ScriptManager1" runat="server" EnablePageMethods="true" EnablePartialRendering="true" />
        <telerik:RadAjaxManager ID="RadAjaxManager2" runat="server" EnableAJAX="true" EnableHistory="true" EnableEmbeddedScripts="true" DefaultLoadingPanelID="pnlLoading2" > </telerik:RadAjaxManager>

        <telerik:RadAjaxLoadingPanel id="pnlLoading2" Runat="server" IsSticky="true" CssClass="divPleaseWait" InitialDelayTime="1" MinDisplayTime="250" >
            <div class="divPleaseWaitSmall">
                <div class="divPleaseWaitMsg">
                    <asp:Image ImageUrl="~/_img/loading.gif" AlternateText="Please Wait" ID="Image2" runat="server"/><br />
                    <p><strong>Please Wait</strong><br />We're working on your request...</p>
                </div>
            </div>
        </telerik:RadAjaxLoadingPanel>

        <telerik:RadWindowManager id="wndManager2" runat="server" Skin="ControlCentre" EnableEmbeddedSkins="false" EnableEmbeddedBaseStylesheet="false" ></telerik:RadWindowManager>

 

The RadWindowManager is used to show nice alerts to the user indicating that the validation isn't correct etc...


3. The popup page (content page not master page) has a checkbox on it to show / not show a datetime picker.  On checking the checkbox, the page should callback to the server to see if the datetime picker should be visible or not... The page has the following in the code:..

At the top of the page:

<asp:Content ID="Content5" ContentPlaceHolderID="cphServerControls"  Runat="Server">
    <telerik:RadAjaxManagerProxy ID="RadAjaxManagerProxy1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="chkDateEd" EventName="CheckedChanged">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="lblNotDiscontinued"  />
                    <telerik:AjaxUpdatedControl ControlID="dtpDateEnd" />
                </UpdatedControls>
            </telerik:AjaxSetting>
            <telerik:AjaxSetting AjaxControlID="hidUpdateField" EventName="ValueChanged">
                <UpdatedControls>
                <telerik:AjaxUpdatedControl ControlID="cphMainPage" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManagerProxy>

</asp:Content>

In the content of the page:

                <asp:Panel ID="Panel6" runat="server" CssClass="divStandardForm">
                   <asp:Label CssClass="formlabel" ID="lblEndDate" AssociatedControlID="pnlDateEnd" Text="End Date:" runat="server"></asp:Label>
                   <asp:Panel id="pnlDateEnd" runat="server">
                       <asp:CheckBox runat="server" ID="chkDateEd" AutoPostBack="true" /><span>&nbsp;&nbsp;<asp:label  ID="lblNotDiscontinued" runat="server" CssClass="OkData" Text="Continues, Click To Set Date"></asp:label><telerik:RadDateTimePicker ID="dtpDateEnd" runat="server" PopupDirection="TopLeft" ></telerik:RadDateTimePicker></span>
                   </asp:Panel>
                </asp:Panel>

It seems to me that all of the AJAX is working well... the date picker control appears / hides correctly and all of the RadAlert messages appear correctly.  All of the AJAX looks ok!

However, the problem is that my loading panel is never displayed... ever! :(   

This is causing me:
(a) serious headaches as I've spent lots of hours looking at it
(b) project slippage caused by (a)
(c) lots of abuse from customers as this looks poor without a "please wait" message


Please help me try to recover my sanity

Simon

[Iana Tsolova]

Hello Simon,

Can you try setting the Skin property of the RadAjaxLoadingPanel to an empty string and see if it makes any difference?
Also please send us the css classes definition used for the loading panel.

Best wishes,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[Simon]

Hi Iana,

I've been trying a few things today and one of them was the skin="" trick - but this has not fixed it.

Currently, my loading panel looks like this:

        <telerik:RadAjaxLoadingPanel id="RadAjaxLoadingPanel2" Runat="server" IsSticky="true" CssClass="divPleaseWait" Skin="" InitialDelayTime="1" MinDisplayTime="200" >
            <div id="WaitboxBackground">
                <div id="WaitBoxMessageSmall">
                    <img id="WaitboxImage" src="<%= resolveurl("~/_img/loading.gif") %>" alt="Please Wait..." />
                    <p><strong>Please Wait</strong><br />We're working on your request...</p>
                </div>
            </div>
        </telerik:RadAjaxLoadingPanel>

And the CSS looks as follows:

#WaitboxBackground
{
    position: fixed ;
    top: 0px;
    left: 0px;
    right: 0px;
    bottom: 0px;
    background-image: url(../_img/wait-back.png);
    background-attachment:fixed;
    color: #fff;
    z-index:9999;
}

#WaitBoxMessageSmall
{
    width:200px;
    margin-left:auto;
    margin-right: auto;
    margin-top: 10px;
    text-align: center;
    height:150px;
    color: #000;
    background-color:#fff;
    border: solid 1px #d0d0d0;
}

#WaitBoxMessage
{
    width:250px;
    height:180px;
    color: #000;
    background-color:#fff;
    border: solid 1px #d0d0d0;
}

#WaitboxImage
{
    border:none;
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
}

Hope that this helps.

Regards

Simon

[Iana Tsolova]

Hello Simon,

I used the provided code in the attached sample. However the loading panel is displayed as expected on my side. Can you try it and let me know how it works on your end and if I missed something from your logic out?

All the best,
Iana
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[José Mª]

I have the same problem and I haven't yet been able to solve it. Where's the master page in your project? I think the problem could be there.

Thanks in advance.

[Iana Tsolova]

Hello Simon,

Can you share the code of the problematic pages/code so I can check them and try finding what went wrong in your case?

Regards,
Iana
the Telerik team

[José Mª]

I solve the problem right now. The key was in the style of the RadAjaxLoadingPanel.
Outside the pages displayed through a RadWindow the style of the RadAjaxLoadingPanel was (in my project) as follows:
    . loadingGrid
    {
        background: # fdf4e4 url ('../ img / Grid / Loading.gif ') center center no-repeat;
    }
Simply.

And the code in the .aspx part:
    <rad: RadAjaxLoadingPanel ID = "ralpResultados" runat = "server"
         CssClass = "loadingGrid"
         HorizontalAlign = "Justify"
         Transparency = "30"
         EnableEmbeddedScripts = "true"
         Width = "100% " />

However, when the RadAjaxLoadingPanel is placed to be shown over a RadGrid inside a RadWindow component (which is using a master page -what I understand now it is irrelevant-) the style to be applied must be:
    .loadingGrid_popUp
    {
        background: #fdf4e4 url('../Img/Grid/Loading.gif') no-repeat center center;
        position: absolute;
        top: 0px;
        left: 0px;
        right: 0px;
        bottom: 0px;
        background-attachment: fixed;
        z-index: 10001;
    }
being fundamental the properties top, left, right, bottom, and position.

To make the RadAjaxLoadingPanel be displayed exclusively over the RadGrid and not over the complete window (RadWindow) one needs just to put both of them in a <div>:
    <div style="position:relative;overflow:hidden">
        <rad:RadGrid ID="rgResultados" runat="server"
            AllowMultiRowEdit="false"
            AllowPaging="true"
            AllowSorting="false"
            ....
        </rad.RadGrid>
        <rad:RadAjaxLoadingPanel ID="ralpResultados" runat="server"
            CssClass="loadingGrid_popUp"
            IsSticky="true"
            Transparency="30" />
    </div>

And  that is the best solution i've encountered, for now.

PD: sorry for my bad english...:'(