modal popup and update panel

hi there, i have a login button that when it is clicked, the modal popup will trigger and was able to logon to the system. the page has two link buttons, when i click on the 2nd link, the update panel will display the items assiciated with that link, and when i click on the 1st link, the update panel will display the items associated to the 1st link, its lakie i have a tabs..the problem is, when i added the modal popup on that page, and clicked on the 2nd link, it will not display the items of that link, i mean, it will not trigger any event at all...but when i remove the modal popup extender on that link, it will toggle..what am i missing here??please help.

thank you .

Can you show me some code so that I can reproduce it?

Modal Popup creation problem

I have a project that has several asp .net AJAX controls including a Tab Panel extender, a couple of updatepanels, and a modalpopup. Everything was doing OK (except for the tab panel that keeps disappering on hover over) until I added the modal popup. The page will load but I noticed that I was getting an "Done, but with errors on page" warning and the calendar that sets everything in motion didn't work.

It appears that the modalpopup isn't being created properly at runtime. I see this error message when I follow the error message in Firefox (Firebug):

this._popupElement has no properties
http://mycomputer/mysite/ScriptResource.axd?d=SpCqOYElt5QoLvf_3bBsv_BcFBS3DknA98So9KH3qtFJpwGddMmhi5Fqd8Ekf5Yggy7J5Sw9EaHCqlfKI150bSF4O1S83qGJROU-7k6SGQc1&t=633121015687656250
Line 66

Which further expands to:

initialize()ScriptResource.ax... (line 66)

Sys$Component$endUpdate()ScriptResource.ax... (line 2702)

Sys$Component$create(function(),Object BackgroundCssClass=modal CancelControlID=btnClose,null,null,input#Trigger)ScriptResource.ax... (line 2856)

(no name)()livereports.aspx (line 217)

_handler(Object _disposableObjects=[4] _components=Object,Object)ScriptResource.ax... (line 2503)

Sys$_Application$_doInitialize()ScriptResource.ax... (line 3792)

(no name)()

Why isn't there a comma between Object BackgroundCssClass=modal & CancelControlID=btnClose? Where are all of the properties that I set? This is how the modalpopupextender is set up in my project:

I am totally lost since I don't see much difference in the source code between mine and the AJAX samples function:

Mine:

Sys.Application.add_init(function() {

217 $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modal","CancelControlID":"btnClose","DropShadow":true,"DynamicServicePath":"/scmghd/livereports.aspx","OkControlID":"btnClose","PopupControlID":"gvResults","PopupDragHandleControlID":"pnl1","id":"ModalPopupExtender2"}, null, null, $get("HiddenModalTrigger"));

218});

AJAX Sample:

Sys.Application.add_init(function() {

314 $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modalBackground","CancelControlID":"ctl00_SampleContent_CancelButton","DropShadow":true,"OkControlID":"ctl00_SampleContent_OkButton","OnOkScript":"onOk()","PopupControlID":"ctl00_SampleContent_Panel1","PopupDragHandleControlID":"ctl00_SampleContent_Panel3","dynamicServicePath":"/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx","id":"ctl00_SampleContent_ModalPopupExtender"}, null, null, $get("ctl00_SampleContent_LinkButton1"));

315});

This is the way I have the modalpopup set in Visual Web Dev:

<cc1:ModalPopupExtenderID="ModalPopupExtender2"runat="server"BackgroundCssClass="modal"TargetControlID="Trigger"PopupDragHandleControlID="pnl1"PopupControlID="gvResults"CancelControlID="btnClose"OkControlID="btnClose"DropShadow=true>

</cc1:ModalPopupExtender>

Again any help is appreciated!

I hate to be a bother but this project is very important...any help would greatly be appreciated.

Thanks

Modal popup extender and multiple dropdownlists

Hi,

My requirement is that-On a panel,which acts as modal pup up extender,I have multipledropdownlists(cascading),so on selecting one,an autopostback happens,and then the modal pop up disappears.How can I handle,autopostbacksfrom modalpopup so that,the popup does not disappear.

In general, wrapping content in an UpdatePanel is the way to hide the postback of that content. ModalPopup allows UpdatePanels to be within the popup content, so that should work here, too.

Modal Popup Extender

hi

i have used ModalPopupExtender on my web page and it is really good but the problem is if i click any button then it close the panel.

is it possible to use some validation control on the panel like i want to insert data into database, also i want to add a close button on the panel, without click close button that panel will be enable on the page.

thanks is advance

You can add a UpdatePanel in your panel, and put your detailviews in this UpdatePanel.

All the behavior you do in the UpdatePanel will not effect other controls that out side of this Panel.

Modal Popup Extender Flash

I'm using the MPE to display a panel that contains a gridview.
It works fine, except that when the page loads (whether it be IE or Mozilla), the panel containing the gridview is visible for a split second and then the MPE hides it. It's kind of confusing to a user - does anybody know how to fix this?

Surround the panel with a div as such:

<div id="divModalPopup" style="display:none"> <asp:Panel ID="pnlModalPopup" runat="server" Height="50px" Width="667px" BackColor="White"><!-- Some content --> </asp:Panel></div>

Thanks,
Chad

Modal Popup extender doesnt work (fast enough?) if used in a user control?

I created a user web control containing a blue panel which will pop up when user clicks on a text box. I use Modalpopupextender for this purpose. It is very simple!

When I reuse this control in a page, the blue panel shows up for a fraction when the page is loaded. This is very annoying cause I basically can't create my own modal dialog box and reuse for different pages. Is this a bug in the toolkit or do I need to add something to my control?

Thanks

MY CONTROL:

<%@dotnet.itags.org.ControlLanguage="C#"AutoEventWireup="true"CodeFile="TestPopUpBox.ascx.cs"Inherits="Admin_Configuration_TestPopUpBox" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

<asp:PanelID="Panel1"runat="server"BackColor="Blue"Height="235px"Style="position: relative"

Width="556px"><asp:TextBoxID="TextBox1"runat="server"Style="position: relative"></asp:TextBox>

</asp:Panel>

PAGE:

<%@dotnet.itags.org.PageLanguage="C#"AutoEventWireup="true"CodeFile="Test.aspx.cs"Inherits="Admin_Configuration_Test" %>

<%@dotnet.itags.org.RegisterSrc="AddDeviceControl.ascx"TagName="AddDeviceControl"TagPrefix="uc1" %>

<%@dotnet.itags.org.RegisterSrc="TestPopUpBox.ascx"TagName="TestPopUpBox"TagPrefix="uc2" %>

<%@dotnet.itags.org.RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit"TagPrefix="cc1" %>

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

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

<headrunat="server">

<title>Untitled Page</title>

</head>

<body>

<formid="form1"runat="server">

<div>

<asp:ScriptManagerID="ScriptManager1"runat="server">

</asp:ScriptManager>

This is the page<br/>

<uc2:TestPopUpBoxID="TestPopUpBox1"runat="server"/>

</div>

</form>

</body>

</html>

<cc1:ModalPopupExtenderID="ModalPopupExtender1"runat="server"TargetControlID="TextBox1"PopupControlID="Panel1">

</cc1:ModalPopupExtender>

I found another post which solves my problem.

You have to add "display:none" attribute to the panel style. I guess the code in AJAX control takes some time to iterate through all the controls on the page to find and hide the target panel.

Modal popup extender inside another modal popup extender

Hi all,

I would like to know if this is possible.

Lets say a have a page with modalpopup extender and with update panel.

Onto that modal popup extender I dynamically and with async postback load a UserControlA. That UserControlA also contains modal popup extender and updatepanel, which loads UserControlBdynamically (sort of modal popup inheritance:) )

