Showing posts with label popup. Show all posts
Showing posts with label popup. Show all posts

Wednesday, March 28, 2012

how do I use a calendar popup in a repeater

I would really like to be able to use a calendar popup when editing items in a repeater. I would assume that handling this scenerio would be the same if you did it inside a gridview. Has anyone managed to get this to work and if so would you mind sharing some ideas? My biggest concern is that if you put the calendar control inside of the repeater you will end up with as many calendars as rows on the page which is a lot of extra html. It would be nice to be able to reuse a single calendar.

Thanks,
JustinI'd like to know how to do this as well.

It could be a popup calendar ... or it could be a hover panel that contains the calendar. What I'd like to have is a single extender instance that dynamically allows configuration of the contents of the extender (e.g. setting the date in the calendar for the particular gridrow/repeater data).

Yes - we hear you on the "dynamic configuration" point. I'm thinking through ways to have a unified method of doing that.

On this particular problem, I think what you want to do is to put an extender into the template and then have it point to a panel outside of the gridview. That way you share the popup, and the multiple extender instances don't really cost you very much.

<asp:Panel id="popup" runat="server><asp:Calendar id="cal" ...></Panel>

<asp:DataList>

<EditItemTemplate>

<asp:TextBox id="editTextBox"/>

<atlasToolkit:PopupControlExtender>

<atlasToolkit:PopupControlProperties TargetControlID='editTextBox' PopupControlID="popup"/>

</...>


Yes - we hear you on the "dynamic configuration" point. I'm thinking through ways to have a unified method of doing that.

On this particular problem, I think what you want to do is to put an extender into the template and then have it point to a panel outside of the gridview. That way you share the popup, and the multiple extender instances don't really cost you very much.

<asp:Panel id="popup" runat="server><asp:Calendar id="cal" ...></Panel>

<asp:DataList>

<EditItemTemplate>

<asp:TextBox id="editTextBox"/>

<atlasToolkit:PopupControlExtender>

<atlasToolkit:PopupControlProperties TargetControlID='editTextBox' PopupControlID="popup"/>

</...>


Hi,

Thanks for the information. The only problem that I am not ableto solve is that in the examples, the onselect event for the calendaris fed back to the server which then sets the value of the textbox. At least that is how I understood it worked. How doyou set the value of the current textbox in a grid or repeater using acalendar that is outside of the grid and that posts back to theserver? Is there a way to determine the selected textbox?

Thanks,
Justin

Justin,

Have you taken a look at the CommitScript property of the PopupControl? This allows you to run arbitrary script (including making function calls) when the PopupControl is closed. (Though it probably assumes that the PopupControl is using an UpdatePanel.)


Hi David,

I originally assumed that this is how it would be done, however what I am not clear on is how to do it. I have not been able to figure out how to get the id of the textbox and the value from the control within the context of the script that would be assigned to the CommitScript.

If you have any ideas or know of any helpful documentation it would be much appreciated.

Thanks,
Justin
I am having the same kind of problem with trying to get a popup calendar to show in an InsertTemplate for a FormView. Please see my source below.

<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
<atlas:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<center>
<asp:Calendar ID="Calendar1" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar1_SelectionChanged" Visible="False">
<SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" />
<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />
<SelectorStyle BackColor="#CCCCCC" />
<WeekendDayStyle BackColor="#FFFFCC" />
<OtherMonthDayStyle ForeColor="Gray" />
<NextPrevStyle VerticalAlign="Bottom" />
<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True" Font-Size="7pt" />
<TitleStyle BackColor="#999999" BorderColor="Black" Font-Bold="True" />
</asp:Calendar>
</center
</ContentTemplate>
</atlas:UpdatePanel>
</asp:Panel
<asp:FormView ID="fvInfo" runat="server" DataKeyNames="id" DataSourceID="ds1"
DefaultMode="Insert">
<InsertItemTemplate>
Date of Birth:
<asp:TextBox ID="date_of_birthTextBox" runat="server" Text='<%# Bind("date_of_birth") %>'></asp:TextBox><br /
<asp:LinkButton ID="InsertButton" runat="server" CausesValidation="True" CommandName="Insert"
Text="Insert"></asp:LinkButton
<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="date_of_birthTextBox" PopupControlID="Panel1" Position="Bottom" />
</atlasToolkit:PopupControlExtender>

</InsertItemTemplate>
</asp:FormView
/// <summary>
/// Handler for calendar changes
/// </summary>
/// <param name="sender">source</param>
/// <param name="e">arguments</param>
protected void Calendar1_SelectionChanged( object sender, EventArgs e )
{
// Popup result is the selected date
int iIndex = 0, iTxtIndex = -1;
AtlasControlToolkit.PopupControlExtender pExt = null;

foreach ( Control pCntrl in fvInfo.Controls )
{
if ( pCntrl.ID == "PopupControlExtender1" )
pExt = (AtlasControlToolkit.PopupControlExtender) pCntrl;

if ( pCntrl.ID == "date_of_birthTextBox" )
iTxtIndex = iIndex;

if ( (iTxtIndex >= 0) && (pExt != null) )
break;

iIndex++;
}
if((pExt != null) && (iTxtIndex >= 0))
pExt.Commit( fvInfo.Controls[iIndex], Calendar1.SelectedDate.ToShortDateString() );
}
This is where things are getting very tricky ... I may have worked my way into a solution.

