RadDock and AjaxControlToolkit.ModalPopupExtender

8 posts, 0 answers
  1. shaun
    shaun avatar
    14 posts
    Member since:
    May 2007

    Posted 05 May 2007 Link to this post

    I have a user control that makes use of the AjaxControlToolkit.ModalPopupExtender to display a modal popup.  When I place my user control directly on a page, it works great.  When I place my user control inside a RadDock (copied from the "My Portal" dock example), the modal popup only becomes modal INSIDE the RadDock.

    Any ideas?
  2. surfer
    surfer avatar
    585 posts
    Member since:
    Jul 2003

    Posted 05 May 2007 Link to this post

    From what I see, the new Prometheus Rad Dock renders in the following way:

    <div id="RadDock0" class="raddock RadDock_Default rdVariableHeight" style="width: 300px; position: relative;"
        <div class="rdSideBorders rdHTitlebar"
            <div id="RadDock0_T" class="rdTitlebar"
                <em class="rdTitle">Dock 0</em> 
                <span class="rdCommands" style="width: 30px;"
                </span> 
            </div> 
        <div id="RadDock0_C" class="rdContent"
            <span> 
                ... 
                Dock Content Goes Here 
                ... 
            </span> 
        </div> 
    </div< 

    Maybe the position:relative Css setting of the dock is the culprit? Maybe you can test the Modal Extender in a <div> with settings similar to this and remove the relative Css setting to see of the modal get modal for the whole page?


  3. Ubong
    Admin
    Ubong avatar
    328 posts

    Posted 10 May 2007 Link to this post


    Hello Shaun,

    Could you try placing the control in another div with similar settings as the dock control and try placing and then removing the styles.
    If you stillhave problems, we will ask that you open a support ticket, then zip and send us a sample application demonstrating the style issue for us to look at and we will get back to you with our findings. We are not sure if the problem is not with the Toolkit itself or not

    Kind Regards,

    Ubong
    the Telerik team


    Instantly find answers to your questions at the new Telerik Support Center
  4. George
    George avatar
    3 posts
    Member since:
    Jul 2006

    Posted 23 Sep 2007 Link to this post

    I'm having a similar problem, has anything been done about this?
  5. Petya
    Admin
    Petya avatar
    869 posts

    Posted 27 Sep 2007 Link to this post

    Hi George,

    Would it be possible for you to open a support ticket and send us a simple running project demonstrating the issues you have plus some more information on the problem. We will run it and investigate the problem to try to provide the most appropriate solution.

    Kind regards,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. George
    George avatar
    3 posts
    Member since:
    Jul 2006

    Posted 03 Oct 2007 Link to this post

    I have a user control (quicksearchcontrol.asxc) that is inside a raddock.  This is my parent page (default.aspx).  When I click the test button inside my raddock i some of the other raddocks are still editable or draggable, when really the entire screen should be blanked out.

    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="QuickSearchControl.ascx.cs" Inherits="ComponentArt.GlobalMainControls.QuickSearchControl" %>

    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

    <div class="panel tabbed">

    <asp:Button runat="server" ID="ViewAppointmentButton" Text="Test" />

    <cc1:ModalPopupExtender ID="SaveConfirmationPanel" runat="server" BehaviorID="programmaticModalPopupBehavior1" TargetControlID="ViewAppointmentButton"

    PopupControlID="SaveAppointmentsPanel" BackgroundCssClass="bg-lightbox" DropShadow="False" X="16" Y="0" CancelControlID="CloseButton_SavePanel">

    </cc1:ModalPopupExtender>

    <asp:Panel ID="SaveAppointmentsPanel" runat="server" SkinID="lightbox">

    <div class="head">

    <div class="header">

    <div class="branding">

    <h1>

    &nbsp;</h1>

    </div>

    </div>

    </div>

    <div class="body">

    <dl>

    <dt>Details</dt><dd><asp:Label runat="server" ID="CompletedLabel"></asp:Label></dd><dd><asp:Label runat="server" ID="ActiveLabel"></asp:Label></dd><dd><asp:Label runat="server" ID="CancelledLabel"></asp:Label></dd><dt>Appointment for</dt><dd>Something</dd></dl>

    </div>

    <div class="foot">&nbsp;</div>

    </asp:Panel>

    </div>







    my default page

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default2.aspx.cs" Inherits="ComponentArt.Default2" %>

    <%@ Register Src="GlobalMainControls/QuickSearchControl.ascx" TagName="QuickSearchControl"

    TagPrefix="uc6" %>

    <%@ Register Src="GlobalMainControls/MainControl.ascx" TagName="MainControl" TagPrefix="uc5" %>

    <%@ Register Src="Main/Email.ascx" TagName="Email" TagPrefix="uc4" %>

    <%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

    <%@ Register Src="GlobalMainControls/EmailSummaryControl.ascx" TagName="EmailSummaryControl"

    TagPrefix="uc1" %>

    <%@ Register Src="GlobalSummaryControls/EmailControl.ascx" TagName="EmailControl"

    TagPrefix="uc2" %>

    <%@ Register Src="GlobalMainControls/SummaryControl.ascx" TagName="SummaryControl"

    TagPrefix="uc3" %>

     

     

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml">

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <meta http-equiv="imagetoolbar" content="false" />

    <meta name="MSSmartTagsPreventParsing" content="true" />

    <link type="text/css" rel="stylesheet" media="all" href="/global/css/global.css" />

    <link type="text/css" rel="stylesheet" media="all" href="/global/css/modules.css" />

    <link type="text/css" rel="stylesheet" media="all" href="/global/css/forms.css" />

    <link type="text/css" rel="stylesheet" media="all" href="/global/css/demos.css" />

    <link type="text/css" rel="stylesheet" media="all" href="global/css/docks.css" />

    <script type="text/javascript" src="/global/js/ie_nav.js"></script>

    <script type="text/javascript" src="/global/js/global.js"></script>

    <script type="text/javascript" src="/global/js/init.js"></script>

    <script type="text/javascript" src="/global/js/Calculator_Functions.js"></script>

    </head>

    <body>

    <form runat="server" method="post">

    <asp:ScriptManager ID="ScriptManager1" runat="server">

    </asp:ScriptManager>

    <div id="page">

    <div id="container">

    <div id="frame">

    <div id="mount" style="background-image:url(/media/3962/dv1243013_22.jpg);">

    <div class="sidebar-primary">

    <div class="nav-secondary">

    <telerik:RadDockZone ID="RadDockZone1" runat="server" Height="600">

    <telerik:RadDock ID="RadDock1" runat="server" Height="500" Title="Email">

    <ContentTemplate>

    <uc2:EmailControl ID="EmailControl1" runat="server" />

    </ContentTemplate>

    </telerik:RadDock>

    <telerik:RadDock ID="RadDock4" runat="server" Height="500" Title="Email">

    <ContentTemplate>

    <uc6:QuickSearchControl id="QuickSearchControl1" runat="server"></uc6:QuickSearchControl>

    </ContentTemplate>

    </telerik:RadDock>

    </telerik:RadDockZone>

    </div>

    </div>

    <div class="body">

    <!--div class="heading">

    <h2>Here</h2>

    </div-->

    <div class="content">

    <telerik:RadDockZone ID="RadDockZone3" runat="server" Height="600px">

    <telerik:RadDock ID="RadDock3" runat="server" Height="600px">

    <ContentTemplate>

    <uc5:MainControl ID="MainControl1" runat="server" />

    </ContentTemplate>

    </telerik:RadDock>

    </telerik:RadDockZone>

    </div>

    </div>

    <div class="sidebar-secondary">

    <telerik:RadDockZone ID="RadDockZone2" runat="server" Height="600">

    <telerik:RadDock ID="RadDock2" runat="server">

    <ContentTemplate>

    <uc3:SummaryControl ID="SummaryControl1" runat="server" />

    </ContentTemplate>

    </telerik:RadDock>

    </telerik:RadDockZone>

    </div>

    </div></div></div>

    <!--div id="footer">

    <ul><li><a href="/contact-us.aspx">Contact Us</a></li><li><a href="/terms-of-use.aspx">Terms of use</a></li><li><a href="/privacy-disclaimer.aspx">Privacy Disclaimer</a></li><li><a href="/sitemap.aspx">Site map</a></li></ul> <p><strong>IMPORTANT</strong> This is general advice and does not take into account your particular investment objectives, financial situation and specific needs. Before making a decision on the basis of this information, you should consider whether this information is appropriate for you in light of your investment objectives, financial situation and specific needs.</p>

    </div-->

    </div>

    </form>

    </body>

    </html>

     



  7. Petya
    Admin
    Petya avatar
    869 posts

    Posted 05 Oct 2007 Link to this post

    Hello George,

    I used the code you provided to create a simple project and test the matter. I reproduced the problem and in my opinion it is due to the fact that the modal popup element is rendered inside the dock (speaking generally inside its parent).  Since you want to achieve a modal behavior so that when the popup appears everything else be disabled, it is best practice for the popup element to be rendered directly as a child of the body element. When rendered inside a dock it needs to be rendered inside the element with the greatest stacking context and your scenario does not fulfill this criteria (you can notice that if you have three docks and you place the modal popup extender in the second one, the first and the second docks get disabled, but third one does not). Therefore, we suggest that in this concrete scenario you try using radconfirm. I tested your code with radconfirm and it works correctly.

    Kind regards,
    Petya
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Sandeep
    Sandeep avatar
    1 posts
    Member since:
    Jan 2008

    Posted 24 Jan 2008 Link to this post

    hi! Gyz
    I am working on DNN 4.5, Actually i want to add the 

    ModalPopupExtender

    to my website, but i dont have any idea how to start with, Please help me

Back to Top