Wednesday, March 28, 2012

Modal popup and continue to run server code

I have a linkbutton that causes a postback for a lengthy process on the server - then the page redirects to a different page for fianl processing - when the linkbutton is pressed I would like a modal popup to appear showing that something is happening and just have a spinnier or something on it - nothing fancy.

However if I wire the modal popup extender to the linkbutton it disrupts the postback - of course if I have the server post code to show the popup by the time it gets to the client the process is done and that is useless - is there a way to show the modal popup and have the postback occur leaving the modla popup visible untill the page redirects or the page finishes its postback

You could use the Dynamic* properties of the modalpopup to use a web service method to do the server side processing. You can then hookup to the populated event so that after the processing has completed, you can redirect to another page.

Modal popup and Combo box

Hi.

I have a combo box on my web page. When Modal popup is shown, then this combo box is not disabled. How to fix it?

Piotrek

This problem should be fixed in the 60626 release of the Toolkit. Please try that.


Thanks David.

Where can I find Toolkit release number?


http://www.codeplex.com/Release/ProjectReleases.aspx?ProjectName=AtlasControlToolkit

Modal popup and postback

Hello,
I'm using a modal popup which contains a OkButton which should normally do a postback to save the option value.
But the postback is not done, either in a regular form (not in an update panel) nor an atlas form, simply nothing is done.
Is it a way to do that? The description of the control says just to do postback like normal ones.
You can see this bug here:http://www.wdagent.com, clic on the messaging on the right menu the on "options" (you can see that the page is not reloaded and the updateprogress loading is not shown).

The code is the following :
[code}
<act:ModalPopupExtender ID="OptionsPopUpMaker" runat="server">
<act:ModalPopupProperties TargetControlID="OptionsButton" PopupControlID="Options" BackgroundCssClass="modalBackground" DropShadow="false" OkControlID="ValidateOptionsButton" CancelControlID="CancelOptionsButton" />
</act:ModalPopupExtender>

