use Ajax: modalpopupextender

Showing posts with label modalpopupextender. Show all posts

Wednesday, March 28, 2012

postback inside modalpopupextender

I want to show a modalpopupextender that contains: a textbox ,A button, gridview, ok button , close button: when the user click on A button the gridview must be populated , I need this behavior inside the modalpopupextender but it seems like modalpopupextender does not support any control that make a postback, How can I manage this??

Best Regards

Joseph

I already have done this what you need to do is,

let say. btnSearch popups your ModalpopupExtender,

when you click in side the control do one thing only in the code behind, of that click event either grid pageindexchange, sortiung, any button click in the last. that is.

ModalPopupExtender1.Show()

it will keep showing the popup until you click close button or call a method.

ModalPopupExtender1.Hide()

It is trial and tested, even I have done more than this in my application.

IF THIS MAKES ANSWER PLEASE CLICK ANSWER ON MY POSTING

Regards,

Hi Killerjocker,

My understanding of your issue is that you want to show some controls include the GridView and generate(update) the content inside it when click on the Button which is associated with the ModalPopupExtender. If I have misunderstood, please feel free to let me know.

In my opnion, I think the easiest way for your situation is adding a UpdatePanel into the Panel which is associated with the ModalPopupExtender and the GridView is put inside the added UpdatePanel. When user click on the Button, the UpdatePanel will be refreshed by sending a asynchronous post and then the shows the ModalPopupExtender. Here is a sample:

<%@. Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server"
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<style>
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}

.modalPopup {
background-color:#FFD9D5;
border-width:3px;
border-style:solid;
border-color:Gray;
padding:3px;
width:250px;
}
</style>

</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Button ID="Button2" runat="server" Text="Button" Enabled="false" style="display:none"/>
<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Height="50px" Width="235px" style="display:none" DefaultButton="Button4">
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<%=DateTime.Now.ToString()%>
</ContentTemplate>
</asp:UpdatePanel>
<asp:Button ID="Button1" runat="server" Text="Cancel" />
<asp:Button ID="Button4" runat="server" Text="Button" />
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="Button2" PopupControlID="Panel1" CancelControlID="Button1" DropShadow="true" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<input id="Button3" type="button" value="Click Me" onclick="showModalPopup()"/>
<script type="text/javascript" language="javascript">
function showModalPopup(){
__doPostBack('<%=UpdatePanel1.UniqueID%>','');
$find("<%= this.ModalPopupExtender1.ClientID%>").show();
}
</script>
</form>
</body>
</html>

I hope this help.

Best regards,

Jonathan

Postback problem with dynamically added ModalPopupExtender

In my task i have to create ModalPopupExtender dynamically, and add an .ascx control to it. This is the code:

Test.aspx page:

asp:ScriptManagerProxyrunat="server"ID="proxy"/>

asp:UpdatePanelrunat="server"ID="ajaxPanel"RenderMode="Inline"UpdateMode="Conditional"><ContentTemplate><asp:Panelrunat="server"ID="panel"><asp:Buttonrunat="server"ID="btn2"Text="Show Control"OnClick="btn2_Click"/></asp:Panel>

--<asp:Button runat="server" ID="btn1" Text="test1" OnClick="btn1_Click" />--%>

</ContentTemplate></asp:UpdatePanel>

test.ascx control:

asp:ScriptManagerProxyrunat="server"ID="proxy"/>

asp:UpdatePanelrunat="server"ID="ajaxPanel2"RenderMode="Inline"UpdateMode="Always"><ContentTemplate> <asp:Buttonrunat="server"ID="btnTest2"Text="test2"OnClick="btnTest2_Click"/></ContentTemplate></asp:UpdatePanel><asp:Buttonrunat="server"UseSubmitBehavior="false"ID="btnTest"Text="Close OK"OnClick="btnTest_Click"/><asp:Buttonrunat="server"UseSubmitBehavior="false"ID="btnTestClose"Text="Close"OnClick="btnTest_Click"/>

In aspx page:

protected

overridevoid OnInit(EventArgs e)

