Showing posts with label modalpopup. Show all posts
Showing posts with label modalpopup. Show all posts

Wednesday, March 28, 2012

Multiple simultaneous (Cascading) Modalpopups

Can I open two (or more) modalpopups simultaneous?

Can I open the second modalpopup over the first? (so that the second disable the first)

I need to simulate multiple cascading modalpopups (enabling only the lastone)

thanks

Andres



Hi

Yes, It is possible.

Do it like this:

<%@. Page Language="C#" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>

<script runat="server">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<style type="text/css">
.modalBackground {
background-color:Gray;
filter:alpha(opacity=70);
opacity:0.7;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:LinkButton ID="LinkButton1" runat="server" Text="Click" />
<asp:Panel ID="Panel1" runat="server" Style="display: none">
<div>
<asp:Button ID="OkButton" runat="server" Text="OK" />
<asp:Button ID="CancelButton" runat="server" Text="Cancel" />
<asp:LinkButton ID="LinkButton2" runat="server" Text="Click" />
</div>
</asp:Panel>
<asp:Panel ID="Panel2" runat="server" Style="display: none">
<div>
<asp:Button ID="Button1" runat="server" Text="Button1OK" />
<asp:Button ID="Button2" runat="server" Text="Button2Cancel" />
</div>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="LinkButton1"
PopupControlID="Panel1" OkControlID="OkButton" BackgroundCssClass="modalBackground"
CancelControlID="CancelButton" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server" TargetControlID="LinkButton2"
PopupControlID="Panel2" OkControlID="Button1"BackgroundCssClass="modalBackground"
CancelControlID="Button2" />
</div>
</form>
</body>
</html>

Best Regards

Multiple update panels: content disappears when modalpopup is used

Hello there,

I'm experiencing a rather annoying issue at the moment. I'm working on a webapplication, which contains quite a big page. This page contains multiple updatepanels, which in their turn contain dropdownlists/checkboxes. The page also uses a TextboxWatermarkExtender on one textbox control, and a ModalPopup which is shown conditionally by calling .Show() from the codebehind.

The ModalPopupExtender and TextboxWatermarkExtender are not on an updatepanel or anything.

Everything seems to work as it should, but I'm having a rather annoying cosmetic issue: at the moment the modalpopup is shown on my page, all the content of the updatepanels dissapears: none of the dropdownlistboxes are visible anymore!

Something weird also happens when I do any action in any of the updatepanels: when I do this, the TextboxWatermarkExtender seems to "refresh" its text (you see the text "flash").

I'm thinking these issues might be connected somehow... Has anyone got any idea on how to solve this issue, or has anyone else ran into this?

I took a few screnshots to illustrate the problem.

This is how the page looks without the modal popup:

This is with the modal popul:

As you can see, all the dropdownboxes have disappeared. Also, I noticed not only the dropdownboxes in updatepanels diasppear, but those that aren't also disappear.

Any ideas/suggestions? Tnx!


No-one? :( I've been looking all over the internet for this, but I can't seem to find anyone having the same issue. I do find issues with dropdownboxes floating "on top of" a layer when using Internet Explorer, but that's not the problem I have here... Also, I noticed this behaviour doesn't appear in Firefox: everything looks ok when using that browser...

My DDL(s) also disapeer with modal popup!!

And I had another problem with them when the modal popup causes a postback.

So I solved that by wrapping my DDL in another update panel... (with updatemode="always", dunno if that was necessary...)

But it seems to be working now...


And another update: I installed IE7 recently, and in that browser, the problem seems to be solved: the dropdownboxes don't disappear anymore.

So, this really seems to be an IE6-browser issue. I tried putting the ddl's in updatepanels (some of them already were), but that didn't help...

Browser-specific issues... gotta hate 'em ;-)

Multiple UpdateProgress on a page?

My UpdateProgress Panel gets fired when I use my modalpopup box. Is there anyway for the modal popup to have its own progress and not trigger the one already defined on the page?

If you define aasp:UpdateProgressin a web form and specify an AssociatedUpdatePanelID?property for it, it will be triggered?and?display?the?
AssociatedUpdatePanel when you press any control in the web form.
Try the following codes and check if it works in your project.
<script type="text/javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args) {
if (prm.get_isInAsyncPostBack())
{
args.set_cancel(true);
}
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "block";
$get('ButtonTrigger').style.display = "none";
}
}
function EndRequest (sender, args) {
if (postBackElement.id == 'ButtonTrigger')
{
$get('UpdateProgress1').style.display = "none";
$get('ButtonTrigger').style.display = "block";
}
}
function AbortPostBack() {
if (prm.get_isInAsyncPostBack()) {
prm.abortPostBack();
}
}
</script
<div>
<asp:Button ID="ButtonTrigger" runat="server" Text="Refresh Panel 5" OnClick="Button_Click" />
<asp:UpdatePanel ID="UpdatePanel5" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
The trigger for this panel
causes the UpdateProgress to be displayed
even though the UpdateProgress is associated
with panel 2.
<br />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="ButtonTrigger" />
</Triggers>
</asp:UpdatePanel>
<asp:UpdatePanel ID="UpdatePanel6" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<%=DateTime.Now.ToString() %> <br />
<asp:Button ID="Button2" runat="server" Text="Refresh Panel 6" OnClick="Button_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<span style="display: inline-block;">
<asp:UpdateProgress ID="UpdateProgress1" runat="server">
<ProgressTemplate>
<asp:Image ID="Image1" runat="server" ImageUrl="~/images/airplane.bmp" />
</ProgressTemplate>
</asp:UpdateProgress>
</span>
</div>
Wish the above can help you.