Is this at least possible in theory? To show another modalpopup in the first modalpopup? Because right now, trigerring modalpopup in UserControlA, modalpopup in page closes

UI would be something like this:

The problem is that i was designing everything with user controls, and then reusing them. And now there is such a problem:)

Hi,

I think it's quite possible theoretically. Please try to implement it as you planed first, and feel free to ask if you meet any problem.

Modal Popup Extender with multiple TargetControlID?

Hello, I'm new to the toolkit and I'm looking for ideas to accomplish a somewhat trivial goal.

What I want is to show a panel in modal form base on the item chosen on a list.

Imagine a list of employees and you want that when the user clicks on one of them a modal window comes up and allows the user to edit the chosen employee's data.

the problem is that the ModalPopupExtender has room just for a single TargetControlID.

Does anyone know a way to accomplish this?

TIA

Yes I beleive you are correct in that the ModalPopupExtender allows only one TargetControlID, however you can have multiple ModalPopupExtenders on a page if you need multiple (different) Panels for input.

If you need only one Modal and want to show it from many different events you can create a button which will be shown as visible inline but on Page Load set the visibility to none and set it as your TargetControlID. Then in any events you need the modal simply call ModalPopupExtender.show() method with 'ModalPopupExtender' being the ID of your extender. The reason I say to leave the visibility set to true inline is I recently read a post where the Events were not getting attached at run time in some cases unless they were set to visible at compile time. If you take a look at the Sample code for the toolkit they have an example of this scenario. Also keep in mind you might want to call the hide() method on the ModalPopupExtender when your finished with Input as some never get disposed and might cause problems next time you try to show one.

Hope this helps...

Modal popup extender shows before page is done rendering ?

Hi

My page consists of a single linkbutton triggering the modal popup extender and a panel containing the popups controls. This is all working except one tiny thing, on each submit postback it quickly shows->hides the popup. How can I get rid of this problem?

"mpeProjects" runat="server"
TargetControlID="lbnProjects"
PopupControlID="pnlProjects"
DropShadow="false"
OkControlID="btnProjectsOK"
CancelControlID="btnProjectsCancel"
BackgroundCssClass="DialogPopupBackGround"
OnOkScript="onOK()"
>

Hi,

Please make sure you have the style attribute of the pnlProjects panel set to "display:none".

If you already have some value in the style attribute, just add the above at the end of the attribute value.

Kind regards,

sbogus.

Modal popup isnt visible

I have a panel and a modalpopupextender on my page. Everything is very simple and exactly like the examples I've seen. The problem is that if I set the display attribute of the panel to "none" - as all the examples show - the panel isn't visible when it's popped up. The main page greys out and is inactive but I can't see the popup panel. If I remove the "display: none" from the panel stylesheet then everything works perfectly except that the panel is briefly visible when the page first renders. It instantly disappears but causes the page to flicker.

I'm not using a master page and I have ajax toolkit 1.0.10301.1

Any ideas?

Could you post a small, self-sufficient repro that demonstrates your problem? It seems like it should just work from what you are describing.

Here is the stylesheet 