<div style="display: none;">
<asp:Panel ID="Options" runat="server" Height="80px" Width="300px" CssClass="modalPopup">
<asp:RadioButton ID="OptionsFriendsBig" runat="server" GroupName="Options" Text="Afficher les contacts détaillés" /><br />
<asp:RadioButton ID="OptionsFriendsSmall" runat="server" GroupName="Options" Text="Afficher les contacts simples" /><br /><br />
<div style="text-align: right;"><asp:Button ID="ValidateOptionsButton" runat="server" Text="Save preferences" OnClick="SetFriendsOptions" /><asp:Button ID="CancelOptionsButton" runat="server" Text="Cancel" /></div>
</asp:Panel>
</div
I noticed a huge number of bugs in this toolkit (i wasn't even able to use a control bug free!) like :
- The title of the page disapear when clicking on expand/collapse link of a collapsible panel (i rewrited the javascript for this) and disable the partial rendering of the page.
- The textboxwatermark disable the partial rendering of the page (i don't know how it is possible but it is...).

Thanks for your helpSorryn the "options" is in the "friends" tab
chech this out, it could give you an idea or a way to solve it..
what you really could do is:
do a javascript call like:
__doPostBack('ValidateOptionsButton', '');
on the save button

but you will notice that your controls (OptionsFriendsSmall)will not hold the values for the postback
so you will have to assign them o another hidden control before the postback

so to test the postback your modalpopupextender property onOkScript will look like:

OnOkScript="__doPostBack('ValidateOptionsButton', '')"

if this works but doenst post back the values of theOptionsFriendsSmall create a hidden field and ajava script function that saves the value to the hidden field first and then does the postsback call.

for example:
OnOkScript="savevalue(seletedvalue)"

and inside thesavevalue function do the__doPostBack



Please also have a look at the following threads for ModalPopup background/fixes:http://forums.asp.net/thread/1277351.aspx,http://forums.asp.net/thread/1287520.aspx.


thanks :)

Modal Popup and MasterPage

I have several modalpopups on a page that is inside of a MasterPage. The popups work fine, but in IE, the modalpopup opens inside the content area rather than over the entire page. I've searched these forums and have not come up with a solution. Does anyone have any ideas?


http://forums.asp.net/ShowPost.aspx?PostID=1357977 - and maybe vote on the work item to address this.

modal popup and login

i have a login link, upon clicking it, the modalpopup extender will appear, the problem is the validation of the data...when i click on the login buton, nothing is happening..im very new in using asp.net ajax and not that familiar with javscript. should i create a javascript to pass the validation?or is there any other easy way to do this?

thank you.Smile

Hi,

According to my test, the validation in the login control works when it's placed in a modal popup panel.

Here is my code:

<%@. Page Language="C#" %><!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 Button3_Click(object sender, EventArgs e) { TextBox tb = new TextBox(); Panel1.Controls.Add(tb); ModalPopupExtender1.Show(); } protected void Page_Load(object sender, EventArgs e) { } protected void Button6_Click(object sender, EventArgs e) { ModalPopupExtender1.Hide(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <script type="text/javascript"> function changeID(newOkControlID) { var ext = $find("ModalPopupExtender1"); if (ext._OkControlID) { $removeHandler($get(ext._OkControlID), 'click', ext._okHandler); ext._okHandler = Function.createDelegate(ext, ext._onOk); ext._OkControlID = newOkControlID; $addHandler($get(ext._OkControlID), 'click', ext._okHandler); } } </script></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> </div> <asp:Button ID="Button1" runat="server" Text="Popup via client" /> <asp:Button ID="Button3" runat="server" OnClick="Button3_Click" Text="Popup via Server" />  <input id="Button5" type="button" value="Change OK Button ID" onclick="changeID('button4');" /> <asp:Panel ID="Panel1" runat="server" Height="50px" Width="125px"> <asp:Panel ID="Panel2" runat="server" Style="cursor: move;background-color:#DDDDDD;border:solid 1px Gray;color:Black"> <div> <p>Choose the paragraph style you would like:</p> </div> </asp:Panel> This is popup control<asp:Login ID="Login1" runat="server"> </asp:Login> <br /> <input id="Button2" type="button" value="button" /> <input id="Button4" type="button" value="button" /> <asp:Button ID="Button6" runat="server" OnClick="Button6_Click" Text="Hide via Server" /></asp:Panel>     <ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" OkControlID="Button2" PopupDragHandleControlID="Panel2" PopupControlID="Panel1" runat="server" TargetControlID="Button1"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript"> Sys.Application.add_load(modalSetup); function SetFocusOnControl() { $get("Login1_UserName").focus(); } function modalSetup() { var modalPopup = $find('ModalPopupExtender1'); modalPopup.add_shown(SetFocusOnControl); // modalPopup.show(); }</script> </form></body></html>

Modal Popup and Listbox control

Is it possible to use modal popup with asp listbox control? I would like to show modal popup once an item in the asp lisbox is double-clicked. Any ideas, tips, help, or anything else on how to achieve this functionality?

Thanks in advance,
Marko Vuksanovic.

Answered here, I think:http://forums.asp.net/thread/1448453.aspx

Modal popup and Gridview.OnSelectedIndexChanged Firefox problems

Hello there again!

I am building a gallery for a site and I am using a gridview to do this. The idea is to have a GridView which shows the gallery items, the user clicks anywhere on a line in the Gridview and a ModalPopup pops up to show the gallery item's details.

I am however encountering two problems:

1) The ModalPopup is somehow increasing the size of the whole page (Scrollbars appear or get larger) which causes it to center wrong and gives problems dragging it (While dragging the scrollbars resize which offsets the dragging and it ends up at an other place then you wanted it).

2) The ModalPopup is not being shown at all in Firefox when you click the Gridview. The Event fires, and it gets inside the if statement, but ModalPopup1.Show() simply does not work.

Any ideas?

Skorp

- Link:Here

- Code:

<%@dotnet.itags.org. Page Language="C#" MasterPageFile="../Ap.master" Title="DiceTroll Gallery" validateRequest="false" %
<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<%@dotnet.itags.org. mastertype virtualpath="../Ap.master" %>
<%@dotnet.itags.org. Reference VirtualPath="../S.master" %>
<%@dotnet.itags.org. Import Namespace="System.Data.Odbc" %>
<%@dotnet.itags.org. Import Namespace="DTNameSpace" %
<script runat="server">
DTUser user;
DTSettings settings;
int ID;

protected void Page_Load(object sender, EventArgs e)
{
user = Master.Master.currUser;
settings = Master.Master.currSettings;

Load_DropDown();
Load_Grid();
}
void Load_Grid()
{
//Some SQL stuff
}
void Load_DropDown()
{
//Some SQL stuff
}
protected void DropDown_Event(Object sender, EventArgs e)
{
string SelectedCat = CatDropDown.SelectedValue;
if (SelectedCat != "Show All Galleries")
SqlDataSource1.SelectCommand = "//Some SQL stuff";
else
{
SqlDataSource1.SelectCommand = "//Some SQL stuff";
GridView1.DataBind();
}
Page.Focus();
}
protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{
if (e.Row.DataItemIndex == -1)
return;

e.Row.Attributes.Add("onMouseOver",
"this.style.cursor='hand';");
e.Row.Attributes.Add("onclick",
this.GetPostBackClientEvent(GridView1,
"Select$" + e.Row.RowIndex.ToString()));
}
protected void GridView_SelectRow(object sender, EventArgs e)
{
GridViewRow row = ((GridView)sender).SelectedRow;
if (row != null)
{
ModalPopupExtender1.Show();
}
}
</script
<asp:content id="mainPageC" contentplaceholderid="mainPageCPH" runat="server">
<div class="tablecontent" style="margin-top: 20px; margin-bottom: 20px; margin-left: 20px;">
<asp:ScriptManager id="ScrMan1" runat="server" EnablePartialRendering="true" ></asp:ScriptManager>
<asp:UpdatePanel id="UpPan1" UpdateMode="Conditional" runat="server">
<ContentTemplate>
<asp:SqlDataSource ID="SqlDataSource2" Runat="server"
SelectCommand = "//Some SQL stuff" />

<b>Gallery Sections:</b><br />
<asp:DropDownList ID="CatDropDown" runat="server"
AutoPostBack="True"
OnSelectedIndexChanged="DropDown_Event"
DataSourceID="SqlDataSource2"
DataTextField="Category"
DataValueField="ID"
AppendDataBoundItems="true">
<asp:ListItem Value="Show All Galleries" Selected="true">Show All Galleries</asp:ListItem>
</asp:DropDownList><br /><br />
<asp:GridView ID="GridView1" Runat="server" DataSourceID="SqlDataSource1" AutoGenerateColumns="False" AllowSorting="True" AllowPaging="True" DataKeyNames="ID" Width="90%" OnRowDataBound="GridView1_RowDataBound" OnSelectedIndexChanged="GridView_SelectRow">
<RowStyle backcolor="#E6E9EC" forecolor="#679DE7" Font-Bold="True" BorderColor="#E6E9EC" />
<AlternatingRowStyle backcolor="#CAD1D8" forecolor="#679DE7" Font-Bold="True" BorderColor="#CAD1D8" />
<HeaderStyle backcolor="#425674" forecolor="#FFFFFF" Font-Bold="True" Font-Underline="False" BorderColor="#679DE7" />
<Columns>
<asp:CommandField SelectText ="Select" ShowSelectButton="true" ItemStyle-CssClass = "HideButton" HeaderStyle-CssClass ="HideButton" />
<asp:imagefield dataimageurlfield="thumbnail"
dataimageurlformatstring="http://www.dicetroll.com/thumbnail_images/{0}"
alternatetext="Image"
nulldisplaytext="No image on file."
headertext="Image" />
<asp:BoundField DataField="title" HeaderText="Title" SortExpression="title" />
<asp:BoundField DataField="vchnickname" HeaderText="Author" SortExpression="vchnickname" />
<asp:BoundField DataField="Date_approved" HeaderText="Date" SortExpression="Date_approved" />
<asp:BoundField DataField="views" HeaderText="Views" SortExpression="views" />
<asp:BoundField DataField="nCount" HeaderText="Reviews" SortExpression="nCount" />
<asp:BoundField DataField="nScore" HeaderText="Score" SortExpression="nScore" />
</Columns>
</asp:GridView><br />
<asp:SqlDataSource ID="SqlDataSource1" Runat="server"
SelectCommand = "//Some SQL stuff" />

<cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server"
PopupControlID="GalleryPanel"
PopupDragHandleControlID="GalleryHeader"
CancelControlID="GalleryClose"
OkControlID="GalleryClose"
TargetControlID="HiddenModalTrigger"
DropShadow="true" />
<asp:Button ID="HiddenModalTrigger" runat="server" Style="display: none;" />

<asp:Panel ID="GalleryPanel" runat="server" CssClass="ModalPopup" style="display:none">
<asp:Panel id="GalleryHeader" runat="server">
<div style="width: 100%; text-align: right; background-color: #425674; border: 1px #CAD1D8;">
<asp:LinkButton ID="GalleryClose" runat="server" Layout="not set" style="font: bold 14px arial; color: White; text-decoration: none;">Close</asp:LinkButton>
</div>
</asp:Panel>
<p style="font-family: georia, serif; font-size: 20px; font-weight: bold; font-variant:small-caps; text-decoration: none; color: #B82223;">
<asp:Label ID="GalleryTitle" runat="server" Text="" />
</p>
<asp:Image ID="GalleryPic" runat="server" /><br />
<asp:Label ID="GalleryText" runat="server" Text="" /></br />
</asp:Panel>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress id="UpProg1" runat="server">
<ProgressTemplate>
<div style="width:100%; height: 50px; background-image: url(Loading.gif); background-position: center center; background-repeat:no-repeat;"></div>
</ProgressTemplate>
</asp:UpdateProgress>
</div>
</asp:content>

I can answer the FireFox question - Modal is broke with Firefox 2.0.0.2 (prev versions should work fine) MSFT and FF are supposedly working together to resolve the issue...

Your other issue is most likely how your CSS is structured...causing the scrolling... setting explicit width and height in pixels may resolve the issue. Considering this is displaying images - if the images vary in size could possibly end itself to this particular behavior...


Well, that wasn't really the news I was hoping to hear abour FF... Is there any ETA on the fix, or is it such low priority that we can wait forever?

The CSS I am using is the following, the images will be having a fixed width but variable height:


.ModalPopup
{
width: 750px;
background-color: #E6E9EC;
font-family: georia, serif;
font-size: 12px;
text-decoration: none;
text-align: left;
color: #000000;
border: 1px solid #CDDFF7;
}

I don't really see anything wrong with it other then setting no height, so I tried setting it but it still showed the same problem.

Modal Popup and Formview. first click not responding

i'm running into an issue when i put a modal popup in a formview where when i first click on the linkbutton, the modalpopup does not appear but instead it postbacks. But then on the second click and any clicks after that, the modalpopup will appear.

anyone run into this problem before and does anyone know how i could fix this issue? thanks.

My Immediate suggestion would be wrap the gridview and formview .Net UI code in a ajax Update Panel. Unless you are handling the select and the display of the FormView servser-side - it would be safe to assume that would be the default behavior. The reason I say that is until the Modal is actually invoked - its not really resident - just part of the DOM and not part of the ASP.Net page... If you tie what event you are using to invoke the formview to showing the modal using the serverside show() hide() methods - and you have that all wrapped up into a updatepanel on the UI side - you should get a seamless ModalPopUp experience... There may be better ways - but that is at least how I handle it...


http://forums.asp.net/thread/1441672.aspx might be relevant, too.

Modal Popup causing double page load

I'm having a problem where it seems that the Modal Popup is causing my pages to double load. I have a simple Master page file which just has my modal popup on it and my pages create the event handlers for the images on the modal popup. When i put a break point on page load i can clearly see that my pages are loading two times.

I'm wondering if anyone else has had this problem and if so is there a simple solution?

Thanks,
Kam

I seem to have answered my own question. I had ImageButtons inside the target panel and those were causing the page to load twice. when i set the visible to false so that they don't render on the page the page doesn't double load.

This might be a bug. Can someone else test it and see if you get the same results?

Thanks,
Kam


I also have a similar problem. I didnt understand all of your answer.

I have a modal popup with an updatepanel with 2 DDL's, 2 image buttons

and 2 text boxes..the DDL's and text boxes have theirautopostback=false

and the DDL's also havecausesvalidation=true.When I click either button,

the code behind fires twice..?? Happy to post the markup if you want..when

do you set thevisible=trueon your buttons? How does that cause a double load?

Thanks..


This can occur if the page is the default page for the application (e.g. default.aspx) and an image or imagebutton is missing the imageurl attribute.

Ok..no help for me..I'm not on the default page, and

my urls are specified..any idea why the code behind

for the 2 imagebuttons fires twice for each click?

Thanks..


Could also be due to a double up with autoeventwireup and manual wiring up of the events:http://forums.asp.net/thread/1287221.aspx

Jason:

I left a detailed response for you at the same link.

Spent the entire weekend trying to get it going by all

combinations of true & false for both the page and the control..Tongue Tied

no luck..Crying

http://forums.asp.net/thread/1287221.aspx

Thanks for your input..Cool

Modal Popup awith datagrid

I m using Button click to show Datagrid.

When Button is clicked Modal popup appears showing updating as status for 4 secs..and side by side in server side Datagrid is filled.

Now the issue is that Modal up Appears for 4 sec but Datagrid is not displayed.

Query for Fetching the data from Database is running Fine and do bind the data to Data grid but grid is not displayed.

I have update Panel where i put Button (To be clicked),Update Progress and Modal Popup

I have not put Datagrid in Update Panel.

Can this be problem??

Yes you might be right. Try by putting the DataGrid inside the UpdatePanel. And for more details can you post your code, so that it will be easy to diagnolise the problem.


Hi Varun,

In your situation, when click on the Button which is inside the UpdatePanel , it will post all the elements back to the server and returns all to the client but only refresh the content which is inside the UpdatePanel. So you should put the DataGrid inside the UpdatePanel. My suggestion is when updating shows UpdateProgress and when it finished ,we force the ModalPopupExtender to be shown.The DataGrid is moved into the Panel which is associated with ModalPopupExtender.

For example:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args){
$find("ModalPopupExtender's BehaviorID").show();

}

Best regards,

Jonathan

Modal Popup Associated With Individual GridView Rows

Hi,

I need to show a modal popup (we're trying to create a lightbox effect) for each row in a gridview. What I'd like to do is have a single popup element on the page that is populated with row specific data just prior to popping up based on the value of the selected row. I know that with the current modal popup extender I could kinda do this by adding an extender in the item template of the grid, but that would force (potentially) a whole lot of html to be generated and would also force me to populate the all the popups while databinding more "basic" information to the grid.

What I'd really like to do is only pull the data that goes into the popup when it's requested.

I realize that this is likely not possible with the current implementation of the modal popup extender, but I am wondering if anyone has thoughts about how I might go about doing this.

The one idea that I had:

1. Using the modal popup extender as a starting point, create a new extender that accepts a gridview as its target control.

2. In the behavior script, get all the tr elements (maybe ignoring all th elements) and hook up onclick, etc.

3. Add a couple of properties like JavascriptMethodToExecute that could be called using Eval() when a row is clicked, but that would execute before the popup becomes visible. (I'm thinking that this method could do the work of populating the popup). Add some other stuff like MouseOverRowCssClass, MouseOutRowCssClass for look and feel effects.

Does this seem like a reasonable approach or is there a much simpler, more obvious way to achieve the same effect?

Thanks,

Matt

This scenario will be possible with the next release of the Toolkit (and is possible today in the development releases) thanks to the addition of DynamicPopup functionality into ModalPopup. If you have a chance to try a development release, please let us know if you have any problems!


Where can you download a development release?

David Anson:

This scenario will be possible with the next release of the Toolkit (and is possible today in the development releases) thanks to the addition of DynamicPopup functionality into ModalPopup. If you have a chance to try a development release, please let us know if you have any problems!

David,

This could be valuable for me as well but I'm unsure how to implement it. Would you mind providing some detail regarding the addition of DynamicPopup functionality into ModalPopup? Are you referring to the DynamicPopulate extender? If so, I would greatly appreciate some examples on how to do this.

Thanks,

FredEH


This is now supported by the60914 release of the Toolkit. Iblogged an example yesterday.

Is there a way of doing this without using web services?

I just want to pass in gridview row values to the popup control, in this case its just a pop up panel to allow uses to edit comments.


I just got done with a project that did something similar. In the grid view row add a column with a button/linkbutton/imagebutton and add "Select" to the commandname property for that button. Then for the server side selectedindexchanged event do:

1Protected Sub GridView1_SelectedIndexChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles GridView1.SelectedIndexChanged23'Do code here to set the values from the selected row45Dim popupAs AjaxControlToolkit.ModalPopupExtender = ModalPopupExtender6If popup IsNotNothing Then7 If ReSetDefaultsThen SetDefaults(Nothing)8 popup.Show()9End If1011End Sub
This popup the modal window. Make sure that you create a button on the page for the targetcontrolid for the modal popup, and if you want to hide it make sure you user the style="display:none" NOT the awfull visible="false" property

aquilin, would you mind going into a bit more detail on how you setup your panel and how those values are populated?

I'm a bit lost. :)


I should be more specific..

I have a GridView setup the way I would like. First column is a HyperLinkField, the rest are BoundFields. I have a ModalPopupExtender and a Panel with just a bunch of Labels and a Button.

If I am to use the SelectedIndexChanged event to dynamically populate the Popup, is it as simple as grabbing the other fields in the row and setting the text property to the value?

(Currently away from the workstation right now, else I would be trying this myself. This popup problem has been bugging me for a while.)


You will need to add a select command field to the gridview which when clicked will fire off theSelectedIndexChangingevent. in this event you can access all cell information for the row like so:

Dim

rowAs GridViewRow = GridView1.Rows(e.NewSelectedIndex)

this will give you the selected row and you can get anything from any of the row cells.

if you want to get the values in a bound fields use:

modallabel1.text = row.cells(1).text

modallabel2.text = row.cells(2).text

modallabel3.text = row.cells(3).text

remember that vb.net is 0 based so the first column is index 0 and the second index 1 and so on

then use the code I posted before to open the the modal window and presto! you will see the values you want.

try this out, and if you can get it to work, I will make a demo page for you. but try it yourself... I always say the best way to learn what objects and controls do, is to screw up and then fix the problem. Cut and pasting code works, but you don't get the joy of learning :).

Hope this help, let me know if you have any more questions.

-Alan Quillin


Quick question: The GridView control is bound to a DataSet, how does the CommandField come into play there? I don't need to make any changes to the database via the GridView, this is just to access the data.

Eventually, I want to populate the GridView with data from the row (which you are helping me with greatly) and once the modal popup is closed, any input given will be used to create an entry in another table.

I imagine JavaScript will be all but required for that task, but I'll cross that bridge when I get to it.

Thanks again!


This is more of a bump with a progress update..

The ButtonField on my GridView has a CommandName property set to "Select". I have a Button set to be the TargetControl for the PopupExtender. The new question is, what do I need to do with this Button to get the event from the ButtonField to populate the Popup panel?

Thoroughly confused. :)


Nevermind, I got it to work.

Thanks. :)

Modal Popup and WebPages ?

Is there any way to show different webpages inside modal popup or there is some different way ? From different webpages I mean, based on user selection .....

You can use the Dynamic* propertied of the modalpopup to load the content dynamically via a web service. The DynamicContextKey allows you to provide context to the web method that allows you to load different content depending on the value passed in.

You could also programmatically control the display of the modalpopup by using a hidden button as the TargetControlID and calling Show() manually. This allows you to postback and load the content according to the user selection.


Can you please provide an example which I can follow ?


The easiest way I can think of, is using an iframe inside the modal popup and setting it's src before showing popup.

modal popup and validation control problem

Good day to all,

i,m currently having problems with modal popup with validation control in it. i'm currently using the modal popup for insert. but if enableclientscript of the validation control inside the modal popup is set to true, during modalpopupextender.show(), the page just freeze/hangs even the other controls in the page stops responding... can someone help me on this one?

thanks in advance,

jay

I've figured it out... I'm not sure why, but if your using a dummy button as a targetcontrol for the modal popup, it freezes/hangs if you'll set the enableclientscript of the validator inside the modal popup to true. but if u'll put the modal popup in one update panel together with the targetcontrol (not using a dummy) it will work.

modal popup and update panel

hi there, i have a login button that when it is clicked, the modal popup will trigger and was able to logon to the system. the page has two link buttons, when i click on the 2nd link, the update panel will display the items assiciated with that link, and when i click on the 1st link, the update panel will display the items associated to the 1st link, its lakie i have a tabs..the problem is, when i added the modal popup on that page, and clicked on the 2nd link, it will not display the items of that link, i mean, it will not trigger any event at all...but when i remove the modal popup extender on that link, it will toggle..what am i missing here??please help.

thank you .Smile

Can you show me some code so that I can reproduce it?

modal popup and treeview problem

Hello everyone!

I have a modal popup where OkControl is TreeView

 <cc1:ModalPopupExtender ID="BaseModalPopupExtender" runat="server" CancelControlID="CancelButton" DropShadow="true" OkControlID="CourseFSTreeView" OnCancelScript="onCancel()" OnOkScript="onOk()" PopupControlID="BaseCoursePanel" PopupDragHandleControlID="BaseCoursePanelHeader" TargetControlID="dummy1"> </cc1:ModalPopupExtender>

So, when I select one of it's nodes OnOkCript is fired. And within it I need to retrieve a name of selected node. I can find the treeview control, but what to do next I don't know.

function onOk() { var tvResult = document.getElementById('<%=CourseFSTreeView.ClientID%>'); window.alert (tvResult.uniqueNumber);}

I've also noticed, that each node has unique value of property uniqueNumber. May be it is possible to use it in order to find node name?

Any help is appreciated... Thanks in advance!

No suggestions?


Hi Wazzzuup,

As we know, TreeView control has no corresponding object Modal on client side ,so it is a hard way to implement what you want. However , my solution is use a UpdatePanel. When click, the UpdatePanel will post an asynchronous postback automatically. So we can get the text easily on the server side. Here is the sample.

<%@. Page Language="C#" %><!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 CourseFSTreeView_SelectedNodeChanged(object sender, EventArgs e) { TextBox1.Text = CourseFSTreeView.SelectedNode.Text; }</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title> <style> .modalBackground { background-color:Gray; filter:alpha(opacity=70); opacity:0.7; } .modalPopup { background-color:#FFD9D5; border-width:3px; border-style:solid; border-color:Gray; padding:3px; width:250px; } </style></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none"> <asp:UpdatePanel ID="UpdatePanel1" runat="server"> <ContentTemplate> <asp:TreeView ID="CourseFSTreeView" runat="server" OnSelectedNodeChanged="CourseFSTreeView_SelectedNodeChanged"> <Nodes> <asp:TreeNode Text="My Computer"> <asp:TreeNode Text="Favorites"> <asp:TreeNode Text="News"> <asp:TreeNode Text="MSN" /> <asp:TreeNode Text="MSNBC News" /> </asp:TreeNode> <asp:TreeNode Text="Technology"> <asp:TreeNode Text="Microsoft" /> <asp:TreeNode Text="ASP.NET" /> <asp:TreeNode Text="GotDotNet" /> <asp:TreeNode Text="MSDN" /> </asp:TreeNode> <asp:TreeNode Text="Shopping"> <asp:TreeNode Text="MSN Shopping" /> <asp:TreeNode Text="MSN Autos" /> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="City Links"> <asp:TreeNode Text="MapPoint" /> <asp:TreeNode Text="MSN City Guides" /> </asp:TreeNode> <asp:TreeNode Text="Music Links"> <asp:TreeNode Text="MSN Music" /> </asp:TreeNode> </asp:TreeNode> </Nodes> </asp:TreeView> <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> </ContentTemplate> </asp:UpdatePanel> <asp:Button ID="Button2" runat="server" Text="Cancel" /> </asp:Panel> <asp:Button ID="Button1" runat="server" Text="Button" /><ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" BehaviorID="myMPE1" runat="server" TargetControlID="Button1" PopupControlID="Panel1" CancelControlID="Button2" BackgroundCssClass="modalBackground"> </ajaxToolkit:ModalPopupExtender> <script type="text/javascript" language="javascript"> Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler); function EndRequestHandler(sender, args){ alert($get("<%=TextBox1.ClientID%>").value); $find("myMPE1").hide(); } </script> </form></body></html>

We suggest that you wholly copy my source code and have a test.

I hope this help.

Best regards,

Jonathan


Hi there..

Just a few weeks ago, I tried to do the exact same thing, and well blah blah, here is a simple workaround:

you can put an iframe (with no borders, no margins, etc whatever fits your needs) inside the modal popup panel and have your treeview inside that.


Thank you very much! It works!

I only wanted to know more about this call:

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

what does it mean? I would appreciate if You give me reference to article(s) describing this and similar methods and and their use. And also I'm asking You to check following thread of mine connected with TreeView. Thanks!


Hi Wazzzuup,

This sentence will make Javascript function "EndRequestHandler" be called when the asynchronous postback is finished. For more details, please visithere.

Best regards,

Jonathan


Hello Again!

I'm facing the next problem now connected with issue of this topic:

I've placed additional updatepanels object on this page and now the code in EndRequestHandler function fires after asynchronus postback of every update panel, not only of that is connected with my treeview. That is logically right. But I need to execute this code only after particular updatepanel postback. How could I do this? Is it possible to check, what updatepanel sended asynchronous postback? and do something like this

<scripttype="text/javascript"language="javascript">

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(EndRequestHandler);

function EndRequestHandler(sender, args){

if (postback caused by UpdatePanel1)

{

execute my code

}

}

I've ran through properties of sender and args objects and didn't find what I need.


Hi Wazzzuup,

function EndRequestHandler(sender, args){
var requestStr = args._response._webRequest._body;

if (requestStr.indexOf("UpdatePanel1")>-1 ){ //UpdatePanel }
}

I hope this help.

Best regards,

Jonathan


Cool, it works!!!Smile And I would never found out this by myself, because of these properties that you use are not saying for themselves. Could you again refer me to some kind of theory that describes what is going on in this code? I just want to understand more clearly this "asynchronous" stuff...


Hi Wazzzuup,

What I do is that add debugger to the code like this.

function EndRequestHandler(sender, args){
var requestStr = args._response._webRequest._body;

debugger;

if (requestStr.indexOf("UpdatePanel1")>-1 ){ //UpdatePanel }
}

Now you can find out all the properties and functions of args with the help of Visual Studio.

I hope this help.

Best regards,

Jonathan


I know this trick with JS debugger and do this always too at first, before asking on the forum. But I mean, that this solution is hard to find even in debugger, because it is hidden so deep (third level) and moreover - in hierarchy of objects (._response._webRequest._body) whatching on that is hard to suppose that thay could be responsible for information I need. Thus, I want to say that this solution could be offered by one, who understands this technology well and asking (if it possible) some sources that covers this question.

Modal Popup Disable Background

I have a modalpopup for viewing some labels and buttons. But when i show modalpopup, background will not be disabled in IE 7 (it works for Firefox 2.0.0.3) . I looked at the codes in

( http://ajax.asp.net/ajaxtoolkit/ModalPopup/ModalPopup.aspx ), but it has <atlas tags, not <asp tags.

Any idea?

Regards..

if you use the default css classes which are also used in the ajaxcontroltoolkit samplewebsite the background will be disabled in FF, IE6 and IE7.


Of course i tried it before writing here. But it did not work.

Regards..

Modal Popup Delete Help.

Im working on a gridview that`ll delete a row of data. Currently the gridview shows the data, and i have a linkbutton at the other end of the gridviews template field. When you click the linkbutton the modalpopup appears and it has two buttons "cancel" and "ok". Cancel makes it disappear, and ok, doesnt do its job lol. I have a foreach code that deletes all the entries to the gridview but i cant work out what the individual row delete code would be! my gridview code is :

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataSourceID="Admin" BorderStyle="Dotted" BorderWidth="0px" ShowHeader="False" DataKeyNames="UserID">
<Columns>
<asp:TemplateField>
<ItemTemplate>
<asp:Panel ID="Admin" runat="server" >

<table width="630">
<tr>
<td width="460">
<div align="left">
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl='<%# Eval("UserID", "~/Profile.aspx?id={0}") %>' Text='<%# Eval("FullName") %>' Font-Names="Tahoma" Font-Size="10pt" ForeColor="SteelBlue"></asp:HyperLink>
</div>
</td>
<td>
<div align="right">
<asp:LinkButton ID="LinkButton7" runat="server" Font-Names="Tahoma" Font-Size="8pt" ForeColor="SteelBlue" OnClick="LinkButton7_Click">Remove</asp:LinkButton>
</div>
</td>
</tr>
</table>
<hr />
<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender5" TargetControlID="LinkButton7" CancelControlID="Button10" PopupControlID="Panel5" runat="server" BackgroundCssClass="modalBackground">
</ajaxToolkit:ModalPopupExtender>
<asp:Label ID="Label17" Visible="false" runat="server"></asp:Label>
<asp:Panel ID="Panel5" runat="server" Width="300px" BackColor="IndianRed">
<asp:Label ID="Label18" runat="server" Text="Are you sure you want to delete this person?"></asp:Label><asp:Label ID="Label19" runat="server"></asp:Label>
<table>
<tr>
<td>
<asp:Button ID="Button9" runat="server" OnClick="LinkButton9_Click" Text="Confirm" />
</td>
<td>
<asp:Button ID="Button10" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</asp:Panel>
</asp:Panel>
</ItemTemplate>
</asp:TemplateField>
</Columns>
<EmptyDataTemplate>
Nothing...

</EmptyDataTemplate>
</asp:GridView>

Currently when the linkbutton9 is clicked... it loop though all of the records and deletes them can someone help me with a code that deletes the unique ID in the list of users "UserIDNumber" thanks in advance! si!

Hiblink18jew,

You don't need to loop though all of the records to find out the record that you want to delete.

Just change:

<asp:Button ID="Button9" runat="server" OnClick="LinkButton9_Click" Text="Confirm" />

to:

<asp:Button ID="Button9" runat="server" OnCommand="LinkButton9_Command" CommandArgument='<%# Eval("UserID", "{0}") %>' Text="Confirm" />

C# code:

protected void LinkButton9_Command(object sender, CommandEventArgs e)
{
// delete the person whoes UserID is e.CommandArgument
}

Best Regards

Modal Popup Delete

Hey, I have a gridview with a linkbutton "delete". I made this originally with a rowcommand that deleted the item associated with that row. I am now implementing a modal pop-up to confirm deleteing the row of data. The pop-upworks fine, and appears when i click the linkbutton ( note the link button now has no "onclick" event ) the popup panel has two buttons inside it button1 and button2, 1 = confirm, 2 = cancel.

I set the CommandArguement of button1 to the ID of the item, and the CommandName to "DeleteMe". The command_row event is :

protected void GridView6_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "DeleteMe")
{
SqlCommand DeleteIt = new SqlCommand("DELETE FROM Items WHERE ItemD = '" + e.CommandArgument + "'", Connection);
Connection.Open();
DeleteIt.ExecuteNonQuery();
Connection.Close();
GridView6.DataBind();
}
}

When the user clicks button1 nothing happens.. im a little bit confused as to why, can anyone help? i assumed as the ajax extender is within the gridview row it would just continue to be a row command? if im way off can someone please let me know, thanks a million John

does anyone have an ideas? sorry to be a bit pushy but its driving me insane! lol, Ive done some random google searches and in the forums and i couldnt find anything, thanks John

Modal Popup creation problem

I have a project that has several asp .net AJAX controls including a Tab Panel extender, a couple of updatepanels, and a modalpopup. Everything was doing OK (except for the tab panel that keeps disappering on hover over) until I added the modal popup. The page will load but I noticed that I was getting an "Done, but with errors on page" warning and the calendar that sets everything in motion didn't work.

It appears that the modalpopup isn't being created properly at runtime. I see this error message when I follow the error message in Firefox (Firebug):

this._popupElement has no properties
http://mycomputer/mysite/ScriptResource.axd?d=SpCqOYElt5QoLvf_3bBsv_BcFBS3DknA98So9KH3qtFJpwGddMmhi5Fqd8Ekf5Yggy7J5Sw9EaHCqlfKI150bSF4O1S83qGJROU-7k6SGQc1&t=633121015687656250
Line 66

Which further expands to:

initialize()ScriptResource.ax... (line 66)

Sys$Component$endUpdate()ScriptResource.ax... (line 2702)

Sys$Component$create(function(),Object BackgroundCssClass=modal CancelControlID=btnClose,null,null,input#Trigger)ScriptResource.ax... (line 2856)

(no name)()livereports.aspx (line 217)

_handler(Object _disposableObjects=[4] _components=Object,Object)ScriptResource.ax... (line 2503)

Sys$_Application$_doInitialize()ScriptResource.ax... (line 3792)

(no name)()

Why isn't there a comma between Object BackgroundCssClass=modal & CancelControlID=btnClose? Where are all of the properties that I set? This is how the modalpopupextender is set up in my project:

I am totally lost since I don't see much difference in the source code between mine and the AJAX samples function:

Mine:

Sys.Application.add_init(function() {

217 $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modal","CancelControlID":"btnClose","DropShadow":true,"DynamicServicePath":"/scmghd/livereports.aspx","OkControlID":"btnClose","PopupControlID":"gvResults","PopupDragHandleControlID":"pnl1","id":"ModalPopupExtender2"}, null, null, $get("HiddenModalTrigger"));

218});

AJAX Sample:

Sys.Application.add_init(function() {

314 $create(AjaxControlToolkit.ModalPopupBehavior, {"BackgroundCssClass":"modalBackground","CancelControlID":"ctl00_SampleContent_CancelButton","DropShadow":true,"OkControlID":"ctl00_SampleContent_OkButton","OnOkScript":"onOk()","PopupControlID":"ctl00_SampleContent_Panel1","PopupDragHandleControlID":"ctl00_SampleContent_Panel3","dynamicServicePath":"/AJAX/AjaxControlToolkit/Samples/ModalPopup/ModalPopup.aspx","id":"ctl00_SampleContent_ModalPopupExtender"}, null, null, $get("ctl00_SampleContent_LinkButton1"));

315});

This is the way I have the modalpopup set in Visual Web Dev:

<cc1:ModalPopupExtenderID="ModalPopupExtender2"runat="server"BackgroundCssClass="modal"TargetControlID="Trigger"PopupDragHandleControlID="pnl1"PopupControlID="gvResults"CancelControlID="btnClose"OkControlID="btnClose"DropShadow=true>

</cc1:ModalPopupExtender>

Again any help is appreciated!

I hate to be a bother but this project is very important...any help would greatly be appreciated.

Thanks

Modal PopUp control needs dynamic data on button click

greetings,

Have a modal popup control as follows:

<

cc1:ModalPopupProperties
TargetControlID="lb_verify"
PopupControlID="P_popup"
BackgroundCssClass="modalBackground"
DropShadow="true"
OkControlID="lb_ok1"
OnOkScript="onOk()"
CancelControlID="lb_cancel1"/>
</cc1:ModalPopupExtender>

What I'm trying to do is to populate a gridview full of options (that is on the p_popup panel) when the user clicks the lb_verify link button. This gridview will be populated based on a textbox entry, so it's dynamic.

When I try to do this on the lb_verify.click action, the sub does not fire... only the popup modal...

Following is my lb_verify sub just in case that will help...

Protected

Sub lb_verify_Click(ByVal senderAsObject,ByVal eAs System.EventArgs)Handles lb_verify.Click
Dim AVAs AddressVerification =New AddressVerification
Dim APAs AddressProperties =New AddressProperties
With AP
.address1 = tb_address1.Text
.city = tb_city.Text
.state = tb_state.Text
.zip = tb_zip.Text
EndWith
Dim resultAsString = AV.AddressVerified(AP)
SelectCase result
Case"M"
L_msg.Text ="modal popup / pick from grid"
gv_verify.DataSource = AV.GetAddressAlternates(AP)
gv_verify.DataBind()
CaseElse
L_msg.Text = result
EndSelect
EndSub

Let me know and thanks.

Rock

This sounds like work item 207 which is not yet implemented.

Modal Popup Challenge.

The challenge.

I've been working on the following problem for about a week. I have a multiview with six views. I need to make a popup for date fields. Each view may have one or more date fields. The popup must open from a mouse click on an image control. I would like to have only one calendar control in the HTML. It can be done with either the Popup or Modal Popup Atlas controls. If you use a Popup control you must add a "Cancel" button so you can return no date. The screen can not flicker or take for ever once you have selected a date from the date control.

What I've learned.

One: You must put thePopupControlExtender or ModalPopupExtender inside the view that holds the TargetControlID. If not you will get an error on the first view because it can not fine the TargetControlID on the other views that are not active (showing). One side effect of putting these controls inside of a view is that you can no longer see you html in the Design mode. You get the following "Error Rendering Control – Mulitiview. An unhandled exception has occurred." Even with this error in Design mode everthing compiles and seems to run OK. The Following are the examples that I used.

<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">

<atlasToolkit:PopupControlProperties

TargetControlID="TextBox_CUS_DATE_OF_BIRTH"

PopupControlID="Panel1"

Position="Bottom" />

</atlasToolkit:PopupControlExtender>

<atlasToolkit:ModalPopupExtender ID="ModalPopupExtender" runat="server">

<atlasToolkit:ModalPopupProperties

TargetControlID="ImageButton_CUS_DATE_OF_BIRTH"

PopupControlID="Panel1"

BackgroundCssClass="modalBackground"

DropShadow="true"

OkControlID="OkButton"

OnOkNormalSubmit="false"

OnOkScript="onOk()"

CancelControlID="CancelButton"

OnCancelScript="onCancel()" />

</atlasToolkit:ModalPopupExtender>

Two: To get the popup to work off the mouse click of an image you need to set the onClientClick="return false;". Example:

<asp:ImageButton ID="ImageButton_CUS_DATE_OF_BIRTH" runat="server" ImageUrl="~/Images/Calendar.jpg" CssClass="imageButton" OnClientClick="return false;" />

Three: Examples of the Calendars used for both Popup and Modal Popup.

<asp:Panel ID="Panel1" runat="server" CssClass="modalPopup" Style="display: none">

<atlas:UpdatePanel ID="UpdatePanel1" runat="server"

EnableViewState="true" Mode="always">

<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">

<SelectedDayStyle BackColor="#666666"

Font-Bold="True" ForeColor="White" />

<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black"/>

<SelectorStyle BackColor="#CCCCCC" />

<WeekendDayStyle BackColor="#FFFFCC" />

<OtherMonthDayStyle ForeColor="#808080" />

<NextPrevStyle VerticalAlign="Bottom" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True"

Font-Size="7pt" />

<TitleStyle BackColor="#999999" BorderColor="Black"

Font-Bold="True" />

</asp:Calendar>

<asp:Button ID="OkButton" runat="server" Text="OK">

</asp:Button>

<asp:Button ID="CancelButton" runat="server"

Text="Cancel"></asp:Button>

</center>

</ContentTemplate>

</atlas:UpdatePanel>

</asp:Panel>

<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" >

<SelectedDayStyle BackColor="#666666" Font-Bold="True"

ForeColor="White" />

<TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" />

<SelectorStyle BackColor="#CCCCCC" />

<WeekendDayStyle BackColor="#FFFFCC" />

<OtherMonthDayStyle ForeColor="#808080" />

<NextPrevStyle VerticalAlign="Bottom" />

<DayHeaderStyle BackColor="#CCCCCC" Font-Bold="True"

Font-Size="7pt" />

<TitleStyle BackColor="#999999" BorderColor="Black"

Font-Bold="True" />

</asp:Calendar>

<asp:Button ID="Button1" runat="server" Text="Cancel"

OnClick="Button1_Click" />

</center>

</ContentTemplate>

</atlas:UpdatePanel>

</asp:Panel>

Four: This is my code behind examples for both Popup and Modal Popup.

Code for Modal Popup.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Calendar cTemp = (Calendar)sender;

TextBox_CUS_DATE_OF_BIRTH.Text = cTemp.SelectedDate.ToShortDateString();

}

Code for Popup.

protected void Calendar1_SelectionChanged(object sender, EventArgs e)

{

Calendar cTemp = (Calendar)sender;

PopupControlExtender.GetCurrent(this.Page).Commit (cTemp.SelectedDate.ToShortDateString());

}

Final results.

Popup control: When I try to use a Popup control everthing works until I try to click on a date in the calendar control. It returns nothing back to the TextBox.

Modal Popup control: When I try to use a Modal Popup control everthing works until I try to click on a date in the calendar control. Itdoes return a date back to the TextBox, but only the Dropdownlist boxes become active. Everything else is still grayed out.

If you have an ideas on why this will not work or an example of this working please post it. Thanks.

Could you please post a complete sample page (simplified as much as possible)? We'd love to look into this.

Here is a simple example that I created using a Modal Popup. You can replace the Modal Popup with just the Popup control and it fails at the same spot.

<%

@.PageCodeFile="ExampleModal.aspx.cs"AutoEventWireup="true"EnableViewState="true"Inherits="ExampleModal"Language="C#" %>

<%

@.RegisterAssembly="AtlasControlToolkit"Namespace="AtlasControlToolkit"TagPrefix="atlasToolkit" %>

<!

DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<

htmlxmlns="http://www.w3.org/1999/xhtml">

<

headrunat="server"><title>Customers</title>

</

head>

<

body><formid="formExampleModal"runat="server"><atlas:ScriptManagerID="ScriptMgr"runat="server"EnablePartialRendering="true"></atlas:ScriptManager><atlas:UpdatePanelID="UpdatePanelMain"runat="server"Mode="always"><ContentTemplate><divid="divPage"><tableid="TableMenu"width="100%"><tr><tdcolspan="10"><asp:MenuID="MenuTab"runat="server"Orientation="Horizontal"OnMenuItemClick="MenuTab_MenuItemClick"><Items><asp:MenuItemText="View one"Value="0"></asp:MenuItem><asp:MenuItemText="View two"Value="1"></asp:MenuItem></Items></asp:Menu></td></tr><tr><td><asp:MultiViewID="MultiViewCustomer"runat="server"><asp:ViewID="View1"runat="server"><tablestyle="width: 100%;"><tr><tdalign="right"><asp:LabelID="Label1"runat="server"EnableViewState="False"TabIndex="-1"Text="Textbox Date"></asp:Label></td><tdalign="left"><asp:TextBoxID="TextBox1"runat="server"Width="100px"TabIndex="1"></asp:TextBox></td><tdalign="left"><asp:ImageButtonID="ImageButton1"runat="server"ImageUrl="~/Images/Calendar.jpg"OnClientClick="return false;"/></td><tdalign="right"><asp:LabelID="Label2"runat="server"EnableViewState="False"TabIndex="-1"Text="Test Dropdown"></asp:Label></td><tdalign="left"><asp:DropDownListID="DropDownList1"runat="server"TabIndex="2"Width="100px"></asp:DropDownList></td></tr></table><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender1"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="ImageButton1"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"OnCancelScript="onCancel()"/></atlasToolkit:ModalPopupExtender></asp:View><asp:ViewID="View2"runat="server"><tablestyle="width: 100%;"><tr><tdalign="right"><asp:LabelID="Label3"runat="server"EnableViewState="False"TabIndex="-1"Text="Textbox Date"></asp:Label></td><tdalign="left"><asp:TextBoxID="TextBox3"runat="server"Width="100px"TabIndex="1"></asp:TextBox></td><tdalign="left"><asp:ImageButtonID="ImageButton2"runat="server"ImageUrl="~/Images/Calendar.jpg"OnClientClick="return false;"/></td><tdalign="right"><asp:LabelID="Label4"runat="server"EnableViewState="False"TabIndex="-1"Text="Test Dropdown"></asp:Label></td><tdalign="left"><asp:DropDownListID="DropDownList2"runat="server"TabIndex="2"Width="100px"></asp:DropDownList></td></tr></table><atlasToolkit:ModalPopupExtenderID="ModalPopupExtender2"runat="server"><atlasToolkit:ModalPopupPropertiesTargetControlID="ImageButton2"PopupControlID="Panel1"BackgroundCssClass="modalBackground"DropShadow="true"OkControlID="OkButton"OnOkScript="onOk()"CancelControlID="CancelButton"OnCancelScript="onCancel()"/></atlasToolkit:ModalPopupExtender></asp:View></asp:MultiView></td></tr></table></div></ContentTemplate></atlas:UpdatePanel><asp:PanelID="Panel1"runat="server"Style="display: none"><atlas:UpdatePanelID="UpdatePanel1"runat="server"EnableViewState="true"Mode="always"><ContentTemplate><center><asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"ForeColor="Black"Width="160px"OnSelectionChanged="Calendar1_SelectionChanged"><SelectedDayStyleBackColor="#666666"Font-Bold="True"ForeColor="White"/><TodayDayStyleBackColor="#CCCCCC"ForeColor="Black"/><SelectorStyleBackColor="#CCCCCC"/><WeekendDayStyleBackColor="#FFFFCC"/><OtherMonthDayStyleForeColor="#808080"/><NextPrevStyleVerticalAlign="Bottom"/><DayHeaderStyleBackColor="#CCCCCC"Font-Bold="True"Font-Size="7pt"/><TitleStyleBackColor="#999999"BorderColor="Black"Font-Bold="True"/></asp:Calendar><asp:ButtonID="OkButton"runat="server"Text="OK"></asp:Button><asp:ButtonID="CancelButton"runat="server"Text="Cancel"></asp:Button></center></ContentTemplate></atlas:UpdatePanel></asp:Panel></form><scripttype="text/javascript">function onOk()

{

}

function onCancel()

{

}

</script>

</

body>

</

html>

using

System;

using

System.Data;

using

System.Configuration;

using

System.Collections;

using

System.Web;

using

System.Web.Security;

using

System.Web.UI;

using

System.Web.UI.WebControls;

using

System.Web.UI.WebControls.WebParts;

using

System.Web.UI.HtmlControls;

using

AtlasControlToolkit;

public

partialclassExampleModal : System.Web.UI.Page

{

public ExampleModal()

{

Page.Load +=

newEventHandler(Page_Load);

}

protectedoverridevoid OnInit(EventArgs e)

{

base.OnInit(e);

}

protectedvoid Page_Load(object sender,EventArgs e)

{

if (!IsPostBack)

{

MultiViewCustomer.ActiveViewIndex = 0;

MenuTab.Items[0].Selected =

true;

}

}

protectedvoid MenuTab_MenuItemClick(object sender,MenuEventArgs e)

{

MultiViewCustomer.ActiveViewIndex =

Int32.Parse(e.Item.Value);

}

protectedvoid Calendar1_SelectionChanged(object sender,EventArgs e)

{

Calendar cTemp = (Calendar)sender;

TextBox1.Text = cTemp.SelectedDate.ToShortDateString();

TextBox3.Text = cTemp.SelectedDate.ToShortDateString();

}

}

/*Modal Popup*/

.modalBackground

{background-color:Gray;filter:alpha(opacity=70);opacity:0.7;

}

.modalPopup

{background-color:#ffffdd;border-width:3px;border-style:solid;border-color:Gray;padding:3px;

}

Once again any help would be great. If you need anything else let me know.


I'm not sure I've captured all your requirements, but please have a look at the page below as I believe it does what you're asking for.

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using AtlasControlToolkit;public partialclass ExampleModal : System.Web.UI.Page{public ExampleModal() { Page.Load +=new EventHandler(Page_Load); }protected void Page_Load(object sender, EventArgs e) {if (!IsPostBack) { MultiViewCustomer.ActiveViewIndex = 0; MenuTab.Items[0].Selected =true; } }protected void MenuTab_MenuItemClick(object sender, MenuEventArgs e) { MultiViewCustomer.ActiveViewIndex = Int32.Parse(e.Item.Value); }protected void Calendar1_SelectionChanged(object sender, EventArgs e) { Calendar cTemp = (Calendar)sender; TextBox1.Text = cTemp.SelectedDate.ToShortDateString(); TextBox3.Text = cTemp.SelectedDate.ToShortDateString(); PopupControlExtender.GetCurrent(Page).Commit(Calendar1.SelectedDate.ToShortDateString()); }}
<%@. Page CodeFile="Default10.aspx.cs" AutoEventWireup="true" EnableViewState="true" Inherits="ExampleModal" Language="C#" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %><!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>Customers</title> <style type="text/css">/*Modal Popup*/.modalBackground{ background-color:Gray; filter:alpha(opacity=70); opacity:0.7; }.modalPopup{ background-color:#ffffdd; border-width:3px; border-style:solid; border-color:Gray; padding:3px; }</style></head><body> <form id="formExampleModal" runat="server"> <atlas:ScriptManager ID="ScriptMgr" runat="server" EnablePartialRendering="true"> </atlas:ScriptManager><%-- <atlas:UpdatePanel ID="UpdatePanelMain" runat="server" Mode="always"> <ContentTemplate>--%> <div id="divPage"> <table id="TableMenu" width="100%"> <tr> <td colspan="10"> <asp:Menu ID="MenuTab" runat="server" Orientation="Horizontal" OnMenuItemClick="MenuTab_MenuItemClick"> <Items> <asp:MenuItem Text="View one" Value="0"></asp:MenuItem> <asp:MenuItem Text="View two" Value="1"></asp:MenuItem> </Items> </asp:Menu> </td> </tr> <tr> <td> <asp:MultiView ID="MultiViewCustomer" runat="server"> <asp:View ID="View1" runat="server"> <table style="width: 100%;"> <tr> <td align="right"> <asp:Label ID="Label1" runat="server" EnableViewState="False" TabIndex="-1" Text="Textbox Date"></asp:Label> </td> <td align="left"> <asp:TextBox ID="TextBox1" runat="server" Width="100px" TabIndex="1"></asp:TextBox> </td> <td align="left"> <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/atlas_title.jpg" OnClientClick="return false;" /> </td> <td align="right"> <asp:Label ID="Label2" runat="server" EnableViewState="False" TabIndex="-1" Text="Test Dropdown"></asp:Label> </td> <td align="left"> <asp:DropDownList ID="DropDownList1" runat="server" TabIndex="2" Width="100px"> </asp:DropDownList> </td> </tr> </table> <atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="ImageButton1" PopupControlID="Panel1" CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;" /> </atlasToolkit:PopupControlExtender> </asp:View> <asp:View ID="View2" runat="server"> <table style="width: 100%;"> <tr> <td align="right"> <asp:Label ID="Label3" runat="server" EnableViewState="False" TabIndex="-1" Text="Textbox Date"></asp:Label> </td> <td align="left"> <asp:TextBox ID="TextBox3" runat="server" Width="100px" TabIndex="1"></asp:TextBox> </td> <td align="left"> <asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/atlas_title.jpg" OnClientClick="return false;" /> </td> <td align="right"> <asp:Label ID="Label4" runat="server" EnableViewState="False" TabIndex="-1" Text="Test Dropdown"></asp:Label> </td> <td align="left"> <asp:DropDownList ID="DropDownList2" runat="server" TabIndex="2" Width="100px"> </asp:DropDownList> </td> </tr> </table> <atlasToolkit:PopupControlExtender ID="PopupControlExtender2" runat="server"> <atlasToolkit:PopupControlProperties TargetControlID="ImageButton2" PopupControlID="Panel1" CommitProperty="commit" CommitScript="$('TextBox3').value = $('ImageButton2').commit;" /> </atlasToolkit:PopupControlExtender> </asp:View> </asp:MultiView> </td> </tr> </table> </div><%-- </ContentTemplate> </atlas:UpdatePanel>--%> <asp:Panel ID="Panel1" runat="server" Style="display: none; background-color:Gray"> <atlas:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true" Mode="always"> <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"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <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> </form></body></html>

This has a couple of issues.

1). Can not change month without calendar disappearing.

2). Loses focus. I can set focus in code behind but if you selected the image a second time focus can not be set. This is not good for an entry screen.

Other notes:

This code never gets executed or does not work.

CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;"

and

PopupControlExtender.GetCurrent(Page).Commit(Calendar1.SelectedDate.ToShortDateString());

You can remove these lines and get the same results. These lines of code only seems to work if the PopupControlExtender is nested inside of the panel that is referencing, like this...

<asp:PanelID="Panel1"runat="server"CssClass="popupControl">

<atlas:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
<atlasToolkit:PopupControlProperties TargetControlID="ImageButton1" PopupControlID="Panel1"
CommitProperty="commit" CommitScript="$('TextBox1').value = $('ImageButton1').commit;" />
</atlasToolkit:PopupControlExtender>
<center>

<asp:CalendarID="Calendar1"runat="server"BackColor="White"BorderColor="#999999"CellPadding="1"DayNameFormat="Shortest"Font-Names="Verdana"Font-Size="8pt"

etc...

The text value is being set by this code in the code behind.

Calendar cTemp = (Calendar)sender;
TextBox1.Text = cTemp.SelectedDate.ToShortDateString();
TextBox3.Text = cTemp.SelectedDate.ToShortDateString();

To make this work I would have to have a calendar control like this for input field that is a date. This wold not be good. I have one screen that uses multiviews and that have thirty plus dates on it.

Either way I still will have problem of changing months.

If I'm not correct in what I say, please let me know for I have just started working with Atlas.


I think maybe something went weird when you tried to copy the code/codebehind I posted? You report that you can't change months without the calendar disappearing, but that works fine for me with the modifications I made.

If I remove the lines of code that you suggest in the HTML then every time you move between views the mulitview disappears for about two-three seconds. This why I started using Atlas, to avoid the screen redrawing all the time. Is this my only choice?

////The lines that I would need to remove...////
<atlas:UpdatePanel ID="UpdatePanelMain" runat="server" Mode="always">
<ContentTemplate>


Untilwork item 711 is fixed, that may be your best option. However, I'll note that switching to debug=false in your web.config should speed things up - perhaps enough that this is tolerable?


David, thanks for your help. I will go forward using the popup and I will keep checking on item 711.

just found this thread. I am trying to do something similar only my popup does not NEED to be modal and I am working with master pages.

However I cannot get the calendar click event to write to the textbox. I have copied the example provided above !! Any ideas anyone ?


ps i have changeset 5220 so the fix for 711 is in my version of atlas !!
Could you please post a simple, complete sample of what you're trying to do that's not working with the 60914 release? Thanks.

Hello David, thanks for replying. Sorry for not posting sooner... i have been away for the weekend.

I attach part of my code. I am using a master page... there are two date "popup" controls here. One attempts to use the click of an image button to popup the calendar and then pass the selected to a text box. One just uses the standard example supplied with atlas (textbox gets focus, popup calendar displays, select date..date goes into text box).

the one that uses the image button pops up the calendar ok but when the date is selected an error occurrs on the page i think an object is not getting set somewhere. the one that uses the standard example supplied with atlas works fine but itsnt really what i want as i want the user to be able to type a date OR pop up a calendar.

incidentally i am using july ctp release (only just noticed that there was a september release when i looked for 60914 based on your comment above). Do i need to un-install atlas and do a clean install from the september ctp or will it update everything correctly if i just install septembers "on top" of july's ?)

Here is an extract of apx code:

<%@. Page Language="C#" MasterPageFile="~/JSAACMaster.master" AutoEventWireup="true" CodeFile="ExistingCustomer.aspx.cs" Inherits="ExistingCustomer" Title="Existing Customer" %><%@. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="AtlasControlToolkit" %><%@. MasterType VirtualPath="~/JSAACMaster.master" %><asp:Content ID="Content1" ContentPlaceHolderID="cphMain" Runat="Server"><!-- GC Update panels need a script manager control to function correctly...atlas uses javascript to function --><atlas:ScriptManager ID="ScriptManager1" EnablePartialRendering="true" runat="server"></atlas:ScriptManager><AtlasControlToolkit:PopupControlExtender ID="pcePopUpDates" runat="server"> <AtlasControlToolkit:PopupControlProperties TargetControlID="imbReqDateCalendar" PopupControlID="Panel1" ExtenderControlID="pcePopUpDates" PageRequestManagerID="_PageRequestManager" CommitProperty="commit" CommitScript="$('txtReqDate').value = $('imbReqDateCalendar').commit;"/> <AtlasControlToolkit:PopupControlPropertiesTargetControlID="txtPostDate"PopupControlID="Panel2"Position="Bottom"ExtenderControlID="pcePopUpDates"PageRequestManagerID="_PageRequestManager" /></AtlasControlToolkit:PopupControlExtender><table style="width: 1139px; height: 232px; padding-right: 25px; padding-left: 25px; padding-bottom: 25px; margin: 25px; padding-top: 25px; vertical-align: middle; text-align: left;"> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> UTN:<br /> <asp:TextBox ID="txtUTN" runat="server" Width="148px"></asp:TextBox><asp:RequiredFieldValidator ID="rfvUTN" runat="server" ErrorMessage="UTN field must be completed" ControlToValidate="txtUTN" Height="6px" Width="1px">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> TITLE:<br /> <asp:TextBox ID="txtTitle" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvTitle" runat="server" ErrorMessage="Title field must be completed" ControlToValidate="txtTitle">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> RANK:<br /> <asp:TextBox ID="txtRank" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvRank" runat="server" ErrorMessage="Rank field must be completed" ControlToValidate="txtRank">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> SURNAME:<br /> <asp:TextBox ID="txtSurname" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvSurname" runat="server" ErrorMessage="Surname field must be completed" ControlToValidate="txtSurname">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> SERVICE NUMBER:<br /> <asp:TextBox ID="txtServNo" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvServNo" runat="server" ErrorMessage="Service No field must be completed" ControlToValidate="txtServNo">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> INITIALS:<br /> <asp:TextBox ID="txtInits" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvInits" runat="server" ErrorMessage="Initials field must be completed" ControlToValidate="txtInits">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> UIN:<br /> <asp:TextBox ID="txtUIN" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvUIN" runat="server" ErrorMessage="UIN field must be completed" ControlToValidate="txtUIN">*</asp:RequiredFieldValidator> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> ALPHA CODE:<br /> <asp:DropDownList ID="ddlAlpha" runat="server" Width="154px"></asp:DropDownList><asp:RequiredFieldValidator ID="rfvAlpha" runat="server" ErrorMessage="Alpha Code field must be completed" ControlToValidate="ddlAlpha">*</asp:RequiredFieldValidator> </td> </tr> <tr> <td style="width: 594px; vertical-align: top; text-align: left; font-weight: bold; text-transform: uppercase;"> REQUIRED DATE:<br /> <asp:TextBox ID="txtReqDate" runat="server"></asp:TextBox><asp:ImageButton ID="imbReqDateCalendar" runat="server" OnClientClick="return false;" ImageUrl="~/images/calendar.gif" /><asp:RequiredFieldValidator ID="rfvReqDate" runat="server" ControlToValidate="txtReqDate" ErrorMessage="Required Date field must be completed">*</asp:RequiredFieldValidator> <asp:CustomValidator ID="CustomValidator1" runat="server" ControlToValidate="txtReqDate" ErrorMessage="Invalid Date"></asp:CustomValidator><br /><!-- Atlas popup control requires panel to function --> <%-- ID="Panel1" runat="server" style="visibility:hidden" CssClass="popupControl">--%> <asp:Panel ID="Panel1" runat="server" style="display:none"><!-- update panel controlled by scriptmanager and contains calendar which will be the "popup" linked to the textbox click--> <atlas:UpdatePanel ID="UpdatePanel1" runat="server" EnableViewState="true" Mode="Always" > <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"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <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> </td> <td style="vertical-align: top; text-align: left; width: 522px; font-weight: bold; text-transform: uppercase;"> POSTING DATE:<br /> <asp:TextBox ID="txtPostDate" runat="server"></asp:TextBox><asp:RequiredFieldValidator ID="rfvPostDate" runat="server" ControlToValidate="txtPostDate" ErrorMessage="Posting Date field must be completed">*</asp:RequiredFieldValidator> <asp:CustomValidator ID="CustomValidator2" runat="server" ControlToValidate="txtPostDate" ErrorMessage="Invalid Date" SetFocusOnError="True"></asp:CustomValidator><br /> <asp:Panel ID="Panel2" runat="server" style="visibility:hidden" CssClass="popupControl"> <atlas:UpdatePanel ID="UpdatePanel2" runat="server"> <ContentTemplate> <center> <asp:Calendar ID="Calendar2" runat="server" BackColor="White" BorderColor="#999999" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana" Font-Size="8pt" ForeColor="Black" Width="160px" OnSelectionChanged="Calendar2_SelectionChanged"> <SelectedDayStyle BackColor="#666666" Font-Bold="True" ForeColor="White" /> <TodayDayStyle BackColor="#CCCCCC" ForeColor="Black" /> <SelectorStyle BackColor="#CCCCCC" /> <WeekendDayStyle BackColor="#FFFFCC" /> <OtherMonthDayStyle ForeColor="#808080" /> <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> </td> </tr> <tr> <%--inserted empty row for spacing--%> </tr>

here is the code behind:

using System;using System.Data;using System.Configuration;using System.Collections;using System.Web;using System.Web.Security;using System.Web.UI;using System.Web.UI.WebControls;using System.Web.UI.WebControls.WebParts;using System.Web.UI.HtmlControls;using EDS.UK.AFPAA.CASS.JSAAC.UIP;using Microsoft.ApplicationBlocks.UIProcess;using AtlasControlToolkit;public partialclass ExistingCustomer : PageBase{protected void Page_Load(object sender, EventArgs e) { Master.NavigationEventHandler +=new Master.MenuResponseEvent(Master_MenuEvent); Master.GetMasterResultsPanel.Visible =false; }#region UIP Plumbingprivate ApplicantController myController {get {return (ApplicantController)this.Controller; } }#endregion protected void Calendar1_SelectionChanged(object sender, EventArgs e) {//// Popup result is the selected date linked to required date text box //PopupControlExtender.GetCurrent(this.Page).Commit(Calendar1.SelectedDate.ToShortDateString()); ////txtReqDate.Text = PopupControlExtender.GetCurrent(this.Page).Commit(Calendar1.SelectedDate.ToShortDateString()); Calendar cTemp = (Calendar)sender;this.txtReqDate.Text = cTemp.SelectedDate.ToShortDateString();//TextBox3.Text = cTemp.SelectedDate.ToShortDateString(); PopupControlExtender.GetCurrent(this.Page).Commit(cTemp.SelectedDate.ToShortDateString()); }protected void Calendar2_SelectionChanged(object sender, EventArgs e) {// Popup result is the selected date linked to posting date text box PopupControlExtender.GetCurrent(this.Page).Commit(Calendar2.SelectedDate.ToShortDateString());//txtReqDate.Text = Calendar1.SelectedDate.ToShortDateString(); }}

Both popups behave as I'd expect when I try with 60914. Please switch to that and give it another try. To upgrade, you should be able to install "over top of" a previous release. That may leave a couple of unnecessary files behind, but things should work just fine doing that. Let me know if 60914 doesn't solve the problem here!

i have downloaded 60914 but there is no atlas setup msi as per the july ctp. The only vsi i can find is for the extenders. When i run this i get installation errors. Do i just have to open and compile the solution and place the new dll's in my atlas project then run the new extender vsi's ??

Sorry im a little confused !!

Modal PopUp Extender

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

Modal Popup events?

Okay I call a modal popup in my page and then reposition the popup to appear over the elemnt clicked using the $get, getlocation and setLocation in the AJAX library - however inside my modal popup I have an update panel that updates the contents based on selecting a link button in the popup - when the popup returns the new content it automatically recenters itself like it reinitalizes

My question is is there a event or method that I cna use to repostion my popup after this happens or is there a way to prevent it from doing this?

TIA

The update panel should be inside the modal popup not embedding it so that only that markup(the link button and the content) is refreshed and the entire modal popup is not re-rendered. Could you post a small code snippet that demonstrates what you are doing?

the update panel is inside the modal popup (it doesnt work otherwise i found) when the content in side that update panel is refresehed the modal popup is not rerendered (that i can see) but it moves to its centered position

my code to move the modal popup is this javascript

1<script>2function pageLoad()3{4 var popup = $find('dnn_LOGIN1_ModalPopupExtender');5popup.add_shown(SetFocus);6}7function SetFocus()8{9var login_button = $get('dnn_LOGIN1_hypLogin');10var loginscreen = $get('dnn_LOGIN1_Panel1');11var position = Sys.UI.DomElement.getLocation(login_button);12Sys.UI.DomElement.setLocation(loginscreen,position.x-170,position.y+12);13$get('dnn_LOGIN1_txtUsername').focus();14}15</script>

(is that enough?)

TIA

Modal Popup events not responding

I have a modal popup control that is created dynamically along with various other controls on Page_Init. Actually it's a user control created dynamically, and part of that user control is the modal popup.

Inside the modal popup is basically just a grid view with some hyperlink columns. The problem is that none of the links ever seem to respond. The popup is shown by a serverside call to the Show() method.

I experimented and put a few buttons and various other controls, and while the button animates like it's been pressed, no server code fires. This happens reguardless of the control type; radiobuttons won't even check. This occurs in controls both inside and outside of the gridview.

Anyone run into something similar with a dynamically created modal popup?

When the controls are being created dynamically, are you attaching events to the objects that will be posting back (ie the modal popup window). I have a similar situation where I have a user control that dynamically creates buttons. The buttons did not work until I added a event handler once I created them. When you add conntrols to a page, this is done automatically, but If you create a control dynamically, you must tell the page what to do with its events when they are raised. Make sence?

-Alan


Yes, it makes sense. The standard events that are tied into the controls, Page_Load, Page_PreRender, etc. all fire fine at the right times. It's only UI events like Click that don't respond on the server side. I can get them to execute javascript (of course) but I'd like to avoid having to hack together a callback function just to get a button working. Besides wiring the buttons/links/etc with events directly from the aspx page, I've tried adding the controls dynamically also (within the dynamically created user control housing the modalpopup) and then wiring them to the events.

Adding the controls that way in the user control's Load, and Init events both yield the same results. The code gets run and the controls get created, but they do not respond to UI events.

Modal Popup Error Message

There have been several posts regarding the modal popup control and beta 2 but I haven't seen one regarding my issue yet. Here is a code sample of the page:

<atlas:ModalPopupExtender ID="mpeCutAreas"
BackgroundCssClass="modalPopupBg"
TargetControlID="btnHidden"
PopupControlID="pnlCutAreas"
CancelControlID="btnCloseCutAreas"
DropShadow="true"
runat="server" />
<asp:Button ID="btnHidden" UseSubmitBehavior="false" Style="visibility: hidden;" runat="server" />
<asp:Panel ID="pnlCutAreas" Style="display: none;" CssClass="modalDialog" runat="server">
<input type="hidden" id="hidGeographyId" runat="server" />
<div>
<h2>Cut Areas</h2>
<asp:DataGrid CssClass="grid" ID="dgCutAreas"
AutoGenerateColumns="false"
ShowFooter="true"
OnItemCommand="dgCutAreas_ItemCommand"
OnItemDataBound="dgCutAreas_ItemDataBound"
ShowHeader="true"
GridLines="None"
DataKeyField="CA_ID"
runat="server">
<HeaderStyle CssClass="gridHeader" />
<ItemStyle CssClass="gridItem" />
<AlternatingItemStyle CssClass="gridAltItem" />
<FooterStyle CssClass="gridFooter" />
<Columns>
<asp:TemplateColumn HeaderText="Active">
<ItemTemplate>
<asp:HiddenField ID="hidCutAreaId" Value='<%# DataBinder.Eval(Container.DataItem, CutArea.ColumnNames.CA_ID) %>' runat="server" />
<input type="checkbox" id="chkIsActive" runat="server" />
</ItemTemplate>
<FooterTemplate>
<input type="checkbox" disabled="disabled" id="chkIsActive" runat="server" />
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn HeaderText="Name">
<ItemTemplate>
<input type="text" id="txtName" size="22" value='<%# DataBinder.Eval(Container.DataItem, CutArea.ColumnNames.CA_Name) %>' runat="server" />
</ItemTemplate>
<FooterTemplate>
<input type="text" id="txtName" size="22" runat="server" />
</FooterTemplate>
</asp:TemplateColumn>
<asp:TemplateColumn>
<FooterTemplate>
<asp:Button ID="btnAddCutAreaRow" CommandName="Insert" Text="Add" runat="server" />
</FooterTemplate>
</asp:TemplateColumn>
</Columns>
</asp:DataGrid>
<br />
<asp:Button ID="btnSaveAllCutAreas" OnClick="btnSaveAllCutAreas_Click" Text="Save" runat="server" />
<asp:Button ID="btnCloseCutAreas" Text="Close" runat="server" />
</div>
</asp:Panel>


The error I am recieveing is this:

The control 'btnHidden' already has a data item registered.
Parameter name: control


One strange thing I did notice, is that if I set AutoEventWireup = false the problem goes away, but of course I'd rather not have to manually wire up the page when using C#. Not sure if that is a clue or not.

This code did work fine under beta 1.

Any help would be great.

Thanks,
Frank

Pasting your sample into a page and getting it running seems to work for me with either setting of AutoEventWireup. Perhaps acomplete, simple, self-contained sample page that demonstrates the problem would help? Thank you!

Having the same problem.. anyone have any idea what would cause it..

In my situation I am using an updatepanel in a masterpage, and inside that I have a control createaccount, that has a panel in it which I have assigned to the modal popup extender, which sits in the masterpage it works fine, but after I trigger a postback manually, and re-show the panel, I get that error! Its strange cause if I don't call the mpecreateaccount.show() method it works fine, I only seem to get it after i call mpecreateaccount.show()..

Any ideas would be greatly appreciated!