RadAjax, RadWindow ans master page combination

7 posts, 0 answers
  1. Simon
    Simon avatar
    2 posts
    Member since:
    Jun 2009

    Posted 29 Mar 2010 Link to this post

    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
  2. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 01 Apr 2010 Link to this post

    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.
  3. Simon
    Simon avatar
    2 posts
    Member since:
    Jun 2009

    Posted 01 Apr 2010 Link to this post

    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

  4. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 06 Apr 2010 Link to this post

    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.
  5. José Mª
    José Mª avatar
    4 posts
    Member since:
    Oct 2007

    Posted 29 Dec 2010 Link to this post

    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.
  6. Iana Tsolova
    Admin
    Iana Tsolova avatar
    3388 posts

    Posted 29 Dec 2010 Link to this post

    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
    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  7. José Mª
    José Mª avatar
    4 posts
    Member since:
    Oct 2007

    Posted 29 Dec 2010 Link to this post

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