Based on the video example about using modal Popupextender. But the only changes i did is replace the option controls to textbox controls. The flow will only display the text on what I've inputted on the textbox in the modal window. The problem is how am I going to refresh the value of the textbox to null everytime I clicked the button to popup the modalwindow?
This might help:http://forums.asp.net/t/1137922.aspx
I want to set focus on a textbox inside the modal popup extender when it is made visible and I cant for the life of me find an appropriate way to do this!
The popupcontrol is not good because when I add the attribute onclick it gets run before the textbox is made visible!
Any clues?
Cheers
Ross
Sorry, I hate to bump this but could really do with knowing how this can be done.
Ross
You can try registering a clientside startup script that sets focus to the text box. Or you can use the clientside script to open the modal popup and then set the focus.
#1:
page.ClientScript.RegisterStartupScript(me.getType(), "setfocus", "<script language=""javascript"">$get('textbox1').focus();</script>")
#2:
<script language="javascript">
function openModal(){
$find('modalpopupextender1').show();
$get('textbox1').focus();
}
</script>
The ids of the mpe and the textbox will need to be the client rendered id, so if you are using a masterpage or if this is in a user control, you will need to get the clientid from the server or from the output of the page prior to implimenting the code.
Let me know if need anyhting else.
-Alan
the solution in this article worked for me (although i would like to see something much better)
http://www.aspdotnetcodes.com/ModalPopup_Postback.aspx
then you add something similar to the following in the Page_Load event:btn.Attributes.Add("onclick","fnSetFocus('" + control.ClientID +"');");
hi
go to the following link
http://forums.asp.net/t/1103365.aspx
I have a strange situation in which I am using a Model Popup Control with an embedded GridView containg TextBox controls in a column. I can DataBind the GridView in the codebehind and the TextBox controls are properly populated. However, when the pack posts back, the TextBox Controls always have an empty string for the Text property? This also occurs if I replace the GridView with a Repeater or any other list control.
Other controls, like labels, have there Text property available.
craig
You might want to look at this post:
http://forums.asp.net/thread/1328079.aspx
Look at the second page, at the last post with the JavaScript.
They have done some nice work with the modal regarding this issue I think.
There was also a workaround using the SubmitButtonBehavor = false;
Dont know if this will help you, but I thought I would give it a shot
Good luck
-Shane
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???
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.
Hi RobertBeach,
Do you still need a sample code , let me know...
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.
I have a modalpopup panel which is used to change search variables for a db. One of the search fields is a date textbox. I have attached a popupcontrolextender to this textbox so that when clicked, a calendar pops up and the user can select the appropriate date. However, when I try this on the page, the calendar popup is actually UNDER the modal popup panel. I can barely see the last week of the month. Has anyone else had this issue? Is there a way to set up modalpopup or the popupcontrolextender to force the calendar to popup on top of the modal popup panel?
Here is my code for the modalpopup panel
<asp:Panel ID="modalPanel" runat="server" Height="0px" Width="0px" CssClass="modalPopup" style="display:none" BorderColor="Black" BorderStyle="Solid" BackImageUrl="~/images/backgrnd.gif">
<div class="modalPopup-text" style="font-weight: bold">
<table style="width: 661px">
<tr>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
</tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td align="center" colspan="2">
Please Enter a Search Start Date</td>
<td align="center" colspan="2">
Please Enter a Search End Date</td>
</tr>
<tr>
<td align="center" colspan="2" style="height: 26px">
Start Date:
<asp:TextBox ID="StartDate" runat="server" Width="122px"></asp:TextBox></td>
<td align="center" colspan="2" style="height: 26px">
End Date:
<asp:TextBox ID="EndDate" runat="server" Width="121px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td align="center" colspan="2">
Please Enter a Searh Start Time</td>
<td align="center" colspan="2">
Please Enter a Search End Date</td>
</tr>
<tr>
<td align="center" colspan="2">
Start Time:
<asp:TextBox id="StartTime" runat="server" style="width: 114px" ></asp:TextBox></td>
<td align="center" colspan="2">
End Time:
<asp:TextBox id="EndTime" runat="server" style="width: 107px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:RadioButtonList ID="StartRadio" runat="server">
<asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
</asp:RadioButtonList></td>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:RadioButtonList ID="EndRadio" runat="server">
<asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
</asp:RadioButtonList></td>
</tr>
<tr>
<td align="center" colspan="4">
<asp:Button ID="execute" runat="server" Text="Search" OnClick="execute_Click" />
<asp:Button ID="cancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</div>
</asp:Panel>
Here is my code for the calendar popupcontrolextender
<asp:Panel ID="StartPopup" runat="server" Height="0px" Width="0px" CssClass="popupControl">
<asp:UpdatePanel ID="StartUpdate" runat="server">
<ContentTemplate>
<asp:Calendar ID="StartCalendar" runat="server" BackColor="White" BorderColor="#3366CC"
BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="8pt" ForeColor="#003399" Height="165px" Width="149px" OnSelectionChanged="StartCalendar_SelectionChanged" SelectedDate="2006-11-09">
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>
<ajaxToolkit:ModalPopupExtender ID="searchModal" runat="server" TargetControlID="modalOpen" BackgroundCssClass="modalBackground" CancelControlID="cancel" PopupControlID="modalPanel" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>
<ajaxToolkit:PopupControlExtender ID="start" runat="server" TargetControlID="StartDate" PopupControlID="StartPopup" CommitProperty="value" Position="Bottom">
</ajaxToolkit:PopupControlExtender>
Thanks,
Luis
One thing I've done to make this work is put a DropShadowExtender on the Panel that you are popping up.Try adding style="z-index:200000" to StartPopup as a workaround. (This brings it above the ModalPopup panel at z-index 100000.)