BE AWARE OF THE FOLLOWING: The extenders are using the ClientID. If you have a simple form and no master ... ID == ClientID for top level controls.

If you are using FormView/GridView ... ClientID != ID.

If you are using Master ... ClientID != ID.

If you are using dynamic (non-markup driven template, i.e. custom ITemplate implementations) ... then you need to do the work yourself to ensure that you are providing the correct ClientID.

This is why I believe that I've seen a variety of problems raised ... folks are cut & pasting markup from a simple page into a much more complicated page and not accounting for this. And/Or the toolkit as of April CTP is not accounting for this.

While this isn't a solution ... it is what I've been learning the hard way ... hope it helps.

Yes - the extenders highlight ASP.NET naming semantics in very focused way. Most other ASP.NET things don't reference each other directly so you're able to avoid running into this.

The Toolkit can't do a ton to help you here. But one of the great things about being alpha-type code is that we can try things.

So in the refresh release (today or tomorrow probably), we've added an event to the extender that you can handle to help with this. Basically if we fail to find a control based on ID, we'll raise the event, hand you the ID, and give you a chance to find it. It might be a super helpful thing, it might just be a lot of rope, we'll see.


I have worked with various Microsoft development environments for anumber years now. This is quickly becoming the most fun becauseof the interaction with the guys who are building the code. Ihave to say thanks for the openness with these controls and the speedthat new items are released. I know that I am looking forward tothe next drop. I'll be playing with the events as soon as yourelease.

Thanks for the help and for listening.
Justin

Wow - thanks for saying that. That's really the goal, and just hearing that it's working makes it all worth it.

We're having a blast too, by the way. :)

How do I show postback search results on a Modal Popup?

My goal is to show the serach results in a grid view on a model popup after the user enters the search criteria on a page and presses the search button. The OnClick event handler needs to collect the search criteria, get the dataset after querying the database and bind the data to the gridview before displaying the modal popup.

My problem is that the search button's id can't be assigned to the TargetControlID of the ModalPopupProperties as it will not let the OnClick event be fired and process the postback.

Please suggest the solution/workaround.

Thanks much

Display the ModalPopup via script instead?

David,

Do you have an example or a sample of the script that I can take a look at?

The other option would be to dynamically create the popup, after I process my search funcationility. But the question is, how do I invoke the display of the popup after associating the TargetID of the search button to the dynamically created ModelPopup?

Thanks for looking into it.

Vijay


I believe the following post outlines how to display the ModalPopup with script:http://forums.asp.net/thread/1280980.aspx

How do I send email using ajax modal popup extender

I have a panel that sends an email message. I wish to use an ajax modal popup extender to display this panel when a user clicks a "Contact Us" link button. I get an error message when I try to run the application. My code follows.Thank you for any suggestions.

<body>
<form id="form1" runat="server">
<ajaxToolkit:ToolkitScriptManager ID="ScriptManager1" runat="server" />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
TargetControlID ="ContactUsLinkButton"
PopupControlID ="EmailPopupPanel"
OkControlID="OKButton"
CancelControlID="CancelButton"
DropShadow="true"
BackgroundCssClass ="modalBackground" />
<asp:LinkButton ID="ContactUsLinkButton" runat="server">Contact Us</asp:LinkButton>


<div >
<asp:Panel ID="EmailPopupPanel" runat="server" CssClass ="popupEmail" Width="325px" Style="display: none" >
<asp:Label ID="TitleLabel" runat="server" BackColor="#FFFFC0"
Font-Bold="True" Font-Size="Medium" ForeColor="SteelBlue" Text="Contact D`Stroke Tennis"
Width="300px"></asp:Label>
<br />
<asp:Label ID="InfoLabel" runat="server" Font-Bold="True" Font-Size="Medium" ForeColor="Red"></asp:Label>
<br />
<br />
<asp:Button ID="OKButton" runat="server" BackColor="#FFFFC0" Font-Bold="True" ForeColor="DarkRed"
Text="OK" Visible="False" /><br />
<span style="color: #990000"><strong><asp:Label ID="FromLabel" runat="server" Text="From:"></asp:Label></strong> </span>
<asp:TextBox ID="FromTextBox" runat="server" Width="250px" ForeColor="DarkRed"></asp:TextBox>
<br />
<br />
<asp:Label ID="ToLabel" runat="server" Text="To: admin@dotnet.itags.org.dstroketennis.com" Width="300px" BackColor="#FFFFC0" Font-Bold="True" ForeColor="DarkRed"></asp:Label>
<br />
<br />
<span style="color: #990000"><strong><asp:Label ID="SubjectLabel" runat="server"
Text="Subject:"></asp:Label></strong></span>
<asp:TextBox ID="SubjectTextBox" runat="server" Width="240px"></asp:TextBox><br />
<br />
<span style="color: #990000"><strong>
<asp:Label ID="MessageLabel" runat="server"
Text="Message:"></asp:Label></strong></span><br />
<asp:TextBox ID="MessageTextBox" runat="server" Height="150px" TextMode="MultiLine"
Width="300px" ForeColor="DarkRed"></asp:TextBox><br />
<asp:Button ID="SendEmailButton" runat="server" BackColor="#FFFFC0" BorderColor="DarkRed"
BorderStyle="Solid" Font-Bold="True" ForeColor="DarkRed" Text="Send Email" Width="173px" />
<br />
<asp:Button ID="CancelButton" runat="server" BackColor="#FFFFC0" BorderColor="DarkRed"
BorderStyle="Solid" Font-Bold="True" ForeColor="SteelBlue" Text="Cancel Email" Width="173px" /></asp:Panel>
</div>
</form>
</body>