.ReImportPanel{/*visibility:<span class='val'> hidden</span>;*/ font-size:small; border-width:medium; border-color:#3C6B34; border-style:solid; border-width:medium; width:500px; background-color: #ebebdf;}.modalBackground{ background-color:Silver; filter:alpha(opacity=70); opacity:0.7;}

Here is the page

 
<%@. 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> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Y=100 DropShadow="true" PopupControlID="pnlReimport" OkControlID="btnClosePopup" CancelControlID="btnClosePopup" BackgroundCssClass="modalBackground" TargetControlID="Button1"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlReimport" runat="server" CssClass="ReImportPanel" Width="500px" HorizontalAlign="Center"> <h3> Popup Dialog</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br /> <br /> <asp:Button ID="btnClosePopup" runat="server" Text="Close" /> </asp:Panel> <asp:Button ID="Button1" runat="server" CausesValidation="False" Text="Show Popup" /> </div> </form> </body></html>
 

Here is the stylesheet 

.ReImportPanel{/*visibility:hidden*/ font-size:small; border-width:medium; border-color:#3C6B34; border-style:solid; border-width:medium; width:500px; background-color: #ebebdf;}.modalBackground{ background-color:Silver; filter:alpha(opacity=70); opacity:0.7;}

Here is the page

 
<%@. 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> <link href="StyleSheet.css" rel="stylesheet" type="text/css" /></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server" /> <div> <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" Y=100 DropShadow="true" PopupControlID="pnlReimport" OkControlID="btnClosePopup" CancelControlID="btnClosePopup" BackgroundCssClass="modalBackground" TargetControlID="Button1"> </cc1:ModalPopupExtender> <asp:Panel ID="pnlReimport" runat="server" CssClass="ReImportPanel" Width="500px" HorizontalAlign="Center"> <h3> Popup Dialog</h3> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor <br /> <br /> <asp:Button ID="btnClosePopup" runat="server" Text="Close" /> </asp:Panel> <asp:Button ID="Button1" runat="server" CausesValidation="False" Text="Show Popup" /> </div> </form> </body></html>
 

Modal Popup questions...

Hi there, i am using the modal popup and a couple of things i am trying to do arent quite working.

I have the a panel for my modal popup and an update panel within the panel...i am planning to have a multiview inside this updatepanel but...

1. How can i make the TargetControl still post back (to do some binding on the panel and get the correct view.).
2. I have the OK button on the panel posting back which is fine, i have removed the OKButton property, when not in an update panel the whole page posts back and page reset...however i dont want the whole page to post back...only the panel. So how can i clear the background style of modal popup so things are clickable again?
I can see my other updatepanels refreshing as i want when OK is clicked and the modal popup panel goes away but the background style stays...

Thanks

Steve

I think if i can remove the background style from js that will be number 2 done....any ideas?

for number 1:
i added some js to force postback

var postBack =new Sys.WebForms.PostBackAction();

postBack.set_target("ctl00_MainContentHolder_btnAccAdd");

postBack.set_eventArgument('');

postBack.performAction();

but the modal panel disappears and the background style is still there...although i was just hoping for the update panel within the modal panel to postback, wasnt expecting it to affect the modal panel.

Hi Steve,

It's not quite as simple as changing the background style. What we do is place a transparent div on top of all your controls (making them unclickable) as well as hide certain controls (like drop down lists) that show through this transparent div.

I really don't understand what you're asking here though. Why is your OK button (the thing that should close the modal popup) trying to update the popup instead? Perhaps you could provide a little more background information.

Thanks,
Ted

Hi Ted, thanks for posting.

Apologies for taking a long time to reply...i have been away for a couple of days (however i thought i activated email notification...clearly not!)

I have been having a play with the js code and taken some/added my own to do what i want to do.... before Atlas control kit i really knew diddley squat about js so its great to be able to learn from your stuff... :-)
What i meant by my OK button...i wanted the ok button to postback as if it were a normal button so it could update other updatepanels on the page (behind the background div), the only time it would postback was to postback the whole page and so rendering the popup as display=none again.
I also wanted serveral buttons on the page to popup the same modal panel showing different index on the multiview...thats why i wanted the TargetControl to post back.

Now i have my own js file...i have a couple of probelms
i am trying to get the drop shadow to work, i have copied the exact code from the toolkit but i get an object required error, i have this at the top of my file, Type.registerNamespace('AtlasControlToolkit'); is there something else I need to do for this code
_dropShadowBehavior = new AtlasControlToolkit.DropShadowBehavior(); to work??

Thanks
Steve

Hi Steve,

I think for your OK button the answer is to wrap it in anUpdatePanel. Any server side handler for it will still fire, and any updates you do to other content in otherUpdatePanels will be applied as well (i.e. if you update one of them, you're actually updating all of them). To get several buttons to open the sameModalPopup and have the contents of that popup determined by the button that launched it is a little tricker. The easiest solution is to create seperate popups. A slightly harder solution (but with less duplicated markup) would be to have each button's onclick handler prepare any expected content in the ModalPopup. I'm not terribly sure if you can get away with this using aMultiView though because it might not dump out all the markup for its views to the client. The slightly-harder-but-most-appropriate-for-your-situation solution is as follows:
1. Put an<asp:Button ... /> on your form withStyle='display: none;' to create a hidden button that gets sent to the client
2. Use that hidden button as the target control for yourModalPopup
3. Set anID="SomeID" on yourModalPopupProperties
4. Create regular server side handlers for all the buttons you want to launch the popup (making sure they're wrapped in anUpdatePanel of course)
5. In each of those server side handlers, get theMultiView all setup for that button
6. UseRegisterStartupScript to force yourModalPopup to display (using something like$object('SomeID')._show();)
There are examples of step 6 in otherforum posts, and we're also looking at ways to make it a lot easier to show/hide aModalPopup from the server for an upcoming release.

As for theType.registerNamespace('...') blowing up, that sounds like the "Atlas" libraries haven't been included first. Are you including your custom script at the top of the page? If so, the proper way to include a custom "Atlas" script like that is to add a reference as a child of yourScriptManager.

Thanks,
Ted

Hi Steve,

There are a lot of people trying to do the same thing withModalPopup, so I thought I'd create a sample (since those steps 1-6 aren't the clearest things in the world to follow). Unfortunately after talking with David (theModalPopup expert... and author, for that matter), the approach I described doesn't really work when you're inside anUpdatePanel. TheRegisterStartupScript code you send down will be run before everything's been set up properly... so to get it working we'll use the same approach but not actually show the popup until theUpdatePanel says it's done with the partial postback (I actually left in the old approach too, should anyone looking at this want to use it without anUpdatePanel - it's the script that is sent down ifScriptManager.IsInPartialRenderMode == false) by hooking into itspropertyChanged event. Here's a full example showing what to do:

<%@. Page Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> private void Button1_OnClick(object sender, EventArgs args) { Content.Text = "I was setup by Button1!"; ShowModalPopup(); } private void Button2_OnClick(object sender, EventArgs args) { Content.Text = "I was setup by Button2!"; ShowModalPopup(); } private void ShowModalPopup() { ModalPopupProperties popup = MyModalExtender.GetTargetProperties(Target); if (popup != null) { string script = ScriptManager.IsInPartialRenderingMode ? string.Format("showModalPopup('{0}', '{1}');", ScriptManager.PageRequestManagerID, popup.ID) : string.Format("function pageLoad() {{ var modal = $object('{0}'); if (modal) {{ modal._show(); }} }}", popup.ID); Page.ClientScript.RegisterStartupScript(typeof(ModalPopupExtender), "open", script, true); } }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>ModalPopup Demo</title> <style type="text/css"> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body><form runat="server"><div> <script language="javascript" type="text/javascript"> var showPopupHandler = null; function showModalPopup(pageRequestManagerID, popupID) { var pageRequestManager = $object(pageRequestManagerID); if (pageRequestManager) { var onUpdatePanelPropertyChanged = function(sender, eventArgs) { if ((eventArgs.get_propertyName() == "inPostBack") && !pageRequestManager.get_inPostBack()) { var modal = $object(popupID); if (modal) modal._show(); pageRequestManager.propertyChanged.remove(showPopupHandler); showPopupHandler = null; } }; showPopupHandler = Function.createDelegate(this, onUpdatePanelPropertyChanged); pageRequestManager.propertyChanged.add(showPopupHandler); } } </script> <atlas:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" /> <atlas:UpdatePanel ID="Update" runat="server" Mode="Always"> <ContentTemplate> <asp:Panel ID="Popup" runat="server" CssClass="modalPopup" style="display: none"> <asp:Label ID="Content" runat="server" Text="Original Content" /><br /> <asp:Button ID="OK" runat="Server" Text="OK" /> <asp:Button ID="Cancel" runat="Server" Text="Cancel" /> </asp:Panel> <asp:Button ID="Target" runat="server" style="display: none" /> <asp:Button ID="Button1" runat="server" Text="Button 1" OnClick="Button1_OnClick" /><br /> <asp:Button ID="Button2" runat="server" Text="Button 2" OnClick="Button2_OnClick" /><br /> <atlasToolkit:ModalPopupExtender ID="MyModalExtender" runat="server"> <atlasToolkit:ModalPopupProperties ID="MyPopup" TargetControlID="Target" PopupControlID="Popup" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="Ok" CancelControlID="Cancel" /> </atlasToolkit:ModalPopupExtender> </ContentTemplate> </atlas:UpdatePanel></div></form></body></html>

Again, we're looking at making this a LOT easier with updates in our next release.

Thanks,
Ted

I get this error on the line containing this information.

Page.ClientScript.RegisterStartupScript(typeof(ModalPopupExtender),"open", script,true)

This is the error message.

Error 'ModalPopupExtender' is a type and cannot be used as an expression. c:\inetpub\wwwroot\XX\SecurityTest.aspx.vb 25 60

Any ideas?
Thanks

Here you go Greg

Page.ClientScript.RegisterStartupScript(ModalPopupExtender.GetType,"open", script,True)

Thanks Michael worked perfectly.

And thanks Ted for the example you are a life saver.

-Greg

Thanks Ted.

Thats just what i was after....thanks for the time put in to resolve this.

Again apologies for the delay...my email notification clearly isn't working.

Steve

Is it possible to keep the modal popup open when clicking 'ok'

I have a validation control in the popup panel and would like to display the error message in the modal popup if a textbox value is not ok.

The user will then be able to correct the input.

thanks

Hi everyone,

Thenewest release of the Toolkit (now available on CodePlex) allows you to show/hide from the server using the following:

 ModalPopupProperties popup = MyModalExtender.GetTargetProperties(MyControl);if (popup !=null) popup.Show();// Or call popup.Hide();

Thanks,
Ted

Hi RolfN,

I'd recommend you just have a seperate button (possibly hidden usingstyle='visibility: hidden;') as your OK button and then just a regular button with "OK" as its text. You can then call.click() on the real button client side or.Hide() on yourModalPopupProperties server side.

Thanks,
Ted

Hi!

Scenario:
A user choose a row in gridview and gets details from det row in a formview in modalpopup.

I tried to put the codelines above in my code like this:

protectedvoid gridview_SelectedIndexChanged(object sender,EventArgs e)
{
ModalPopupProperties popup = ModalPopupExtender1.GetTargetProperties(up1);
if (popup !=null)
popup.Show();// Or call popup.Hide();
}
Up1 is a updatepanel that surrounds the gridview.

Problem is that the modal popup triggers on every event on the gridview.
eg. when I sort.

thanks

Hi santon,

I don't think this is a bug because sorting does change the selected index. For an example of how to useModalPopup in aGridView, take a look at David'sblog post.

Thanks,
Ted

Modal popup visibility and background...

My ModalPopup panel is being visible before its disappears..

It flicks on the screen int the HTML load...
How can I fix this?

And...What is the style of modalPopoupExtender demo in atlas control toolkit site?

How can I make one similiar?

thanx!Please see FAQ #1 (http://forums.asp.net/thread/1293293.aspx#1) and StyleSheet.css in the root of the SampleWebSite.
Hi...Thanx...
BUT...I got three problems...

First...modalBackground stylesheet doesn't work in Firefox..because opacity and filter properties...
and..
Second...modalBackground stylesheet doesn't work with Dropdownlist control..it remains with default style...

finally...my last problem is that style="visibility:false;" doesn't work...

I just want to make something similiar to Insert Code modal of this page...with all components behind disabled and with low opacity...and it is hide on pageload =D..
this can't be so difficult...I also would like to load my usercontrol inside the modalpopup panel...BUT...is very difficult work with updatepanel and modalpopup together...

here is my code:

"DivRegisterUnit" style="visibility:false;"> "LabelUnitID" runat="server" Text="ID:"> "TextBoxUnitID" runat="server"> "LabelUnitDescription" runat="server" Text="Descri??o:"> "TextBoxUnitDescription" runat="server"> "ButtonRegisterUnit" runat="server" Text="Salvar" />
 "MpeRegisterUnit" runat="server"> "modalBackground" OkControlID="ButtonRegisterUnit" PopupControlID="DivRegisterUnit" TargetControlID="LinkButtonRegisterUnit" />

<div id="DivRegisterUnit"> <asp:Label ID="LabelUnitID" runat="server" Text="ID:"></asp:Label> <asp:TextBox ID="TextBoxUnitID" runat="server"></asp:TextBox> <asp:Label ID="LabelUnitDescription" runat="server" Text="Descri??o:"></asp:Label> <asp:TextBox ID="TextBoxUnitDescription" runat="server"></asp:TextBox> <asp:Button ID="ButtonRegisterUnit" runat="server" Text="Salvar" /> </div> <cc1:modalpopupextender id="MpeRegisterUnit" runat="server"> <cc1:ModalPopupProperties BackgroundCssClass="modalBackground" OkControlID="ButtonRegisterUnit" PopupControlID="DivRegisterUnit" TargetControlID="LinkButtonRegisterUnit" /> </cc1:modalpopupextender>

Hi...
I resolved two of my three problems :P

First...I was wrong...
Third...I used "visible:none;"

the only one that I can't fix was the dropdownlist problem...

thanx..
If the issue is that the dropdown remains visible when the ModalPopup is displayed, the reason can be found in the FAQ. Our next release will have a workaround for this; you can get the code from CodePlex now if you want to try it out early.

Modal Popup Validation

I have 2 required field validators in an update panel in my modal popup panel. I use Matt Gibson's Validator dll and tag mapping for validators inside update panels. However, in this modal popup, postback is not prevented. As you can see, I give the modal popup no control over the save button. Yes, the validation group is the same on the validators and the button. Yes, the validation appears onblur. With the errormessage displayed, if I click on the save button, the postback goes through. How do I fix this?

<ajaxToolkit:ModalPopupExtender runat="server" ID="mpe_fix"BackgroundCssClass="modalBackground"CancelControlID="btn_Cancel"PopupControlID="pnl_fix"TargetControlID="hdn_dummy" /><asp:Button runat="server" ID="btn_save"Text="Save"ValidationGroup="fix"CausesValidation="true" />

Bump.

Modal Popup, Gridview and Updatepanel.

Here is I have.

A Page that has a button (button1), textbox (textbox1), and a modalpopup. The modalpopup extends a panel that has a usercontrol inside it.

Inside the Usercontrol I have some textbox's and a button (button2). And I also have an updatepanel with a gridview inside.
The update panel has a trigger referencing the button (button2). The gridview has a column with a button (selectbutton) inside. I also handle the rowcommand of the gridview to update textbox1 on the page.

When I click button1 the popup shows fine. Then I enter some stuff inside the textbox's for the usercontrol, and then click button2. The gridview updates as expected.

When I click on the button (selectbutton) inside the gridview I set textbox1 on the page to a value from the selectbutton's row and call the hide method of the modalpopup extender...but textbox1 does not update, and the modalpopup does not close.

Any ideas???

Please try your scenario with the recently available61106 release of the Toolkit (and ASP.NET AJAX Beta 2). If the problem persists, then please reply with acomplete, self-contained sample page that demonstrates the problem so that we can investigate the specific behavior you're seeing. Thank you!

Modal Popups and the big ".Show"....(method)

..or what I like to refer to as "You .Show me yours and I'll .Show you mine"..

I have a modalpopup tied to a button, which is tied to a Panel and when I click the button
the Panel pops up using :

1) the CSS ModalBackground and,
2) display:none; in the HTML (to keep it from blinking)