{

base.OnInit(e);Control c = LoadControl("~/test.ascx");

c.ID =

"customModalControl";Panel p =newPanel();

p.Width = 300;

p.Height = 200;

p.CssClass =

"modalPopup";

p.ID =

"modalPanel_";_modalPopup =newModalPopupExtender();

_modalPopup.ID =

"modalPopup";

_modalPopup.DropShadow =

true;

_modalPopup.BackgroundCssClass ="modalBackground";

_modalPopup.PopupControlID = p.ID;

_modalPopup.TargetControlID = btn2.ID;

Control c2 = c.FindControl("btnTest");

_modalPopup.OkControlID = c2.ClientID;

c2 = c.FindControl("btnTestClose");

_modalPopup.CancelControlID = c2.ClientID;

p.Controls.Add(c);

panel.Controls.Add(_modalPopup);

panel.Controls.Add(p);

}

protectedvoid btn1_Click(object sender,EventArgs e)

{

}

protectedvoid btn2_Click(object sender,EventArgs e)

{

_modalPopup.Show();

}

onInit event, i create ModalPopupExtender and a panel for ascx control. All works fine, but is one problem Crying , when i click btnTest2 on ModalPopup, rises postback for the page, but ascx control didn't receive btnTest2 _OnClick event. Maybe someone know where is a problem. Thank you.

Try to change change some of your codes to specify asynchronous post back.
<asp:UpdatePanel runat="server" ID="ajaxPanel2" RenderMode="Inline" UpdateMode="Always">
<ContentTemplate>
??????<asp:Button runat="server" ID="btnTest2" Text="test2" OnClick="btnTest2_Click"/>
</ContentTemplate>
<triggers>
????<asp:AsyncPostBackTrigger ControlID="btnTest2" EventName="Click"/>
</triggers>
</asp:UpdatePanel>
Wish this can help you.

Postbacks and animationextender / modalpopupextender

I have a usercontrol which handles its own postbacks. I would like to place this usercontrol in a panel, which gets displayed either using the animationextender or the modalpopupextender. The problem is that when a user clicks on any control which fires the postback in the usercontrol, the usercontrol disappears from the page.

Would anyone happen to know how to prevent the target panel of a modalpopupextender or animationextender from disappearing on a postback? Thanks!

Have you gotten anywhere with this problem? I just came across this issue and need to also understand how to properly do this. Thanks.

Monday, March 26, 2012

pre-populating a modalpopupextender

Hi All,

I am using a modalpopupextender control on a form. The popup is actually a panel as opposed to another seperate from. To date the method for working like this has worked fine, however I have never had areason to pre-populate the popup. This time I do and now I have a problem.

My main form displays items based on a user selection. At the bottom of the page they are allowed to add or remove items so for this we want to pre-populate the popup before displaying it. To keep things simple for the moment I've just placed a label on my panel that is part of the popup. when the user has made a selection on the main page, I set the label ready for when the user may decide to use the popup. The probem is that when the popup is displayed, the label hasn't got the value. To help understand what I'm doing here's some of my code.

<cc1:ModalPopupExtender ID="mpeModifyRelationships" runat="server" PopupControlID="ModifyRelationships" TargetControlID="btnFake" BackgroundCssClass="modalBackground" CancelControlID="RelationshipCancelButton" ></cc1:ModalPopupExtender><script type="text/javascript">function showRelationShipPopup(){$get('<%=ModifyRelationships.ClientID%>').className = "modalpopup";$find('<%=mpeModifyRelationships.ClientID%>').show();return false;}</script>

then also on the main page I have this button. This makes the call to the above function causing the popup to display.

<asp:Button ID="btnModify" runat="server" Text="Modify Relationship" Enabled="false" OnClientClick="return showRelationShipPopup()" />

Now my popup is made up thus:

  <asp:Panel ID="ModifyRelationships" runat="server" Height="500px" Width="1000px" BackColor="White" BorderStyle="Solid" CssClass="hidden" ScrollBars="Auto"> <table> <tr> <td>Attribute: <asp:Label ID="lblAttribute" runat="server" Text=""></asp:Label></td> <td>Component: <asp:Label ID="lblComponent" runat="server" Text=""></asp:Label></td> <td>Sub-Component: <asp:Label ID="lblSubComponent" runat="server" Text=""></asp:Label></td> </tr> </table> Associated Sors <div style="margin-left: 20px; margin-right: 20px" class="box"> <asp:ListBox ID="lstBoxAssSors" SelectionMode="single" runat="server" Height="120px" Width="936px"></asp:ListBox> </div> <asp:Button ID="RelationshipCancelButton" runat="server" Text="Cancel" CausesValidation="False" Width="80px" /> </asp:Panel>

So behind the scenes I'm setting lblAttribute.text, but when the button is pressed the popup displays, but the text is empty.

See this thread:http://forums.asp.net/p/1149333/1870370.aspx

