Modalpopup and print: usercontrol

Showing posts with label usercontrol. Show all posts

Monday, March 26, 2012

Modal Popup In A UserControl (Problems)

My problem is that i have added the modal popup control into a usercontrol. The usercontrol has the code for the modal and the button to initiate the popup.

When i added the usercontrol to a page and click on it this is what i get. My site is centered so i have already scrolled pretty far to the right already so that only the right hand side of my site is showing but then youll see how much grey there is. If you look at the bottom of the picture youll see that there is still alot of room left to scroll to the left. This is my problem. Im not sure why its not displaying on the main screen like the examples.

Now if i remove it from the usercontrol and just put it in the master page then it works fine.

Any ideas??

I tried this with the Toolkit sample page and could not repro the issue. Could you possibly post a small repro? Note that we have fixed some modalpopup positioning issues in the latest versions of the Toolkit. Although, we know that there are some more improvements required for specific cases. If you have the sample ready where the modalpopup does not work as expected that will help us a lot.

I updated to the newest version and while it does not do the same thing its still off centered. Here is code for the main page and user control.

USERCONTROL:

<div style="position:absolute; right:0; top:0;">
<asp:ImageButton ID="cmdGetHelp" runat="server" ImageAlign="absmiddle" ImageUrl="/images/icon_help_32px.gif" />
</div
<asp:Panel ID="Panel1" runat="server" Style="display: none" CssClass="modalPopup">

<asp:Panel ID="Panel3" runat="server" Width="500" CssClass="modalTitle" style="cursor:move;">
<div>
<p>TITLE</p>
</div>
</asp:Panel

<div>
Content goes here

 </div> <!--BUTTONS--> <div style="text-align: right;"> <asp:Button ID="OkButton" runat="server" Text="Submit"/> <asp:Button ID="CancelButton" runat="server" Text="Cancel" /> </div></asp:Panel><ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server" TargetControlID="cmdGetHelp" PopupControlID="Panel1" BackgroundCssClass="modalBackground" OkControlID="OkButton" OnOkScript="ClosePopup()" CancelControlID="CancelButton" DropShadow="true" PopupDragHandleControlID="Panel3" />

DEFAULT.APSX

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <style type="text/css" > .page-container {width:900px; margin:0px auto; border:solid 1px rgb(150,150,150);font-size:1.0em;} .main {border:solid 1px orange; clear:both; width:900px; padding-bottom:30px;} .main-navigation {border:solid 1px red; display:inline /*Fix IE floating margin bug*/; float:left; width:200px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .main-content {border:solid 1px green;display:inline /*Fix IE floating margin bug*/; float:left; width:650px; margin:0 0 0 30px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .footer {border:solid 1px blue; clear:both; width:900px; padding:1.0em 0 1.0em 0; font-size:1.0em; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header {width:900px; font-family:"trebuchet ms",arial,sans-serif; border:solid 1px red;} .header-top {width:900px; height:80px; background:rgb(240,240,240); overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-middle {width:900px; height:70px; overflow:visible !important /*Firefox*/; overflow:hidden /*IE6*/;} .header-bottom {width:900px; } .header-breadcrumbs {position:relative;clear:both; width:890px; padding:0.9em 0 0.9em 0; background:rgb(255,255,255) } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager Id="ScriptManager1" runat="server" EnablePartialRendering="true"/><!-- Main Page Container --> <div class="page-container"><!-- A. HEADER --> <div class="header"><!-- A.1 HEADER MIDDLE --> <div class="header-middle"> Header-Middle </div><!-- A.2 HEADER BOTTOM --> <div class="header-bottom"> Header-Bottom </div><!-- A.3 HEADER BREADCRUMBS --> <div class="header-breadcrumbs"> Header-breadcrumbs <lmf:Help ID="help" runat="server" /> </div> </div><!-- B. MAIN --> <div class="main">Main Content place holder<!-- B.1 MAIN NAVIGATION --> <div class="main-navigation">main-navigation </div><!-- B.2 MAIN CONTENT --> <div class="main-content">main-content </div> </div><!-- C. FOOTER AREA --> <div class="footer">footer </div> </div> </form></body></html>

Ok it seems that when I place the user control inside a <div> that has absolute or relative positioning then it behaves incorreclty.

What im trying to do is this

I have my breadcrumbs and at the far right of the breadcrumbs i want to show a help image. When that image is clicked on it will open the modal popup.

My problem is getting this image positioned in the exact place that i want it to and in trying to do so with positions, i seem to have caused the problems.

If i place the user control in any other div except for the header-breadcrumb <div> then it displays in the upper right hand of the screen because of the position of the div around that image for the help image. When i do this it works correclty. So it looks like im having css issues but im not sure how to solve them. Any ideas?

This is the div the user control is being placed in. (well not in the code above, in the code above the class header-breadcrumbs has the relative position)

<divstyle="position:relative;">

<lmf:HelpID="lmfHelp"runat="server"/>

</div>

<divstyle="position:absolute; right:0; top:0;">

<asp:ImageButtonID="cmdGetHelp"runat="server"ImageAlign="absmiddle"ImageUrl="/images/icon_help_32px.gif"/>

</div>

Thanks a lot for the repro. I have updated this workitem with the files:WorkItemId=10693.

We will look into fixing it for our next release.

kirtid,

For my peace of mind, is this a problem with the modal popup control in respect to positioning or is it a problem created by something that im doing?

EDIT: Never mind kirtid. If i would of just clicked on the workitemid i would of seen that you had recreated the problem and submitted the problem.

Thanks.

Saturday, March 24, 2012

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!

Wednesday, March 21, 2012

ModalPopup -> UserControl -> fire event ?

Hello !

Because I made different scenarios with modalpopups, I have this situation :

1) I create ModalPopup dynamically

2) Load dynamically a usercontrol into a ModalPopup (and set usercontrol ID)

3). UserControl has buttons OK,Cancel and btnFireClick with click event on a server

Everything is fine, except that when I click btnFireClick the click event didnt fire...

If I set the same buttons into modalpopup but not like usercontrol - event is executed

If I load the usercontrol in the page (not in modalpopup) - event is executed

But if I load usercontrol into modalpopup - event didnt execute

Where is the problem ?

I use Microsoft ASP.NET 2.0 AJAX Extensions

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

2) Load dynamically a usercontrol into a ModalPopup (and set usercontrol ID)