Monday, March 26, 2012

Multiview, modalPopup, updatepanel, popupcontrolextender

Hello,

I have a multiview that contains six views. Two of the views have update panels on them. I had it working with a popupcontrolextender (for a calender) and using updatepanel to move between the views without postback.

However, I added modalPopup to one of my views and now it doesn't switch between the views anymore. If I take the modalPopup out, it works again.

Has anyone run into this before? If so, how did you get around it?

Check the JavaScript debugger window for script errors, maybe?

Wednesday, March 21, 2012

Need help in UpdateProgress Control inside ModalPopup Control

Hi All,

I need to show the progress control inside ModalPopup Control. Everytime I hit the button, the modalpopup should show the progress while the background code of the button is working. Modalpopup dialog show disappear when the background executing is done. For modalpopup control I set the targetcontrolID as the ID of the button.

When I click the button, the modalpopup dialog show up. But it doesn't trigger the background code of the button. Do I miss anything?
Thank you.

Fred

Hi,

What you need is keeping the modalpopup showing when the background executing is done.

So see:

http://forums.asp.net/t/1134216.aspx

http://forums.asp.net/t/1134520.aspx

These are what you need.

Best Regards,

Need Help With The ModalPopup Control

i have a few questions about the ModalPopup control. i was wondering if somebody more experienced could help me. I only installed Atlas yesterday - Im a bit of an Atlas newbie - so i apologise in advance if any questions sound naive.

1. when my page first loads the ModalPopup control is visible for a second or so then disappears. This has been mentioned before here:http://forums.asp.net/thread/1363694.aspx. My manager will not accept this as it looks 'odd'. Is there a fix for me?

2. when my ModalPopup control pops up the dropdownlists within the <div> below it disappear. This has also been mentioned here:http://forums.asp.net/thread/1363694.aspx. I tried re-referencing the ControlToolkit dll's as this previous poster suggested but it still doesn't work for me. Am i missing something?

3. my ModalPopup control contains a user control which is in effect a search facility. this search facility needs to post back in order to populate its grid with results. when my button within the ModalPopup control causes a post back the ModalPopup control is hidden after the post back. Can I fix this?

4. Finally, is the ModalPopup control only designed for more simple situations like the paragraph selector in your examples? Am i pushing it too hard by trying to put a more complex user control inside it that itself needs to do multiple post backs? Should I be looking at other alternatives?

Thanks for any help!

Hi Wee Bubba,

Let's go through your questions:
1. If you set "display: none" in theStyle attribute of yourModalPopup, you won't see it when it loads.
2. The drop down lists are intentionally hidden - if we didn't hide them then they would appear on top of the transparent overlay and you could manipulate them. This is a problem with IE and certain controls. A lot of people on the forums have discussed working around this by using an IFrame - and I think someone might even be working on incorporating that into the Toolkit.
3. TheModalPopup won't be visible on a postback. If you want to use it with postbacks, I would recommend wrapping the contents of the popup in anUpdatePanel.
4. You should be able to get away with anything inside aModalPopup that you can inside anUpdatePanel - which means you can do an awful lot inside of it.

Thanks,
Ted

