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