Showing posts with label modal. Show all posts
Showing posts with label modal. Show all posts

Wednesday, March 28, 2012

Dynamic created ModalPopup Window

Hi,

I am having a lot of modal popup windows on my page (20+).

When i click various buttons on my page, various modal popupwindows should apear. But I don't want to define all the windows in the aspx, because the windows are pretty large.

So I think it would be fine to place one Panel containing an UpdatePanel and one ModalPopupExtender on the page and on clicking a button on the page i create an composite control and place it inside the Updatepanel, update() and show the modal dialog from code behind. This works fine if the content of the modal popup doesn't contain any buttons. But when i use buttons inside the popup window, their events doesn't fire at all.

Here is some code:

The ASPX:

 <asp:panel id="pnlPopUp" runat="server" style="display: none">
<div style="background-color: LightGrey">
<asp:panel id="header" runat="server">
<asp:label id="lblHeader" runat="server" />
<asp:linkbutton id="lbClose" runat="server" text="X" onclientclick="$find('mpePopUp').hide(); return false;" />
</asp:panel>
<asp:updatepanel runat="server" id="updPopup" childrenastriggers="true" updatemode="conditional">
<contenttemplate>
<asp:panel id="pnlBody" runat="server" cssclass="body" />
</contenttemplate>
</asp:updatepanel>
</div>
</asp:panel>
<cc1:modalpopupextender id="mpePopUp" behaviorid="mpePopUp" popupcontrolid="pnlPopUp" runat="server" dropshadow="true"repositionmode="RepositionOnWindowResizeAndScroll" targetcontrolid="dummy" backgroundcssclass="modalBackground" />

CODE:

public partialclass _Default : System.Web.UI.Page
{
public MDMWindow2 w2 =null;

protected override void OnInit( EventArgs e )
{
base.OnInit( e );
w2 =new MDMWindow2( );
w2.Bubble +=new EventHandler( w2_Bubble );
}

void w2_Bubble(object sender, EventArgs e)
{
int x = 0;// This Point get NEVER hit}protected void ShowWindow2(object sender, EventArgs e )
{
w2.HeaderText ="WWW2";
updPopup.ContentTemplateContainer.Controls.Add( w2 );
updPopup.Update( );
mpePopUp.Show( );
}

and the code of the control:

using System;
using System.Web.UI;
using System.Web.UI.WebControls;

/// <summary>
/// Summary description for PopUpPanel
/// </summary>public class MDMWindow2 : CompositeControl
{
private Label headerLabel;
private Button button;

public String HeaderText
{
get{EnsureChildControls( );return headerLabel.Text;
}
set{EnsureChildControls( );headerLabel.Text =value;
}
}

public MDMWindow2( )
{
}

public event EventHandler Bubble;

protected override void OnLoad( EventArgs e )
{
base.OnLoad( e );
EnsureChildControls( );
}

protected override void CreateChildControls( )
{
EnsureChildControls( );
headerLabel =new Label( );
headerLabel.ForeColor = System.Drawing.Color.Red;
this.Controls.Add( headerLabel );

button =new Button( );
button.CommandName ="Click";
button.Text ="ClickMe";
Controls.Add( button );
button.Click +=new EventHandler( b_Click );

}

void b_Click(object sender, EventArgs e )
{
Bubble(this, e );// This Point get NEVER hit
}
}

Can anybody help? What is wrong with wiring the eventHandlers? Is the updatepanel the probl?em? Or can anybody show me an better way to create modal popups at serverside?

Thnx

I did something like this using user controls (.ascx files). The .aspx file has an UpdatePanel whose content is an asp:Panel with an asp:PlaceHolder in it and an asp:Button. The button is configured with an OnCommand handler and an initial CommandName of 'Inactive'. A LinkButton on the page triggers a partial postback which does 3 main things: a) does a LoadControl of a .ascx file into the Placeholder; b) changes the CommandName of the Button to "EntryForm" (or something logically associated with the .ascx); c) calls Show() on the modal popup.

After the partial rendering completes, the modal popup is shown. When the Button is pressed, the OnCommand is run, and it uses the CommandName to do the right thing for the particular .ascx that was loaded. It's important that in Page_Load, if it's a postback, that the loaded .ascx is re-loaded (using LoadControl) so that the viewstate is restored and the controls on the .ascx can get updated with the values entered on the modalpopup form. During OnCommand, if a different .ascx needs to be shown, it unloads the Placeholder's controls and uses LoadControl for the next .ascx. If the sequence is done, it sets the CommandName back to "Inactive" and hides the modalpopup.