-Damien

Prevent Modal Popup from Moving on Async Postback?

I have a draggable a panel with a ModalPopupExtender with an UpdatePanel inside it. Whenever I have an asynchronous postback run, the popup "jumps" back to to the center of the screen. Ideally it would stay in whatever position it is currently in, as the jump is jarring to the user experience.

Anyone know a way to avoid this?

Thanks!

Hi MWB,

To troubleshoot this issue, we really need the source code to reproduce the problem, so that we can investigate the issue in house. It is not necessary that you send out the complete source of your project. We just need a simplest sample to reproduce the problem. You can remove any confidential information or business logic from it.

Best regards,

Jonathan

Hi Jonathan -

Thanks very much for responding. I put together an extremely simple (and rather ugly, so forgive me) website project that reproduces the jumping modal popup behavior. Please let me know if you have any thoughts or questions. Since I can't directly upload the project files, the code is below.

Thanks again!

-Matthew

Default.aspx

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style>
*
{
font-family: Verdana, Helvetica, San-Serif;
}

.popupButton
{
font-weight: bold;
color: #C00;
}

.modalPopupBackground
{
background-color: #CCC;
filter: alpha(opacity=60);
opacity: 0.6;
}

.windowTitle
{
border: solid 2px #9CF;
background-color: #369;
color: #FFF;
font-size: 16px;
text-align: center;
padding: 10px 10px 10px 10px;
}

.window
{
width: 400px;
border: solid 2px #036;
background-color: #FFF;
padding: 5px 5px 5px 5px;
}

