Wednesday, March 28, 2012

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

No comments:

Post a Comment