[Solved] RadDock and AjaxControlToolkit.ModalPopupExtender

[shaun]

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?

[surfer]

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?

[Ubong]

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

[George]

I'm having a similar problem, has anything been done about this?

[Petya]

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

[George]

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>

 

[Petya]

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

[Sandeep]

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