hi ted, and thanks for your comprehensive replies. it is reassuring to know that there is such a helpful community for atlas, and this is one of the reasons why i have chosen Atlas over some of its counterparts.

i will endeavour to implement your suggestions and will come back to you if i get stuck again (if thats ok).

onwards and upwards!


hello again. i have been wrestling with this ModalPopup control all day. i am tantalisingly close but i have a few more questions to hit you with if that is ok. if you would be so kind!

it is perhaps helpful for me to describe what i am trying to achieve on this web page. basically, when my users are inserting or editing a row in my datagrid they need to specify a client code. in order for them to arrive at a client code, i am offering them a search facility where they can search by name or department. then they can select the correct entry from a results grid. this search facility is what i have put inside the ModalPopup control.

1. when my ModalPopup control gets launched, is there any way i can pass a request to the user control within it? basically i want to set the focus within a particular textbox within the user control.

2. when my ModalPopup control gets launched, is there anyway i can pass a parameter to the user control within it then execute a codebehind method automatically. e.g. so if a user is on the grid and types in 'Sm' then clicks the popup button, i would like to launch the popup and automatically fill the search textbox with 'Sm' and also show them a list of results for 'Sm' as well automatically.

3. the ModalPopup control asks for an OK button. yet i will need to close it when a user clicks on any of the links within the search results grid. can this be done?

4. Finally, when a user selects a 'hit' within my popup user control, i would like to send some of this selected data back to my grid on the main page to fill the row. is this possible?

thanks again for any help. if you like i can send this sample in once im finished with a dummy xml dataset so that you can use it as an example. just let me know.


Hi Wee Bubba,

1-3. Take a look at this post:http://forums.asp.net/thread/1386346.aspx. Unfortunately it's not completely trivial to do some of the things you want - yet. We're working on making a lot of these scenarios easier in our next release (we don't have a date yet - but it should be within the next few weeks). Essentially the strategy boils down to: 1) Do whatever it is you want to do on the server (i.e. when the user clicks a button, setup whatever content you want in yourModalPopup, etc.), 2) usingRegisterStartupScript, send back some JavaScript to the client that shows the popup. It gets tricky with theUpdatePanel, but the code in that post should be safe to copy/paste where you need it for now.

4. If everything's wrapped inUpdatePanels, you can have a server event raised by a click in your modal popup update some data in the form (and then also close theModalPopup from the server in the same way you opened it on the server).

If any of that wasn't detailed enough, please ask about any other questions that you have.

Thanks,
Ted

Ted

I do have one more unrelated question that occurred to me yesterday evening. As I was having a few difficulties implementing the ModalPopup control (I appreciate it's still in beta) I got to thinking about alternative solutions. I thought about the following 2 alternatives:

- Using an old fashioned non-Atlas javascript child window to hold my search facility.

- Placing my search facility within a hidden <div> then swapping the layer's visibility when a user clicks the popup button. (i believe i can maintain the state of the layer's visibility by including a hidden field to keep track of this).

I then tried to understand how a ModalPopup control was any different to these traditional methods I have just outlined, what advantages it had etc. To be honest I couldn't work out the difference. I couldn't tell myself why I had been working so hard to use this control, other than my mind had been focused on Atlas at the time with using the UpdatePanel.

Can you give me any reasons why it is better to use this control? Otherwise I'm thinking of using one of the old-fashioned javascript routes as described above in order to save development time. Thanks again!


Hi WeeBubba,

ModalPopup doesn't really offer a lot more than either of your solutions in terms of functionality, although its user interface may be a little friendlier. Most of the "Atlas" Control Toolkit is not designed to be better than anything you could write in JavaScript by hand (look atConfirmButton, for example). The real benefit withModalPopup is that you don't have to re-code this scenario for every page you want to behave this way - and then tweak all of those when you realize your script doesn't run quite as expected on all the browsers you have to support.

You definitely shouldn't go crazy trying to rework things just to use one of our controls if you do it much easier in JavaScript though.

Thanks,
Ted


WeeBubba - you may want to look at the example code I placed on my blog at tech-review.org. I had spent nearly three weeks trying to get the modal to be a bit more form intensive. It is actually relatively simple to do what you are trying to do if you do not not mind incorporating a bit more code into your user control. While my code is not totally documented (I wrote the article at 3 am after a well documented article was lost due to to CS loosing my session and subsequently my article... ) it is doumented where needed and provides a framework for handling actual forms within a ModalPopUp...