Tags:ajax, ie 7, Microsoft JScript runtime error: Sys.ArgumentNullException: Value cannot be null. Parameter name: element

When do you get the Sys.ArgumentNullException error? Also, try getting rid of the Style="display: none" on the Panel...

-Damien


I get the error when the page loads.


I Got rid of the Style "display : none" and I get the same error on page load.


See if this related post helps:http://forums.asp.net/p/1107533/1700376.aspx

-Damien


I also ran across this:http://www.spthorn.com/blog.php?post=28&PHPSESSID=c42ace58bb0f0d24ab3d9d2eef948c4a

-Damien


Thanks Damien. The asp buttons weren't plugged into anything I am guessing. My new challenge with this now is to have the email send, and display a message that the send was a success before leaving modal state.

At least this one issue is handled.

HOW do I popup the model popup programmatically?

It's tried to a control click by default.
Does the model popup allow for programmatic viewing?

Thanks!

I really need this!

You can use a hidden button as the targetcontrolid of the modalpopup and have your button postback as normal. You can then call Show() from codebehind or show() from JS to show the modalpopup.


Someone posted this a while back. Another option would be to call the click method of the button you used for the targetcontrolid.

Show and Hide ModalPopupExtender from JavaScript

1) Assign a BehaviourID to the ModalPopupExtender using the BehaviourID attribute.

BehaviorID ="ModalBehaviour"
.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}

2) Use the $find method to get a handle to the Modal Popup Behaviour .

$find ("ModalBehaviour").
.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}.ExternalClass .EC_csharpcode, .ExternalClass .EC_csharpcode pre{font-size:small;color:black;font-family:consolas, "Courier New", courier, monospace;background-color:#ffffff;}.ExternalClass .EC_csharpcode pre{;}.ExternalClass .EC_csharpcode .rem{color:#008000;}.ExternalClass .EC_csharpcode .kwrd{color:#0000ff;}.ExternalClass .EC_csharpcode .str{color:#006080;}.ExternalClass .EC_csharpcode .op{color:#0000c0;}.ExternalClass .EC_csharpcode .preproc{color:#cc6633;}.ExternalClass .EC_csharpcode .asp{background-color:#ffff00;}.ExternalClass .EC_csharpcode .html{color:#800000;}.ExternalClass .EC_csharpcode .attr{color:#ff0000;}.ExternalClass .EC_csharpcode .alt{background-color:#f4f4f4;width:100%;}.ExternalClass .EC_csharpcode .lnum{color:#606060;}

3) Call your hide and show methods on the acquired handle.

4) The Javascript would look like this.

<script language="javascript">function ShowModalPopup() { $find("ModalBehaviour").show(); }function HideModalPopup() { $find("ModalBehaviour").hide(); }</script>


Thanks.

I found what I needed:

ModalPopupExtender1.Show();


Hi ,

That would be meBig Smile.

Here is the link to the original Post.

http://blogs.msdn.com/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

Hope this helps.


Hello,

I have a new problem.
How can I stop the modal popup from disappearing when a postback occurs.

For example, if I have a button on the modal "form", a click makes it dissappear.

Help!

Thanks!


The modal popup will disappear if the entire panel is wrapped in an updatepanel. You can move the update panel inside the panel tags or call Show() in server side code to keep it visible.

Monday, March 26, 2012

How do I Databind to DropDownListBox with button Onclick

Hi I have javascript calling a webservice which is loading a dataset from an onclick event, which opens a popup window collects information and returns to the main page. I want to just load the data collected from the popup and update the dropdownlist without a postback.

The dataset is loaded and ready to go, I'm not sure how to bind the ds to the dropdown at this point.

Thanks in advance for the help!

Hi

You have an option of populating the DDL using javascript itself by loading the select with options array. But at the cost of not known to the server and not present in view state. If that's okay you can go with that otherwise the good deal would using ajax to load