Worksperfectly..However..when I invoke the same popup from another button (or DDL) using:

modalpopupextender1.Show

A) the CSS ModalBackground doesn't fire and,
B) the Panel is non-modal, because of A)
C) I can't close / hide the Panel

I can still use controls on the main form. This is only if Idon't use :

display:none;

in the HTML. If Ido use: display:none;

in the HTML..the panel never displays..??
Action Items:
1) Can anyone confirm this? Markup is available.
2) If already known, can you provide the answer?

Regards,

B.Griffin

Hmm... I have used the mpe in similar situation but have never had the problem you seem to be having. Could you please post some code. Also try shwing the modal from javascript instead of a server side function and see if it work then.

When you put the display:none on the panel, are you doing this synamically or on the .aspx source page?

the Display:none is in the source..but I think I found the problem

on my own. It needs to be made clear to people not to mix controls

with that"other AJAX toolkit" . The Panel and its OK / cancel

can be A#####, if all you ever do is invoke it from anevent (button click).

The extender doesn't care, since both controls inherit from the same control class.

If you're going to invoke it incode (.Show / .Hide) its gotta be Asp:Panel

(etc.)..I tried it..it works..

Modal window with update panel stops working after its shown and hidden once

I'm having some trouble with the modal window tool. It behaves perfectly the first time i show it, and the first time I hide it, then although the updatepanel postback behaviour still works (and the text field in the example below is still updated) the modal window doesn't fire the onOkScript or hide as it does the firsttime.

