Showing posts with label fields. Show all posts
Showing posts with label fields. Show all posts

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

Monday, March 26, 2012

Modal Popup not posting TextBox fields

I have a strange situation in which I am using a Model Popup Control with an embedded GridView containg TextBox controls in a column. I can DataBind the GridView in the codebehind and the TextBox controls are properly populated. However, when the pack posts back, the TextBox Controls always have an empty string for the Text property? This also occurs if I replace the GridView with a Repeater or any other list control.

Other controls, like labels, have there Text property available.

craig

You might want to look at this post:

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

Look at the second page, at the last post with the JavaScript.

They have done some nice work with the modal regarding this issue I think.

There was also a workaround using the SubmitButtonBehavor = false;

Dont know if this will help you, but I thought I would give it a shot

Good luck

-Shane

Wednesday, March 21, 2012

ModalPanel - How can I us AJAX instead of postback to update database ?

I'm new to AJAX and this suite of tools. I have a page that when a user clicks a link button my ModalPanel with various input fields appears. When the user clicks the okay button I want to make an async call instead of having the page post back. I need to be able to call one of my business objects defined in C# so what is the best way to do this?

If you can provide details or even a small example I would appreciate it.

My code behind method looks like this:

void OnClick(...)

{

Broker b = new Broker();

b.name = NameTextBox.Text;

b.account = AccountTextBox.Text;

b.Save();


}

Why not just wrap the modalpopup in an updatepanel and let the page postback? It is easier then to have access to the server controls from the form and have full interaction with the other page elements during the postback in case you want to update other stuff on the page.

What benefits are you looking for by not posting back?

Jason

ModalPopUp & ValidatorCalloutExtender Issue

I have required fields that are contained within the ModalPopUp, the problem arises when I submit the form the validation popup appears behind the modal form.

Has anyone encountered this before and if so have they come up with a solution?

Help would be appreciated on this!!

This is a valid scenario and we have seen issues where it would be reasonable to not have the modal popup to have the highest z-index. If you could open an issue to track this that would be great:http://www.codeplex.com/AtlasControlToolkit/WorkItem/Create.aspx. We will investigate possible solutions to make your scenario and other similar scenarios regarding the modal popup z-index.

I am having the same issue.

Any help would be appreciated.


I'm having the same issue. I have a required validator in modal popup, but OK button on the ModalPopup control ignores that required validator.


asp.net_programmer:

I'm having the same issue. I have a required validator in modal popup, but OK button on the ModalPopup control ignores that required validator.

I opened anissue for this on Codeplex, hopefully someone can give us an answer for this soon. If not updated ModalPopup control, then some kind of workaround would be helpfull. Thanks.


Any update on this issue?

Thanks in Advance.


Well I don't know if this adds to this discussion or not. I can not no matter what get it to center. I have no idea why it will not but all I see is the lower left corner and cancel button of my popup in the upper right corner. So I figured I would specify the X and Y properties to possition it. So I specified X=250 and y=250 and this was the only change the modal was visible now but in possition maybe 50,50 however now it was not active and greyed out with the background. Remove the X and the Y and it goes back so I can only see the cancel button but it is active again.

Selam Aleyk,

If location of the validatorcalloutextender control is in modal popup panel, it is working ok.

Oznur

ModalPopup and PopupControlExtender

I have a modalpopup panel which is used to change search variables for a db. One of the search fields is a date textbox. I have attached a popupcontrolextender to this textbox so that when clicked, a calendar pops up and the user can select the appropriate date. However, when I try this on the page, the calendar popup is actually UNDER the modal popup panel. I can barely see the last week of the month. Has anyone else had this issue? Is there a way to set up modalpopup or the popupcontrolextender to force the calendar to popup on top of the modal popup panel?

Here is my code for the modalpopup panel