How would I use ajax to load the dropdownlistbox?


Hi,

Based on my understanding, you opens a popup window to collects information,then you load a dataset based on those information.Where are you loading the dataset? In the popuppage?In the main page?

If you load the dataset in the popup page, It is hard to post your dataset to your main page.

If you just post the collected information to your main page and then load your dataset in the main page, you can do it like this:

place your dropdown contorl in a updatepanel;

pass the collected infoemation to the main page and fire a Ayncpostback to the updatepanel(Loading data from popup to parent window without refreshing the parent window.)

Best Regards,


The update panel will not work as I have 8 independent buttons that need to re populate the different dropdowns on the Main Screen when the Popup closes. Not all the independent buttons are effect the dropdowns at the same time. Is there an extender available that can perform the databind?

Thanks in advance


8independent buttons?

I don't think it is a good design.

Would you please change it?

As far as I know, still no such extender that can perform the databind in that way.


I will create my own extender. Comments on the design are not appreciated, as they are client dictated, and real world...


Hi,

Just a comment...

I think you can pass 8 values to the main page by using "window.opener.document.forms["form1"].elements["xxx"].value = ''".

Happy coding:)

How do I create a popup that has a button that submits to server?

I have this in my page

<div>
<asp:ButtonID="RefreshAreasButton"runat="server"OnClick="RefreshAreasButton_Click"Text="Refresh"/>
<asp:ButtonID="DeleteAreaButton"runat="server"Text="Delete"/>
<!-- Delete popup -->
<asp:PanelID="DeletePanel"runat="server"CssClass="modalPopup"Style="display: none"Height="115px"Width="255px">
<asp:TextBoxID="TextBox1"runat="server"Text="Delete Selected Areas"></asp:TextBox>
<asp:ButtonID="DeleteOKBtn"runat="server"Text="OK"OnClick="DeleteOKBtn_Click"/>
<asp:ButtonID="DeleteCancelBtn"runat="server"Text="Cancel"/>
</asp:Panel>
<cc1:ModalPopupExtenderID="ModalPopupExtender2"
TargetControlID="DeleteAreaButton"
PopupControlID="DeletePanel"
runat="server"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="DeleteOKBtn"
CancelControlID="DeleteCancelBtn"/>
</div>

I want the OK button to submit to server, but my "protectedvoid DeleteOKBtn_Click(object sender,EventArgs e)" method is never called.
What am I doing wrong?

I know you that it looks like sort of confirmation popup, but later I would like the user to enter a value in the popup, and to be able to use the value in the server - is it doable?
Am I using the right control, or can you recommend on a better way to gain that.

Thanks in advance!

Tamir

What

Remove the OkControlID="DeleteOKBtn" property, after that your button should submit back to the page.

Contrary to the documentation the OkControlID property will cause the button click to fire off thejavascript function which is defined in OnClick. The same is true for the CancelControlID property, if you do not define it the button will post back normally.

Saturday, March 24, 2012

How do I add a popup window within an AJAX UpdatePanel

Hi, I am new to AJAX and trying to figure out the following:

I am trying to display a popupwindow within an AJAX UpdatePanel, but when I used the following code with ajax no popup window appears. When I take it out of the update panel it works fine.

Any help would be much appreciated! Thanks.