Hope that helps,

Donnie

This sounds good. But in my Dialogs I will have more various controls like dropdownllist or textboxes wich will have to be bound to an eventhandler too. They have to be in the controls.

It would be perfect, if I can handle the events, which are triggered by my control, inside the page.



Sounds like, then, after you use LoadControl, the page just needs to add event handlers in its code-behind to the controls in the .ascx that was dynamically loaded.

Dynamic content for modal popup

Hi -

I want to change the contents of a modal popup dynamically through client side script. For that purpose, I've included a div element and change it's innerhtml property. When I test whether the change got done I can read the new value through javascript but the modal popup extender shows the old html (which loaded when the page was loaded). I think I may have to call a method to let the modal popup extender know I updated the content, but I don't know how to do that.

Any help is greatly appreciated!!

Oliver

I thought I'd add some code so you know what I am talking about.

Thanks,

Oliver

 function showpopup() { event.bubble = false; var d = document.getElementById("popupcontent"); d.innerhtml='<img src="images/spinner.gif" alt="Please wait ..." />'; var popup =$find('BMPNoShow'); popup.show(); alert(d.innerhtml); }<ajaxToolkit:ModalPopupExtender ID="MPNoShow" BehaviorID="BMPNoShow" runat="server" CancelControlID="BNoShowCancel" DropShadow="true" PopupControlID="PNoShow" PopupDragHandleControlID="PNoShow" TargetControlID="PNoShow"> </ajaxToolkit:ModalPopupExtender> <asp:Panel ID="PNoShow" runat="server" Style="background: white; border-color: Gray; border-style: solid; width: auto; padding: 10px" EnableViewState="false"> <div id="popupcontent"> </div> <br /> <asp:Button ID="BNoShowCancel" runat="server" Text="Cancel" UseSubmitBehavior="false" /> <asp:Button ID="BNoShowConfirm" runat="server" Text="Mark as no-show" UseSubmitBehavior="false" /> <asp:HiddenField ID="HFNoShowRequest" runat="server" /> </asp:Panel>

Take a look at the Dynamic* properties of the modalpopup, which allow you to load the content of a modalpopup dynamically using a web service. This will automatically load the content into the modalpopup when it is shown without you having to do anything.


Thanks - that's even better than what I was trying to do :)

Saturday, March 24, 2012

DropDownList in an AJAX modal popup window

We've developed a multicolumn dropdown listbox that works great on a standard Web form, but it's been giving me a lot of grief trying to get it to work in an AJAX modal popup window. For some reason, either the dropdownlist or the popup window's height ends up getting set to -2px, which causes the program to come to a screeching halt.

I don't have any such problem if I use a standard dropdown listbox, but I need to show both a code and a description in the dropdown and a standard dropdown comes with its own set of problems in that circumstance. To separate the description from the code and to evenly align the description, I modified the DataText property by setting it equal to the code plus a tab character plus the description thusly, ddList.DataText = "Code" + Chrw$(9) + "Description". Once it's rendered on the screen, I view the source and it shows all the codes and descriptions with the tab between them allowing the descriptions to be aligned properly. But the browser strips out the tab character and replaces it with a space.

I'm about to give up on this and was wondering if anyone has had any luck doing the same thing?

Allen A.

There is no tab in html. It will be replaced by (or non breaking space). You can add a definite number of non breaking space to format your listitems. Sorry not able to give simple solution.

Wednesday, March 21, 2012

Dropdownlist disappears on using Modal PopUP extender

Hi,

I have a strange problem here..I have a page with quite a few controls and on clicking a button I am having a panel "popped up" using the Ajax Modal popup extender. This popup has a dropdownlist and is being rendered fine. The problem is that there is another dropdown list( not on the pop up) which disappears right when the popup extender is called. This control is visible in the Source of the page but not rendered until there is a postback on the screen. Can anyone tell me if they have faced such a problem before? If so, any possible work arounds?

Can you please post the code? Or can you provide a demo?

Without code it is unable to determined.

I think we should provide as much as possible information when we ask for answers, do you think so?

Please provide more information the next time,thanks.


was this ever resolved? I have a same problem my dropdowns on the page disappear when popup extender is show and then hidden.


Usually the dropdown comes up always on top thats why the ControlToolKit team sets it invisible when showing the Modal Popup and it gets visible when the hide() method is executed, is there any chance the hide is not called?