Your user control is a server side control which renders a bunch of html controls at the client side, it is not like a Panel server control which renders a div at the client side.

The second thing you may want to look at is, if you load the user control dynamically, you will have to load the user control every postback within OnInit or OnLoad and give it the same name since you the first time you load the user control dynamically. Otherwise, the event won't fire and the control does not even exist.

modalpopup & user control question

Hi all,

I hope all of you are doing well! Big Smile I have an interesting situation that I wanted to get some input on.

I have a ascx usercontrol that contains about a dozen textbox and dropdown controls inside an updatepanel. It also has a few buttons that fire server side events, all contained and handled in the code behind page for the usercontrol. This usercontrol resides on a host aspx page inside another updatepanel control. Everything works fine thus far.

Now, what I would like to do is dynamically popup the usercontrol inside a modalpopup when the user clicks on a button on the host aspx page. The user would then enter the data for the dozen or so fields on the popped up usercontrol, hit update, which would invoke the server side code inside the code behind of the usercontrol and finally close the modalpopup.

Is this possible? Some insight on how I can do this would be great. Some links to code samples would be even more awesome.

Thanks so much!

Hi,

Here is a sample made according to your requirements:

1. UserControl

<%@. Control Language="C#" ClassName="WebUserControl" %><script runat="server"> protected void Button1_Click(object sender, EventArgs e) { Label1.Text = DateTime.Now.ToString(); success = true; } // this variable is used to determine if the modal popup should close public bool success = false;</script><asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> <br /> <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label> </ContentTemplate></asp:UpdatePanel>

2. Page

<%@. Page Language="C#" %><%@. Register src="http://pics.10026.com/?src=WebUserControl.ascx" TagName="WebUserControl" TagPrefix="uc1" %><!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 Page_Load(object sender, EventArgs e) { this.PreRender += new EventHandler(default_aspx_PreRender); } void default_aspx_PreRender(object sender, EventArgs e) { if (WebUserControl1.success) UpdatePanel1.Update(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate>    <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> <uc1:WebUserControl ID="WebUserControl1" runat="server" /> </asp:Panel> <asp:Button ID="Button1" runat="server" Text="Show" /> <ajaxToolkit:ModalPopupExtender PopupControlID="Panel1" ID="ModalPopupExtender1" runat="server" TargetControlID="Button1"> </ajaxToolkit:ModalPopupExtender> </ContentTemplate> </asp:UpdatePanel>   </form></body></html>

Hope this helps.

Thanks. This worked perfectly!!