PublicSub DisplayMessage(ByVal objPageAs System.Web.UI.Page,ByVal messageAsString) 'Replace end of line characters with JavaScript \n newline character. message = Replace(message, vbCrLf,"\n") message = Replace(message, vbCr,"\n") message = Replace(message, vbLf,"\n") message = Replace(message,"""","\""") 'Replace ugly database tags with (slightly) more meaningful text. message = Replace(message,"[DataDirect ADO Sybase Provider]","Sybase Error:") message = Replace(message,"Native Warning code","Error #:") Dim pageTypeAs Type = objPage.GetType() Dim displayNameAsString ="displayMessage" Dim csAs System.Web.UI.ClientScriptManager = objPage.ClientScript If (Not cs.IsStartupScriptRegistered(pageType, displayName))Then Dim displayTextAsString ="alert(""" & message &""");" cs.RegisterStartupScript(pageType, displayName, displayText,True) EndIf EndSub

#########################################################################

The above code is getting called from the below code.

IfNot IsDate(txtStartDate.Text)Then

DisplayMessage(Page,"Please enter a valid start date.")

ReturnFalse

EndIf

unfortunently, when firing server side functions from inside an updatepanel, it cannot make changes to the page, only to objects on the page that are inside the updatepanel. With this said, trying to write a startup script or any type of javascript block from a updatepanel partial postback will not work, probably for the same reason you cannot use the response.write method. You will either need to deal with the full page postback or handle the popup window in the javascript events.

-ALan


Hi,

to inject JavaScript during a partial postback, you should use the RegisterXXX methods of the ScriptManager control.


Hi Garbin,

Even I' looking for a similar kind issue. and I tried your suggestion, but not getting it properly. I'm getting an exception like

The Script tag registered for tpe 'ASP.sections_events_myPage_aspx' and key 'Key' has invalid characters outside of the script tags: alert();. Only properly formated script tags can be registered.

In the code behind I'm calling the function as

ScriptManager.RegisterClientScriptBlock(Me.Page, Me.GetType(), "key", "alert();", False)

I think my parameters are not right. Can you give an example of this function or explain its parameters. I saw the doc on msdn but did't understand it perfectly.

Thanks,

Mehul Mistry


Hi,

Can you please check the following...

Dim script As String = "function test()" & _
" { " & _
" alert('test');" & _
" } "

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "TestFunction", script, True)

I did the above stuff in the method which is called on asyncronous callback in AJAX. It gets executed but there is no alert() msg displayed...

Is this the correct way to do it?

Thanks,

Mehul Mistry


Hiorlash,

I think I figured out the solution.Its working for me. For your situation, What you can do is make a small js file or if you have one then add your window opening javasript function inside the js file. ( Make your javascript function take one string parameter to display your msg from code behind, Like you are doing above ).

Now in you aspx page, you must be having ScriptManager. add one element to the script manager... as follows,

<asp:ScriptManager ID="ScriptManager1" runat="server" >
<Scripts>
<asp:ScriptReference Path="MyJavascriptFile.js" />
</Scripts>
</asp:ScriptManager>

and in the code behind, whichever method is called by the asyncronous call of AJAX, call your function as...

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "OpenWindow", "fnOpenWindow('myMsg');", True)

This should do the job. Its working for me.

Any better ideas and comment are always welcome :-)


Hiorlash,

Above thing works great... Alternately if you don't want to create a js file then then add your javascript function in your aspx page only in the head section as

<script type="text/javascript">
function fnOpenWindow(myMsg) {
window.open("MyPage.aspx?msg="myMsg,"","scrollbars=yes,statusbar=no,directories=0,status=0,menubar=0,width=605,height=335,left=205,top=205");

// or you can use alert

// alert(myMsg);
}
</script>

and in the DisplayMessage function after you build your message string call the function as

ScriptManager.RegisterClientScriptBlock(Me, GetType(Page), "OpenWindow", "fnOpenWindow(' " & message & " ');", True)

This will also work.


Thanks Mehul,

That works great for me now.

Thanks again,
Orla


Hi, sory to pick up the conversation, but i've got the same problem.

Putting the Javascript on an .JS at the head of the control worked for me. The thing is that i'm using a composite control and i had the javascript inside it. By taking the code and creating an .Js i'm creating dependencies for it.

Is there any way to create the .js, but keeping it inside the composite control?

Thank you.

How do execute a server-side click event for a ModalPopupExtender?

I have created a modal popup to show up during page load. It is my logon dialog box. Anyways, I have set the OkControl property to my logon button to execute some codes through the ModalPopupExtender control staticly and dynamically through Page_Load but both didn't work..

What is my problem?

Thanks!

Ok, I follow the flow from this person website.http://blogs.vertigosoftware.com/alanl/archive/2006/07/25/Creating_a_Confirmation_Using_the_ModalPopup_Extender.aspx It works with a button.

I want to use the SHOW event when the page load but it doesn't work. It seem like it is not rendering the javascript or couldn't find it.

What is my problem?


Hi,

Have you tried this link?

http://blogs.msdn.com/phaniraj/archive/2007/02/20/show-and-hide-modalpopupextender-from-javascript.aspx

How can the ModalPopup become draggable?

Okay, so following the normal functionality of a modal popup in all desktop apps, the modal popup should be able to be dragged. Is this possible? If so, does that already exist as a property? Or would it need to be added?

For example, say you are on a page with lots of data and you want to add a new data element. So you hit the "Add data" button which neatly shows the modal popup. Uh oh, I forgot what I was going to name it .. and if I could just move this window for a second to see what the last name was .. ugh, looks like I need to close this window to find out.

Obviously, if I needed (or whether the team needed) to add this kind of functionaltiy, then I'd need a draghandle ..

We don't currently support this but it's a good feature request. I've logged it as work item 518. Thanks!

You can also try doing this yourself. I haven't tried this but generally:

1) In ModalPopupExtender add a RequiredScript attribute for typeof(DragPanelExtender)

2) In ModalPopupBehavior, instantiate a Sys.UI.LayoutBehavior and attach it to the control referenced by "PopupControlID"


I think this library is able to get the drag and drop going for the ModalPopup as I have used with similar ModalPopups (not ajax). It does pictures, Divs and other HTML objects.

http://www.walterzorn.com/dragdrop/dragdrop_e.htm

Regards


Sorry .. it was really more of a feature request than anything else. :)

David understood me ..

Anyways, I tried your suggestion last night David.

< .. in ModalPopupBehavior.js ..>this.initialize() = function() { ... "existing init code" ... if (true) { _dragBehavior = new Sys.UI.LayoutBehavior(); _dragControl = $object(_PopupControlID); if (!_dragControl) { _dragControl = new Sys.UI.Control(_foregroundElement); _dragControl.initialize(); } _dragControl.get_behaviors().add(_dragBehavior); _dragBehavior.initialize(); }}
But that .. didn't work. It doesn't really do anything, so I'm not sure what I'm doing wrong.

I dunno if this is the best forum to say this but damned i hate javascript...

I copied your code and worked for me (with bugs)...


And the modal window moves for you?


worked with some bugs... i made a thick border on the pannel...

1. it drags but doesn't get fixed
2. sometimes it doesn't show the drag but it fixes


just a note... i have the latest version of atlas control toolkit...

(every day i update from codeplex (i recommend this, but i'm not yet experienced with atlas or even ajax stuff))


Can you post your test page? I was just changing the Toolkit dll and then was loading the SampleWebsite provided with the toolkit to see if it worked or not.

In my case, doesn't work. No errors, but doesn't work.

there it goes, BUT -->> i didn't try to fix the bugs! All i did was: put your stuff into .js write aspx, press play... saw it ON THE WAY IT WAS AND DID NOTHING...

At least you will be able to see the modal popup being draged...

Good luck fixing the problems ;) needing, i'm here...

<asp:ButtonID="_showModalPopup"runat="server"Text="Show dragable modal popup!"/> <asp:PanelID="_handlePanel"runat="server"Height="281px"Width="929px"><asp:PanelID="_dragableModalPopup"runat="server"BorderStyle="Solid"BorderColor="Black"BorderWidth="8"Width="300"Height="300">

I'm a dragable modal popup!

<br/><br/><asp:ButtonID="_okButton"runat="server"Text="OK"/><asp:ButtonID="_cancelButton"runat="server"Text="Cancel"/><asp:ButtonID="_postBackTest"runat="server"Text="Make me a post back"OnClick="Button4_Click"/>

_okButton

</asp:Panel></asp:Panel><asp:LabelID="_lblTest"runat="server"Text=""></asp:Label><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="_showModalPopup"PopupControlID="_dragableModalPopup"BackgroundCssClass="watermarked"OkControlID="_okButton"CancelControlID="_cancelButton"OnOkScript="okScript()"OnCancelScript="cancelScript()"ID="_modalPopupProperties"/></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtenderID="DragablePanelExtender"runat="Server"><atlasToolkit:DragPanelPropertiesTargetControlID="_dragableModalPopup"DragHandleID="_handlePanel"/></atlasToolkit:DragPanelExtender>

Just a note: I used the "AtlasControlToolkit test project" wich can be found on the latest releases on codeplex.com. I'm posting the full code..

<%

@.PageLanguage="C#"MasterPageFile="~/Default.master"CodeFile="ModalPopup.aspx.cs"Inherits="Automated_ModalPopup"Title="ModalPopupTests Tests" %>

<

asp:ContentID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"runat="Server"><asp:ButtonID="_showModalPopup"runat="server"Text="Show dragable modal popup!"/> <asp:PanelID="_handlePanel"runat="server"Height="281px"Width="929px"><asp:PanelID="_dragableModalPopup"runat="server"BorderStyle="Solid"BorderColor="Black"BorderWidth="8"Width="300"Height="300">

I'm a dragable modal popup!

<br/><br/><asp:ButtonID="_okButton"runat="server"Text="OK"/><asp:ButtonID="_cancelButton"runat="server"Text="Cancel"/><asp:ButtonID="_postBackTest"runat="server"Text="Make me a post back"OnClick="Button4_Click"/>

_okButton

</asp:Panel></asp:Panel><asp:LabelID="_lblTest"runat="server"Text=""></asp:Label><atlasToolkit:ModalPopupExtenderID="ModalPpoupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="_showModalPopup"PopupControlID="_dragableModalPopup"BackgroundCssClass="watermarked"OkControlID="_okButton"CancelControlID="_cancelButton"OnOkScript="okScript()"OnCancelScript="cancelScript()"ID="_modalPopupProperties"/></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtenderID="DragablePanelExtender"runat="Server"><atlasToolkit:DragPanelPropertiesTargetControlID="_dragableModalPopup"DragHandleID="_handlePanel"/></atlasToolkit:DragPanelExtender><scripttype="text/javascript">// (c) Copyright Microsoft Corporation.// This source is subject to the Microsoft Permissive License.// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.// All other rights reserved.// Script objects that should be loaded before we runvar typeDependencies = ['AtlasControlToolkit.ModalPopupBehavior'];// Test Harnessvar testHarness =null;// Controls on the pagevar show;var popup;var ok;var cancel;var postback;var behavior;// Variablesvar msg;function okScript() {

msg =

'ok';

}

function cancelScript() {

msg =

'cancel';

}

function checkPopupNotVisible() {

testHarness.assertEqual(popup.style.display,

'none','Popup should not be visible');

}

function checkPopupVisible() {

testHarness.assertEqual(popup.style.display,

'','Popup should be visible');

}

function checkMessage(m) {

testHarness.assertEqual(msg, m,

'Message \"'+msg+'\" should be \"'+m+'\"');

}

function checkLabel(m) {var label = testHarness.getElement("ctl00_ContentPlaceHolder1_Label1").innerText;

testHarness.assertEqual(label, m,

'Label \"'+label+'\" should be \"'+m+'\"');

}

function showPopup() {

show.click();

}

function clickOK() {

ok.click();

}

function clickCancel() {

cancel.click();

}

// Register the testsfunction registerTests(harness) {

testHarness = harness;

var test;

show = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button1");

popup = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Panel1");

ok = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button2");

cancel = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button3");

postback = testHarness.getElement(

"ctl00_ContentPlaceHolder1_Button4");

behavior = testHarness.getObject(

"ModalPopupProperties1");

msg =

'';

behavior.set_DropShadow(!behavior.get_DropShadow());

test = testHarness.addTest(

"Initial State");

test.addStep(

function() { checkLabel('Label1'); });

test.addStep(checkPopupNotVisible);

test.addStep(

function() { checkMessage(''); });

test = testHarness.addTest(

"Show Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(

function() { checkMessage(''); });

test = testHarness.addTest(

"Cancel Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(clickCancel);

test.addStep(checkPopupNotVisible,

function() {try { checkMessage('cancel');returntrue; }catch (ex) {returnfalse; } }, 100, 5000);

test = testHarness.addTest(

"OK Event/State");

test.addStep(showPopup);

test.addStep(checkPopupVisible);

test.addStep(clickOK);

test.addStep(checkPopupNotVisible,

function() {try { checkMessage('ok');returntrue; }catch (ex) {returnfalse; } }, 100, 5000);

test = testHarness.addTest(

"Script Show/Hide");

test.addStep(

function() { behavior._show(); });

test.addStep(checkPopupVisible);

test.addStep(

function() { behavior._hide(); });

test.addStep(checkPopupNotVisible);

test = testHarness.addTest(

"Postback");

test.addStep(

function() { behavior._show(); });

test.addPostBack(postback);

test.addStep(

function() { checkLabel('Button4'); });

}

</script>

</

asp:Content>


FYI, all I had to do was use the dragExtender in companion to the modal popup

<asp:Panel ID="pnlModal" run="server"> <div id="dragHandle" style="position:absolute; top:0px; left: 0px; height:30px; width:50px; cursor:hand;></div> <div> <iframe id="ifrmModal" runat="server" frameborder="0" height="100%" width="100%" /> </div> <div> <asp:Button Id="ModalOK" runat="server" Text="OK" UseSubmitBehavior="false" /> <asp:Button Id="ModalCancel" runat="server" Text="Cancel" UseSubmitBehavior="false" /> <asp:LinkButton ID="lnkModal" runat="server" Text="Click here" /> </div></asp:Panel><atlasToolkit:ModalPopupExtender ID="mpe1" runat="server"> <atlasToolkit:ModalPopupProperties ID="pnlModalBehavior" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="ModalOK" PopupControlID="pnlModal" TargetControlID="lnkModal" /></atlasToolkit:ModalPopupExtender><atlasToolkit:DragPanelExtender ID="dragPanelExtender1" runat="server"> <atlasToolkit:DragPanelProperties TargetControlID="pnlModal" DragHandleID="dragHandle" /> </atlasToolkit:DragPanelExtender>

KFrancis,

Just adding the DragPanelExtender works -- except if the modal popup has a drop shadow. The drop shadow does not move along with the modal popup window.

Any ideas on how to fix that?

Thanks,

Randall Price


yea, remove the drop shadow.

Hi KFrancis,

I copy&paste your code and it works. But I found one thing really weird is that if I add the quotation mark for the <style='...> property, it's no longer draggable!! (The quotation mark should be there, right?)

<div id="dragHandle" style='position:absolute; top:0px; left: 0px; height:30px; width:50px; cursor:hand;></div>

I'm using July CTP, any idea why this is happening?

And even when it's draggable, the popup won't show up at the center of page. The initial location has shifted to the right bottom. Do you know how to fix this?

Wednesday, March 21, 2012

How can I stop the modal popup from disappearing when a postback occurs?

Hello,

I have a problem.
How can I stop the modal popup from disappearing when a postback occurs.

For example, if I have a button on the modal "form", a click makes it dissappear.

Help!

Thanks!

UPDATE:
I just tried wrapping the postback controls in an updatepanel.

Seems to work so far...this the recommended way?

How can I see ModalPopup js code ?

I'm a big fan of the modal popup extender and I'm trying to implement it using plain DHTML since my client have no asp.net server and I'm using classic ASP.

As you know, there is a classic IE annoying bug with COMBO BOXES. They stay on top of every div, without respecting the z-index layout.

I'm interested in learning how the Ajax Control Toolkit programmers handled this situation so I can do the same.

I can't just hide the combos, since I'm usiing a transparent Modal Background and I wish I could see the combos BEHIND the Modal Background.

Thanks!

Hi,

You can download the source codehere. Its implementation can be found in ModalPopupBehavior.js file.


thanks

How can I reproduce that behavior (using AJAX PRO) with ATLAS?!?

Hello again ! I have a normal page, with a search button, that open a popup(dhtml-div-iframe) !

Using AJAX PRO:

In that IFRAME(popup) I have a GridView with a LinkButton that calls a JS function passing a selected key!

The JS Function call a server function passing that key!

The server funtion get a class´s object and pass to JS function...

The JS function Fill all fields from my MAIN form and close POPUP !

How can I do that using ATLAS?

[]´s

No help ?!?

:(


Not an expert, but here are a few suggestions:

Take a look at the atlas control toolkit,

For the pop up, there's a pop up extender. To fill the GridView async, you can use a web service. Actually, you don't have to. Just putting the GridView in an UpdatePanel with a PartialRendering ScriptManager will let you re-fill it with any query you'd like.

And by the way, there's also a ModalPopUp extender, might fit your needs better.

How can i Put close button inside the the popUp extender?

How can i Put close button inside the the popUp extender?

I want that when the popUp control appears there is close button on the popUp or in the panel which is extended by the popUp extender.

Once the close button is clicked the popUp control is hide. Thnks

Hi,

If you are using ModalPopup Extendar then its simple add the following property:

CancelControlID="Button1"

and for PopupControlExtender check out this:

http://weblogs.asp.net/lkempe/archive/2007/01/28/login-control-in-an-asp-net-ajax-toolkit-popupcontrolextender-with-a-close-button.aspx

thanks


Thanks... I will try it...

How can I open Modal Popup from code behind

I have a page that on load builds a datatable base on the users userid.

An if else statment detemrines whetehr or not the user simply proceeds or else has to make a selection prior to proceeding.

So there is no control to open the modal popup from like a button click...and whats more not EVERY person accessing the window will get the modal popup.

I assume there is a way in the code behind that I can fire up the Modal Popup as a condition of the else...

any help would be appreciated.

Call the show method.

ModalPopupExtender1.show()

How can I handle Popup control auto hiding?

I useSys.UI.PopupBehavior to show a popup:

// find popup

popup =new Sys.UI.Control($("tblMenu<%= ClientID %>"));var elt = popup.element;// initilize popup

popup.element.style.zIndex = 10000;

popup.initialize();

var b = popup.get_behaviors()// initilize behavior to the popup

behavior =

new Sys.UI.PopupBehavior();

behavior.set_positioningMode(Sys.UI.PositioningMode.Absolute);

b.add(behavior);

behavior.initialize();

// visibility handlingif (flag){behavior.show();}else{behavior.hide();}

It's working very good but I'd like that the popup'd disappear after mouse leave it.

How can I do it?

Use the onmouseout event to do behavior.hide()

How Can i Get the new Values from the PopupWindow in Atlas ModalPopupWindow with samples

if i change the textbox values in Popupwindow and if i click the ok button (ServerSide code) I cant get the new values from the popup window in modalpopupExtender.Anyone Please help me how can i get the new values from the popupwindow in atlas modalpopupExtender.Explain with simple example.

Thanks

Hi,

Try this:

<%@. Page Language="VB" %>

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

<script runat="server">

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs)
TextBox1.Text = DateTime.Now.ToString()
End Sub

</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>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">
<ContentTemplate>
<asp:Panel ID="Panel1" onscroll="javascript:saveScroll();" runat="server" Height="50px" Width="125px" Style="position: static;
overflow: scroll; height: 350px; border: solid 1px blue; background-color: White;
display: none;">
<table border="0" cellpadding="0" cellspacing="0" width="480px">
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
<tr>
<td>
</td>
<td>
</td>
<td>
</td>
</tr>
</table>
<asp:Button ID="Button1" runat="server" Text="Update" OnClick="Button1_Click" />
<asp:Button ID="Button3" runat="server" Text="Close" />
<asp:Button ID="Button4" runat="server" Text="OK" />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
<asp:Button ID="Button2" runat="server" Text="Show" />
<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1" OkControlID="Button4"
CancelControlID="Button3" TargetControlID="Button2">
</cc1:ModalPopupExtender>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>

<script type='text/javascript'>
var scrollLeft = 0;
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args) {
document.getElementById('Button2').click();
setScroll();
}

function setScroll()
{
document.getElementById('<%= Panel1.ClientID %>').scrollLeft = scrollLeft;
}

function saveScroll()
{
scrollLeft = document.getElementById('<%= Panel1.ClientID %>').scrollLeft;
}
</script>

</body>
</html>

Get the value in javascript via "document.getElementById('TextBox1').value".

Best Regards