Does anyone have any ideas?

<div><asp:LinkButtonID="lbCommunityProfile"runat="server">Community Profile</asp:LinkButton></div><atlas:UpdatePanelID="updatePanel2"runat="server"Mode="Always"><ContentTemplate><asp:LabelID="lTest"runat="server"Text="NoneSet"></asp:Label></ContentTemplate></atlas:UpdatePanel><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="lbCommunityProfile"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"onOkScript="__doPostBack('ctl00$ContentPlaceHolder$lbCommunityProfile','');alert('go');"CancelControlID="CancelButton"/></atlasToolkit:ModalPopupExtender><asp:PanelID="Panel1"CssClass="modalPopup"runat="server"><atlas:UpdatePanelID="updatePanel1"runat="server"Mode="Conditional"><ContentTemplate>

This is panel 1

<asp:TextBoxID="tbTest"runat="server"></asp:TextBox><asp:ButtonID="OkButton"runat="server"Text="OK"OnClick="OkButton_Click"UseSubmitBehavior="false"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></ContentTemplate></atlas:UpdatePanel></asp:Panel>

and in the aspx.cs file

protectedvoid OkButton_Click(object sender,EventArgs e)

{

string str = tbTest.Text;

lTest.Text =

"set" + tbTest.Text +"end";

}