<asp:Panel ID="modalPanel" runat="server" Height="0px" Width="0px" CssClass="modalPopup" style="display:none" BorderColor="Black" BorderStyle="Solid" BackImageUrl="~/images/backgrnd.gif">
<div class="modalPopup-text" style="font-weight: bold">
<table style="width: 661px">
<tr>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
<td style="width: 100px; height: 21px;">
</td>
</tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td align="center" colspan="2">
Please Enter a Search Start Date</td>
<td align="center" colspan="2">
Please Enter a Search End Date</td>
</tr>
<tr>
<td align="center" colspan="2" style="height: 26px">
Start Date:
<asp:TextBox ID="StartDate" runat="server" Width="122px"></asp:TextBox></td>
<td align="center" colspan="2" style="height: 26px">
End Date:
<asp:TextBox ID="EndDate" runat="server" Width="121px"></asp:TextBox></td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
<td style="width: 100px">
</td>
</tr>
<tr>
<td align="center" colspan="2">
Please Enter a Searh Start Time</td>
<td align="center" colspan="2">
Please Enter a Search End Date</td>
</tr>
<tr>
<td align="center" colspan="2">
Start Time:
<asp:TextBox id="StartTime" runat="server" style="width: 114px" ></asp:TextBox></td>
<td align="center" colspan="2">
End Time:
<asp:TextBox id="EndTime" runat="server" style="width: 107px"></asp:TextBox>
</td>
</tr>
<tr>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:RadioButtonList ID="StartRadio" runat="server">
<asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
</asp:RadioButtonList></td>
<td style="width: 100px">
</td>
<td style="width: 100px">
<asp:RadioButtonList ID="EndRadio" runat="server">
<asp:ListItem>AM</asp:ListItem>
<asp:ListItem>PM</asp:ListItem>
</asp:RadioButtonList></td>
</tr>
<tr>
<td align="center" colspan="4">
<asp:Button ID="execute" runat="server" Text="Search" OnClick="execute_Click" />
<asp:Button ID="cancel" runat="server" Text="Cancel" />
</td>
</tr>
</table>
</div>
</asp:Panel>

Here is my code for the calendar popupcontrolextender

<asp:Panel ID="StartPopup" runat="server" Height="0px" Width="0px" CssClass="popupControl">
<asp:UpdatePanel ID="StartUpdate" runat="server">
<ContentTemplate>
<asp:Calendar ID="StartCalendar" runat="server" BackColor="White" BorderColor="#3366CC"
BorderWidth="1px" CellPadding="1" DayNameFormat="Shortest" Font-Names="Verdana"
Font-Size="8pt" ForeColor="#003399" Height="165px" Width="149px" OnSelectionChanged="StartCalendar_SelectionChanged" SelectedDate="2006-11-09">
<SelectedDayStyle BackColor="#009999" Font-Bold="True" ForeColor="#CCFF99" />
<TodayDayStyle BackColor="#99CCCC" ForeColor="White" />
<SelectorStyle BackColor="#99CCCC" ForeColor="#336666" />
<WeekendDayStyle BackColor="#CCCCFF" />
<OtherMonthDayStyle ForeColor="#999999" />
<NextPrevStyle Font-Size="8pt" ForeColor="#CCCCFF" />
<DayHeaderStyle BackColor="#99CCCC" ForeColor="#336666" Height="1px" />
<TitleStyle BackColor="#003399" BorderColor="#3366CC" BorderWidth="1px" Font-Bold="True"
Font-Size="10pt" ForeColor="#CCCCFF" Height="25px" />
</asp:Calendar>
</ContentTemplate>
</asp:UpdatePanel>
</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="searchModal" runat="server" TargetControlID="modalOpen" BackgroundCssClass="modalBackground" CancelControlID="cancel" PopupControlID="modalPanel" DropShadow="true">
</ajaxToolkit:ModalPopupExtender>

<ajaxToolkit:PopupControlExtender ID="start" runat="server" TargetControlID="StartDate" PopupControlID="StartPopup" CommitProperty="value" Position="Bottom">
</ajaxToolkit:PopupControlExtender>

Thanks,

Luis

One thing I've done to make this work is put a DropShadowExtender on the Panel that you are popping up.

Try adding style="z-index:200000" to StartPopup as a workaround. (This brings it above the ModalPopup panel at z-index 100000.)