.windowContent
{
text-align: center;
margin: 10px 10px 10px 10px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" /
<h1>Click this button</h1>
<asp:Button ID="Button_OpenPopup" runat="server" Text="Open Modal Popup" CssClass="popupButton" /
<div>
<h4>Junk text to allow dragging of Modal Popup</h4>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus vehicula nisi vitae elit. Vivamus metus diam, dignissim in, vehicula vitae, ultrices a, dui. Maecenas nec eros vel lacus gravida nonummy. Donec laoreet, metus vel interdum sodales, pede augue iaculis nunc, et venenatis sem mi sed elit. Donec arcu. Praesent nec magna. Nunc egestas lectus ac quam. Quisque in justo non tortor luctus faucibus. Fusce mattis dignissim diam. Phasellus gravida risus vel magna. Mauris commodo felis nec metus. Cras commodo euismod ante. Donec consectetuer nisl vitae nulla. Nam aliquet. Mauris semper velit id orci. Suspendisse elementum, pede et dictum molestie, mi ante pulvinar metus, ut varius massa dui et diam. Integer dictum fermentum ipsum. Nunc quis odio. Aenean vitae tellus.
</p>
<p>
In elit lectus, fermentum ac, fringilla accumsan, aliquam in, turpis. Praesent tempus sagittis augue. Aenean leo lectus, mattis ultricies, interdum sed, luctus ac, ligula. In hac habitasse platea dictumst. Vivamus placerat. Fusce turpis enim, tempor tempor, luctus at, bibendum id, sapien. Morbi feugiat ante eu eros. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin sed felis. Duis sit amet justo. Vivamus eu diam ac dui bibendum tempus. Vivamus quis neque sit amet felis rutrum tristique.
</p>
<p>
Pellentesque adipiscing accumsan est. Sed dignissim arcu nec orci. Sed euismod diam. Donec at tellus. Suspendisse mauris neque, pharetra et, pretium vitae, blandit ut, pede. Vestibulum aliquet, nisi eu varius congue, neque dolor ornare augue, ut iaculis lacus urna eget justo. Vivamus urna. Suspendisse ipsum diam, blandit sit amet, semper ut, cursus eu, leo. Cras pede lorem, rhoncus vitae, posuere ac, ultrices at, lacus. Cras in augue quis purus ultrices sollicitudin. Nam congue, magna id sodales suscipit, tortor tellus ullamcorper metus, blandit iaculis nunc eros id augue. Nam posuere erat quis est. Nunc porta leo et lorem. Nam cursus massa et arcu. Proin augue diam, blandit ut, imperdiet a, elementum nec, purus. Pellentesque metus mauris, dignissim ac, dignissim et, venenatis in, massa. Curabitur eget dui sit amet erat tincidunt volutpat. Fusce vel nibh quis erat blandit posuere. Mauris porta, erat sit amet tincidunt commodo, augue lectus porttitor nulla, nec lobortis lacus elit ut elit. Cras feugiat posuere justo.
</p>
<p>
Cras a velit id massa ornare commodo. Donec egestas. Vestibulum sed felis. Etiam aliquam, tellus sit amet consectetuer bibendum, dui ante volutpat ligula, at semper lacus tellus a lorem. Sed et elit. Integer nisi purus, suscipit ac, nonummy nec, placerat eget, diam. Nullam sodales. Quisque erat pede, ultrices non, cursus ut, euismod vel, sem. In hac habitasse platea dictumst. Ut sit amet est. Nulla pellentesque. Quisque non dolor. Vestibulum mi arcu, accumsan ac, ullamcorper mollis, dignissim eu, urna. Vestibulum metus quam, congue eget, tempus quis, pellentesque ac, eros. Suspendisse risus lectus, interdum nec, tristique ut, auctor eu, urna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Etiam ac mi. Sed eget arcu. Curabitur eu libero sit amet odio fringilla pharetra. Aenean arcu.
</p>
<p>
Donec malesuada. Phasellus sapien risus, tristique sit amet, varius id, iaculis sit amet, purus. Morbi egestas risus et turpis. Curabitur quis quam. Vestibulum tortor sem, feugiat id, laoreet et, egestas at, metus. Aenean pellentesque tellus sed metus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Phasellus lacinia tempor erat. Vestibulum pharetra, sem vel porttitor lobortis, libero erat ultricies nulla, sed suscipit justo lorem vel nisi. Sed at sapien. Maecenas vestibulum elementum odio. Duis sagittis, diam vel posuere egestas, sapien lorem vulputate metus, faucibus rhoncus diam nulla sed est. Mauris imperdiet. Nulla sagittis. Aliquam velit arcu, facilisis in, tempus vel, hendrerit in, dolor. Ut lacinia est non neque nonummy ullamcorper.
</p>
<p>
*** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed sit amet orci eu neque imperdiet imperdiet. Phasellus blandit mauris nonummy urna. Phasellus lacinia vestibulum felis. Fusce ullamcorper egestas sem. Donec auctor, lacus nec vulputate convallis, nunc purus vehicula erat, vitae blandit purus mi at lectus. Suspendisse tincidunt. Donec id justo. Sed eros augue, lobortis non, rhoncus quis, fermentum porta, risus. Pellentesque egestas condimentum quam. Nullam neque. Vivamus convallis tellus ut mauris. Phasellus luctus dapibus nibh. Phasellus pulvinar massa non nisi. Aenean malesuada euismod lacus. *** sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce vitae tortor non diam pellentesque consectetuer. Curabitur tincidunt nunc sit amet turpis.
</p>
<p>
Donec est turpis, mattis in, scelerisque non, aliquet elementum, libero. Quisque mauris erat, rhoncus sit amet, tristique vitae, condimentum in, nunc. Vivamus quam nisl, tincidunt vel, consequat eu, sodales id, mauris. Nam eu eros id massa cursus pellentesque. Etiam quis metus in mi fringilla lacinia. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse ac nisi. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Sed sodales porttitor dolor. Vestibulum risus. Mauris augue augue, ultricies vitae, adipiscing in, elementum sit amet, nunc.
</p>
<p>
Pellentesque pulvinar dignissim quam. Donec sed justo et elit semper interdum. Duis nec leo ac urna pellentesque eleifend. Morbi consectetuer purus ut felis. Nulla euismod fermentum enim. Ut aliquet tellus at justo. Sed purus. Phasellus porttitor commodo ligula. Phasellus sem. Donec non orci. Donec in nibh in lorem lacinia sagittis. Aenean vestibulum dictum sem. Sed ligula. Maecenas pharetra laoreet velit. Nam vitae mauris nec tellus cursus tincidunt. Curabitur malesuada massa feugiat nisl. Maecenas dapibus aliquam diam. Pellentesque ac dolor. Proin sagittis ultricies dui.
</p>
<p>
Ut vel orci sagittis odio tempor porta. Cras vitae nunc. In sollicitudin pharetra sapien. Donec imperdiet. Aenean egestas dui a mi. Cras mauris velit, tincidunt sed, tempor et, sollicitudin et, arcu. Quisque turpis lorem, hendrerit quis, blandit quis, convallis eget, pede. Etiam lacus lectus, molestie vitae, egestas pellentesque, dapibus sit amet, est. Suspendisse nibh dolor, bibendum a, sollicitudin sollicitudin, pulvinar sed, magna. Proin in nunc. Praesent blandit tempus magna. Aliquam erat volutpat. Morbi mattis. Nunc pretium laoreet ante. Integer eros nisi, luctus sed, commodo quis, tincidunt quis, ipsum. Morbi magna dolor, tempor id, sagittis faucibus, adipiscing at, dui. Sed ornare, orci non lobortis viverra, nibh enim auctor lorem, at bibendum lacus massa et eros. Phasellus luctus. Suspendisse volutpat nunc eget augue.
</p>
<p>
Curabitur vulputate. Donec nunc lorem, porta accumsan, pretium nec, scelerisque aliquet, ligula. Aenean eleifend aliquam lorem. Quisque facilisis. Nullam porta. Vivamus congue dapibus libero. Vestibulum placerat bibendum enim. Sed diam eros, lobortis vel, varius a, pretium et, nibh. Nulla nisi dui, malesuada eu, lobortis tincidunt, mattis nec, leo. Proin massa mauris, interdum et, elementum vitae, ornare ut, lorem. Fusce erat massa, dignissim sed, viverra sit amet, euismod in, magna. Donec consectetuer porta odio.
</p>
</div
<asp:Panel ID="Panel_PopupWindow" runat="server" CssClass="window">
<asp:Panel ID="Panel_Panel_PopupWindowTitle" runat="server" CssClass="windowTitle">
<p><strong>Drag Me</strong></p>
<asp:Button ID="Button_ClosePopup" runat="server" Text="Close Modal Popup" />
</asp:Panel
<asp:Panel ID="Panel_PopupWindowContent" runat="server" CssClass="windowContent">
<asp:UpdatePanel ID="UpdatePanel_PopupWindowContent" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="True">
<ContentTemplate>
<div style="text-align: left;">
<p>How to reproduce the jumping Modal Popup issue:</p>
<ol>
<li>
Drag the popup using the blue box that says "Drag Me" above
so that the popup is no longer in the default centered location
</li>
<li>Click "Generate Asynchronous Postback"</li>
<li>
Note how the popup "jumps" back to the default
center location. This is the behavior I wish to avoid.
</li>
</ol>
</div>
<p><strong>Any ideas? Thanks!</strong></p>
<p><asp:Literal ID="Literal_Test" runat="server" /></p>
<asp:Button runat="server" Text="Generate Asynchronous Postback" OnClick="ShowDate" />
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" EnableViewState="true" TargetControlID="Button_OpenPopup" PopupControlID="Panel_PopupWindow"
CancelControlID="Button_ClosePopup" PopupDragHandleControlID="Panel_Panel_PopupWindowTitle" BackgroundCssClass="modalPopupBackground" />
</form>
</body>
</html>

Default.aspx.cs

using System;
using System.Web.UI.WebControls;
public partialclass _Default : System.Web.UI.Page
{
protected void ShowDate(object sender, EventArgs e)
 {
 Literal_Test.Text = System.DateTime.Now.ToString();
 }
}

Web.Config

<configuration>
<configSections>
<sectionGroup name="system.web.extensions" type="System.Web.Configuration.SystemWebExtensionsSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<sectionGroup name="scripting" type="System.Web.Configuration.ScriptingSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="scriptResourceHandler" type="System.Web.Configuration.ScriptingScriptResourceHandlerSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<sectionGroup name="webServices" type="System.Web.Configuration.ScriptingWebServicesSectionGroup, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35">
<section name="jsonSerialization" type="System.Web.Configuration.ScriptingJsonSerializationSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="Everywhere"/>
<section name="profileService" type="System.Web.Configuration.ScriptingProfileServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
<section name="authenticationService" type="System.Web.Configuration.ScriptingAuthenticationServiceSection, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" requirePermission="false" allowDefinition="MachineToApplication"/>
</sectionGroup>
</sectionGroup>
</sectionGroup>
</configSections>
<system.web>
<pages>
<controls>
<add tagPrefix="asp" namespace="System.Web.UI" assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add namespace="AjaxControlToolkit" assembly="AjaxControlToolkit" tagPrefix="ajaxToolkit"/>
</controls>
</pages>
<compilation debug="true">
<assemblies>
<add assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add assembly="System.Design, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B03F5F7F11D50A3A"/>
<add assembly="System.Web.Extensions.Design, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31BF3856AD364E35"/>
<add assembly="System.Windows.Forms, Version=2.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089"/>
</assemblies>
</compilation>
<httpHandlers>
<remove verb="*" path="*.asmx"/>
<add verb="*" path="*.asmx" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="*" path="*_AppService.axd" validate="false" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" validate="false"/>
</httpHandlers>
<httpModules>
<add name="ScriptModule" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</httpModules>
</system.web>
<system.web.extensions>
<scripting>
<webServices>
</webServices>
</scripting>
</system.web.extensions>
<system.webServer>
<validation validateIntegratedModeConfiguration="false"/>
<modules>
<add name="ScriptModule" preCondition="integratedMode" type="System.Web.Handlers.ScriptModule, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</modules>
<handlers>
<remove name="WebServiceHandlerFactory-Integrated"/>
<add name="ScriptHandlerFactory" verb="*" path="*.asmx" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptHandlerFactoryAppServices" verb="*" path="*_AppService.axd" preCondition="integratedMode" type="System.Web.Script.Services.ScriptHandlerFactory, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
<add name="ScriptResource" preCondition="integratedMode" verb="GET,HEAD" path="ScriptResource.axd" type="System.Web.Handlers.ScriptResourceHandler, System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"/>
</handlers>
</system.webServer>
</configuration>

Hi MWB,

Thanks for your sample.I have reproduced your problem with your sample.

Based on my research and testing, I'm afraid that what your want is not achievable in your case.It will automaticlly reset to orignal position when a post occured.Thanks.

Best regards,

Jonathan

Saturday, March 24, 2012

Problem Dragging ModalPopupExtender

In the ModalPopupExtender when I drag the popup it always snaps back to the middle.

If I place the JavaScript code that is in the sample page on my page then I am able to drag the popup around the page and it stays where I drop it as expected.

<script type="text/javascript"> // The following snippet works around a problem where FloatingBehavior // doesn't allow drops outside the "content area" of the page - where "content // area" is a little unusual for our sample web pages due to their use of CSS // for layout. function setBodyHeightToContentHeight() { document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight) + "px"; } setBodyHeightToContentHeight(); $addHandler(window, "resize", setBodyHeightToContentHeight); </script>

The JavaScript says it's just a work around due to how the sample page is structured. But, in my page I'm not using any type of css layout (other than for the ModalPopupExtender background). I just have a HyperLink, Panel for the popup, Panel for the popup handle and ModalPopupExtender.

<%@dotnet.itags.org. Page Language="C#" %><%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server">protected void ButtonOK_Click(object sender, EventArgs e){Response.Redirect("myModal.aspx");}</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"><title>Untitled Page</title><style type="text/css">/*Modal Popup*/.modalBackground{background-color: #000000;filter: alpha(opacity=30);opacity: 0.3;}</style></head><body><form id="form1" runat="server"><div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:HyperLink ID="LinkShow" runat="server">Click to show dialog</asp:HyperLink><br /><br /><br /><asp:Panel ID="PanelPopup" runat="server"><asp:Panel ID="PanelPopupHandle" runat="server">This is the popup handle</asp:Panel>This is the content of the popup panel<br /><asp:Button ID="ButtonOK" runat="server" Text="OK" onclick="ButtonOK_Click" /><asp:Button ID="ButtonCancel" runat="server" Text="Cancel" /></asp:Panel><br /><cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" BackgroundCssClass="modalBackground"TargetControlID="LinkShow" CancelControlID="ButtonCancel" Drag="True" PopupControlID="PanelPopup"PopupDragHandleControlID="PanelPopupHandle"></cc1:ModalPopupExtender></div></form></body></html>

Am I missing something or do I need to always place that piece of JavaScript on pages that use the ModalPopupExtender?

this is problem due to not specifying height and width for popup panel
try adding height and width:-

<asp:PanelID="PanelPopup"runat="server"Width="300"Height="300"BorderWidth="1"BackColor="AliceBlue">

Yes, that works. Thank you!

As soon as I click on the dragable header of the ModalPopupExtender popup, the panel moves to the right. It keeps doing this every time I click on it.

I have read every work around on the web to fix this and nothing has worked for me:

1. Added the javascriptsetBodyHeightToContentHeight()

2. Set the Height and Width of the body tag

3. Modified FloatingBahavior.js:

this.onDragEnd =function(canceled) {

canceled =false; <-- added this

4. Set the width and height in the last post.

Nothing has worked for me! Even setting Drag="true" or Drag="false" seems to not work at all.

I could sure use an answer.