Also just wondering what the javascript is to close a modal window. I understand you can use the ok and cancel buttons. I'd like to have a x in the top right of my window and have that close.

Is this with the June CTP of Atlas?
yes the most recent ctp

yes the july ctp

The June CTP is currently (this may change very soon) the most recent Atlas release. It has a problem whereby UpdatePanel updates under Firefox break all extenders. It sounds like you're hitting this problem. Atlas is aware of it and should have a new release out soon to correct the problem. Thanks for your patience!

Just wondering if any progress has been made on this topic?

The July CTP of Atlas fixes the problem mentioned above.
I am experiencing this problem with the July CTP. Appears to notnecessarilybe fixed. I've got a lot of other things goin on in the same page... I'm going to try and issolate the issue.

ModalDialog Switch Panel content on click

I was wondering if there was a way to change the inner content of the modal panel when the user clicks a certain button. Is this a job for the UpdatePanel?

As it stands, I'm just binding to a TargetControlID, and I can Ok/Cancel, but would like the content to change onOk.

I'm quite new to this whole atlas way of thinking, so I'm not sure how to co-mingle all this client/server stuff.

Any help would be appreciated.

-Ty

Hi,

you can also use the DynamicPopulateExtender to load new content inside a panel.

Regards
Marc André

ModalPopup - closing after every click event (need help)

My ModalPopupExtender show a Panel with GridView, TextBox - txtSearchParam, Button - btnSearch and of course also OkButton - btnOK and CancelButton- btnCancel. What I wannt to do is this:

1) in that gridview is displayed simple list of customers

2) user cann type in txtSearchParam some name and with click on btnSearch performs a SEARCH for typed name

Every time when user clicks on SEARCH BUTTON (btnSearch) my ModalPopup will be closed. It seems like ModalPopup ignores both settings for OKControlID = "btnOK" and CancelControlID="btnCancel".

Why is that ModalPopup closed after every Click in panel with gridView ?

What am I doing wrong ? Please help and sorry for my english :-)

Because btnSearch is posting back, I think that is the reason.

I also faced the same problem, upon google, i found that I have to use updatepanel and keep the btnSearch inside updatepanel's content.

It solved the problem, I can get the results wih different search criteria... but after that If I click cancel it is messing my page's dropdown cotrols.

Any idea?

I am having the same problem. I've tried everything I can think of... putting the TargetControl inside an UpdatePanel, putting it outside an UpdatePanel... with no luck.

Here, specifically, is what I'm trying to do:

I have a Panel ( we'll call it "Panel1"). The panel contains an UpdatePanel. The Updatepanel contains a User Control that has text boxes, buttons... all sorts of things that perform postbacks. If this is on a page by itself, everything works just fine; the updatepanel performs the partial postbacks and everything works.

However, I need it to appear as if it were a highly interactive modal dialog box. So, I attached a ModalPopupExtender to "Panel1". It pops up just fine, but whenever any of the controls within my user control fire, the entire modal popup vanishes. It doesn't seem to matter that I set the OkButton and CancelButton properties to buttons that are not within my user control... in fact, I set them to "hidden" buttons that are on the outer page, outside of the whole Panel1 that I'm displaying modally.

Someone please help... I'm at my wits end trying to figure this out.

Thx champ ! That was it...it works OK with UPDATEPANEL :-)
Can you elaborate on how you got it working? I still cannot.

Hi RobertBeach,

Do you still need a sample code , let me know...

yes, sure...let's share it with us please :-)

Hi,

Make sure that popup panel's OkControlID and CancelControlID are outside the update panel. Postback buttons should be inside the update panel.

For Example:

<cc1:modalpopupextender id="mdlPopup" runat="server" targetcontrolid="btnDummy1" popupcontrolid="pnlPopup" backgroundcssclass="modalBackground" okcontrolid="OkButton1" dropshadow="true" popupdraghandlecontrolid="pnlHeaderPopup" /><%-- PopupP anel--%><asp:Panel ID="pnlPopup" runat="server" Style="display: none" CssClass="modalPopup" Width="500px"><%-- Popup Panel Header--%> <asp:Panel ID="pnlHeaderPopup" runat="server"><%-- OK Control ID--%> <asp:ImageButton ID="OkButton1" runat="server" BorderStyle="None" ImageAlign="AbsMiddle" ImageUrl="~/App_Images/close_icon.gif" /> </asp:Panel> <Ajax:UpdatePanel ID="upLeaveDetails" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:FormView ID="frmView" runat="server" DataSourceID="ds1" Width="100%"> <EditItemTemplate><%-- Buttons that postback--%> <asp:Button ID="btnUpdate" runat="server" CausesValidation="True" CommandName="Update" CssClass="btn" OnClick="btnUpdate_Click" Text="Update" /> <asp:Button ID="btnCancel" runat="server" CausesValidation="True" CommandName="Cancel" CssClass="btn" OnClick="btnCancel_Click" Text="Cancel" /> </EditItemTemplate> </asp:FormView> </ContentTemplate> </Ajax:UpdatePanel></asp:Panel>

For more information refer to:

http://blogs.technet.com/kirtid/archive/2007/05/03/using-updatepanels-with-modalpopups.aspx

Hope it helps.

ModalPopup & UpdatePanel

OK, so my first question is, should it be possible to call an update panel from the modal popup?

I think I have a pretty common task I'm going after here. On the page I have a repeater that displays all the information in the table. Then under that table, I have a spot where you can add new entries to the table. The update panel works perfectly from there but when I attempt to call the same update panel from the OK button in my modal it doesn't do anything.

So here is the code that is important:

1[WebMethod()]2public void saveModal(string strItemID,string strItemDesc,string strItemAmount,string strItemLocked,string strItemOrder)3 {4 SqlDataAdapter daItemsEdit =new SqlDataAdapter("SELECT * FROM tblIssueItems WHERE itemID = '" + strItemID +"' AND generation = '" + strCurrentGen +"'", myConn);5 daItemsEdit.Fill(dsEdit,"tblIssueItems");6 DataTable tblIssueItemsEdit = dsEdit.Tables["tblIssueItems"];78 DataRow rowEdit = tblIssueItemsEdit.Rows[0];910 rowEdit["sortOrder"] = strItemOrder;11 rowEdit["itemDescription"] = strItemDesc;12 rowEdit["amount"] = strItemAmount;13 rowEdit["lock"] = strItemLocked;1415 SqlCommandBuilder sqlBuilder =new SqlCommandBuilder(daItemsEdit);//Used for SQL Connections16 daItemsEdit.UpdateCommand = sqlBuilder.GetUpdateCommand();17 daItemsEdit.Update(dsEdit,"tblIssueItems");1819//Update Table20 dbUnlocked();21 }2223public void dbUnlocked()24 {25//Grab All Unlocked Items26 SqlDataAdapter daItems =new SqlDataAdapter("SELECT * FROM tblIssueItems WHERE issueID = '" + strCurrentIssue +"' AND generation = '" + strCurrentGen +"' AND lock <> '1' ORDER BY sortOrder, itemID", myConn);27 daItems.Fill(dsRep,"tblIssueItems");2829if (dsRep.Tables["tblIssueItems"].Rows.Count != 0)30 {31 pnlUnlocked.Visible =true;32 repUnlocked.DataSource = dsRep.Tables["tblIssueItems"].DefaultView;33 repUnlocked.DataBind();34 }35else36 {37 lblNoUnlocked.Visible =true;38 }3940 dsRep.Clear();41 }4243public void btnSubmit_Click(object sender, EventArgs e)44 {45if (Page.IsValid)46 {47//Determine Next ItemID Number48int intItemID = Convert.ToInt32(strLastIDUsed);49 intItemID++;5051//Add New Record52 SqlDataAdapter daAdd =new SqlDataAdapter("SELECT TOP 1 * FROM tblIssueItems", myConn);53 daAdd.Fill(dsAdd,"tblIssueItems");5455//Create a data row56 DataRow newRow = dsAdd.Tables["tblIssueItems"].NewRow();5758 newRow["issueID"] = strCurrentIssue;59 newRow["generation"] = strCurrentGen;60 newRow["itemID"] = intItemID;61 newRow["sortOrder"] = ddlSortOrder.SelectedItem.Value;62 newRow["ItemDescription"] = txtDesc.Text;63 newRow["Amount"] = txtAmount.Text;6465//Add the datarow to the dataset66 dsAdd.Tables["tblIssueItems"].Rows.Add(newRow);6768//Use Command Building to create an insert command69 SqlCommandBuilder sCB =new SqlCommandBuilder(daAdd);7071//Update the DB with values72 daAdd.Update(dsAdd,"tblIssueItems");7374//------------------------75 //Update Last Item ID Used Column76 SqlCommandBuilder sCBU =new SqlCommandBuilder(daIssue);77 daIssue.UpdateCommand = sCBU.GetUpdateCommand();7879 tblIssue.Rows[0]["lastItemID"] = intItemID;8081 daIssue.Update(dsAll,"tblIssue");8283//Update Table84 dbUnlocked();85 clearAddArea();86 }87 }

So in the code above, everything in the WebMethod.SaveModal works exactly as designed. I included my other button on the page that works as designed so you could see that as well. On the other side of the code, here is what I did for the updatePanel.

  
1 <atlas:UpdatePanel runat="server" id="up1">2 <triggers>3 <atlas:controleventtrigger controlid="btnSubmit" eventname="Click" />4 <atlas:controleventtrigger controlid="OkButton" eventname="Click" />5 </triggers>6 <ContentTemplate>7<asp:Panel runat="server" ID="pnlUnlocked" Height="200" ScrollBars="auto" Visible="false">8 <asp:repeater ID="repUnlocked" runat="server">9 <itemtemplate>10 ...11 <a href="javascript: myModalPop('<%# DataBinder.Eval(Container.DataItem, "itemID") %>'); $object('MP1')._show();">Edit</a>12 ...13 </itemtemplate>1415 <FooterTemplate>16 </table>17 </FooterTemplate>18 </asp:repeater>19 </asp:Panel>20 </ContentTemplate>21 </atlas:UpdatePanel>
Thanks to anyone who can help me out.
Richard 
  

Hi Richard,

Could you also include the markup for your modal popup? It would help in trying to diagnose this.

Thanks,
Ted

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" style="display:none"> <atlas:updatepanel id="up" runat="server" mode="Always" rendermode="Inline"> <contenttemplate> <br /> <h4>Edit Record</h4> <table width="350" width="100%" border="0"> <tr> <td>Sort Order</td> <td><asp:DropDownList runat="server" Width="100%" ID="ddlSortOrderE" CssClass="FormInput"><asp:ListItem Text="1" Value="1" /><asp:ListItem Text="2" Value="2" /><asp:ListItem Text="3" Value="3" /><asp:ListItem Text="4" Value="4" /><asp:ListItem Text="5" Value="5" /><asp:ListItem Text="6" Value="6" /><asp:ListItem Text="7" Value="7" /><asp:ListItem Text="8" Value="8" /><asp:ListItem Text="9" Value="9" /><asp:ListItem Text="10" Value="10" /></asp:DropDownList></td> </tr> <tr> <td>Item Description</td> <td><input type="text" id="txtDescE" class="FormInput" value="" /></td> </tr> <tr> <td>Amount</td> <td><input type="text" id="txtAmountE" class="FormInput" value="" /></td> </tr> <tr> <td>Lock?</td> <td><input type="checkbox" id="chkLockedE" class="formInput" /></td> </tr> </table> <center> <asp:Button runat="server" ID="OkButton" Text="OK"></asp:Button> <asp:Button runat="server" ID="CancelButton" Text="Cancel"></asp:Button> </center> <input type="hidden" id="hidRegID" value="" /> </contenttemplate> </atlas:updatepanel> </asp:Panel>

Here is the code. Thanks for any help you can provide. Thanks.

Richard

Oh, here is another strange one for everyone that I ran into today.

So I have the updatepanel that works with no issues. If I then try to click the edit button to a newly added record the modal popup appears but the OK button never closes it. That will be issue number #2 for me to figure out.

Also, if you need/want to see the page/error in action, please just let me know and I can post a link to where the page can be found.

Thanks for all of your hard work (and that is for everyone). The Atlas project and controls are some of the most exciting stuff I have seen in web development for a while.

Richard

has anyone figured out a solution for this one yet?

I was never able to get a fix/resolve to this one. The good news for me was, the project that I was using this in was canceled so I got to put it on the back burner.

Richard

I don know that the ok and cancel buttons cannot be within the updatepanel to work.

ModalPopup + Flash + Firefox = problem?

Hey

I'm trying to include a flash object in my ModalPopup panel but when it the ModalPopup pops up, the flash object can't be accessed using FireFox (2.0.0.2).. Now.. to be clear, the flash object does show however I can't really click on the object... What's strange about this is that I can click on certain parts of the object but not others..

Originally I thought it was an issue relating to z-index so I set the <object> tag to have a z-index of 1000000 (you know.. some thing ridiculous), hoping that it would put the object to the top thus letting me click it.. Sad to say, no luck there.

I've tried this scenario on IE7 and it works perfectly..

Any ideas of fixes??

Thanks in advance!

Hey, I've just upgraded to the new release of the toolkit ie Version 1.0.10301.0 and I still am having the same problem..

Help? Anyone on the Ajax team maybe?