Watermarked Popup textbox (Calendar)

I searched few hours today on the forum about multiple problems I had and was successful. Unfortunately I come to a point where I have more than one problem which are talked on the forum but where solutions don't rain.

I'm trying to make a search control in ASP.net 2.0. The search is pretty simple :

1. Start date
2. End Date
3. Card number
4. Ref number

3-4 are no challenge...
But for 1-2 I want a textbox watermarked with the correct format and a popup calendar.

I also have 2 buttons :
First one reset the form ideally asynchronously
Second one actually search

What happens with updatepanel1

When selecting a date nothing happens in the textboxClearing the form works great no problems

What happens without updatepanel1:

When selecting a date the date appear in the textbox with the watermarked CSS style (color gray)
When selecting the second textbox the first one disappear.Clearing the form do nothing

I tried to set the ComitProperty of the popupextender to "Text" ; unsuccessful

Code:

<%@dotnet.itags.org. Control Language="C#" AutoEventWireup="true" CodeFile="c_BusinessReport.ascx.cs"
 Inherits="controls_c_BusinessReport" %>
<%@dotnet.itags.org. Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>
<atlas:ScriptManager ID="ScriptManager" runat="server" EnablePartialRendering="true" />
<asp:Label ID="lblFruitReport" runat="server" Font-Bold="True" Font-Size="XX-Large"
 Text="Fruit Report" Width="285px"></asp:Label>
<br />
<br />
<atlas:UpdatePanel ID="UpdatePanel1" Mode="Always" runat="server">
 <ContentTemplate>
 <asp:Panel ID="pnlOption" runat="server" GroupingText="Options">
 <table width="100%">
 <tr>
 <td>
 <table width="100%">
 <tr>
 <td style="text-align: right; width: 85px;">
 <asp:Label ID="lblStartDate" runat="server" Text="Start date:"></asp:Label></td>
 <td>
 <asp:TextBox ID="txtStartDate" runat="server" CssClass="unwatermarked"></asp:TextBox>
 </td>
 </tr>
 <tr>
 <td style="text-align: right; width: 85px;">
 <asp:Label ID="lblEndDate" runat="server" Text="End date:"></asp:Label></td>
 <td>
 <asp:TextBox ID="txtEndDate" runat="server" CssClass="unwatermarked"></asp:TextBox>
 </td>
 </tr>
 <tr>
 <td style="text-align: right; width: 85px;">
 <asp:Label ID="lblCard" runat="server" Text="Card number:"></asp:Label></td>
 <td>
 <asp:TextBox ID="txtCard" runat="server"></asp:TextBox></td>
 </tr>
 <tr>
 <td style="text-align: right; width: 85px;">
 <asp:Label ID="Label1" runat="server" Text="Ref number:"></asp:Label></td>
 <td>
 <asp:TextBox ID="txtRef" runat="server"></asp:TextBox></td>
 </tr>
 </table>
 </td>
 </tr>
 <tr>
 <td style="border-top-width: thick">
 <asp:RadioButtonList ID="radRender" runat="server" RepeatDirection="Horizontal">
 <asp:ListItem Value="screen" Selected="True">Show on screen</asp:ListItem>
 <asp:ListItem Value="pdf">Show in pdf</asp:ListItem>
 <asp:ListItem Value="excel">Show in Excel</asp:ListItem>
 </asp:RadioButtonList>
 </td>
 </tr>
 <tr>
 <td style="text-align: right">
 <asp:Button ID="Clear" Text="Clear" OnClick="Clear_Click" runat="server" />
 <asp:Button ID="GetReport" runat="server" Text="Get Report" /></td>
 </tr>
 </table>
 </asp:Panel>
 </ContentTemplate>
</atlas:UpdatePanel>
<asp:Panel ID="Panel1" runat="server" CssClass="popupControl">
 <atlas:UpdatePanel ID="UpdatePanel2" 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>
 </center>
 </ContentTemplate>
 </atlas:UpdatePanel>
</asp:Panel>
<atlasToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server">
 <atlasToolkit:TextBoxWatermarkProperties TargetControlID="txtStartDate" WatermarkText="dd/mm/yyyy"
 WatermarkCssClass="watermarked" />
 <atlasToolkit:TextBoxWatermarkProperties TargetControlID="txtEndDate" WatermarkText="dd/mm/yyyy"
 WatermarkCssClass="watermarked" />
</atlasToolkit:TextBoxWatermarkExtender>
<atlasToolkit:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server">
 <atlasToolkit:FilteredTextBoxProperties TargetControlID="txtStartDate" FilterType="Custom, Numbers"
 ValidChars="/" />
 <atlasToolkit:FilteredTextBoxProperties TargetControlID="txtEndDate" FilterType="Custom, Numbers"
 ValidChars="/" />
 <atlasToolkit:FilteredTextBoxProperties TargetControlID="txtCard" FilterType="Numbers" />
 <atlasToolkit:FilteredTextBoxProperties TargetControlID="txtRef" FilterType="Numbers" />
</atlasToolkit:FilteredTextBoxExtender>
<atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
 <atlasToolkit:PopupControlProperties ID="Cal1" TargetControlID="txtStartDate" PopupControlID="Panel1"
 Position="Bottom" />
 <atlasToolkit:PopupControlProperties ID="Cal2" TargetControlID="txtEndDate" PopupControlID="Panel1"
 Position="Bottom" />
</atlasToolkit:PopupControlExtender>

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 AtlasControlToolkit;
public partialclass controls_c_BusinessReport : System.Web.UI.UserControl
{
protected void Clear_Click(object sender, EventArgs e)
 {
foreach(Control controlin this.pnlOption.Controls)
 {
if (controlis TextBox)
 ((TextBox)control).Text ="";
 radRender.SelectedIndex = 0;
 }
 }
/// <summary>
 /// Handler for calendar changes
 /// </summary>
 /// <param name="sender">source</param>
 /// <param name="e">arguments</param>
protected void Calendar1_SelectionChanged(object sender, EventArgs e)
 {
// Popup result is the selected date
 PopupControlExtender.GetCurrent(this.Page).Commit(Calendar1.SelectedDate.ToShortDateString());
 }
}

CSS (partial)

.watermarked{color:gray;}.unwatermarked{color:Black;} 

You're running into a few different issues here. I could work around most of them, but ultimately you're going to get stuck because ofwork item 711, I think. We hope to fix that by the next release, so maybe if you can wait till then?

PS - One of the problems you're hitting is fixable now thatwork item 1053 has been fixed (for 60731). You'll want to use PopupControl's CommitScript to call a little helper that uses this method to set the text box text instead of letting PopupControl do so as it is now. One of the things that's happening is that the watermark state is getting confused.

David Anson:

You're running into a few different issues here. I could work around most of them, but ultimately you're going to get stuck because ofwork item 711, I think. We hope to fix that by the next release, so maybe if you can wait till then?

Thx for answering !
Do you have any idea when will be the next release?

David Anson:

PS - One of the problems you're hitting is fixable now thatwork item 1053 has been fixed (for 60731). You'll want to use PopupControl's CommitScript to call a little helper that uses this method to set the text box text instead of letting PopupControl do so as it is now. One of the things that's happening is that the watermark state is getting confused.

Excuse me for this second post but I have tried this :

<atlasToolkit:PopupControlProperties ID="Cal1" TargetControlID="txtStartDate" PopupControlID="Panel1"
Position="Bottom" CommitScript="_ctl00_ContentPlaceHolder1_C_BusinessReport1_txtStartDate.set_Text(ctl00_ContentPlaceHolder1_C_BusinessReport1_txtStartDate.value);

And it says : _ctl00_ContentPlaceHolder1_C_BusinessReport1_txtStartDate is undefined

I am not used to javascript and not even sure the syntax is coorect. I have checked in the source of the page and the name I have entered is the ID of my textbox... don't know why it says it is not defined.

Any help on the script I must make to use the set_text method?

The correct form will look a little more like (just typing from memory here):

<WatermarkProperties ID="watpropid" ...

<PopupProperties ID="poppropid" CommitProperty="rawvalue" CommitScript="$object('watpropid').set_Text($('txtStartDate').rawvalue);" ...

Basically, have Popup stuff the value in an expando property on the target textbox, then find the Watermark behavior and use its set_Text method to apply the value from the expando property.

I receive that error : 'undefined' is null or not an object

Code

<atlasToolkit:TextBoxWatermarkProperties Id="startDateWatermarked" TargetControlID="txtStartDate" WatermarkText="dd/mm/yyyy" WatermarkCssClass="watermarked" /
<atlasToolkit:PopupControlProperties ID="Cal1" TargetControlID="txtStartDate" PopupControlID="Panel1" Position="Bottom" CommitScript="$object('startDateWatermarked').set_Text($('txtStartDate').rawvalue);"/>

You didn't set CommitProperty.

David Anson:

You didn't set CommitProperty.

I added it and the same error occur.
I plan to blog a sample of using PC+TBW together in the next couple of days. I'll update this thread once I've done so. I'm thinking a simple example may help clear things up all around. :)

David Anson:

I plan to blog a sample of using PC+TBW together in the next couple of days. I'll update this thread once I've done so. I'm thinking a simple example may help clear things up all around. :)

That would be great

Thx David
I've just postedhttp://blogs.msdn.com/delay/archive/2006/08/15/701848.aspx. Hope this helps!!
Thx for tutorial,

I have created the sample in atlasControlToolkit project and it works well. I adapt it with calendar variable names, etc and it work as I need it to work in the atlas project.

But when I copy and paste the whole page into my project to test it, it still gives me the object undefined error. For what I can understand, since I do this into a control and place it in a contentplaceholder, it cannot find the variable into the contentPlaceholder.

Is it possible that their is an issue with the control toolkit with the content placeholder?
I made sone test and it is defenatly the fact the control is in a content place holder.

the problem is in the javascript function :

Original (modified for calendar but working):

 <script type="text/javascript"> // Called when PopupControl has been dismissed (registerd via CommitScript property on // PopupControlProperties) function commitScript() { // Get the comitted property from the specified expando property on the TargetControlID // (CommitProperty above) var date = $("TextBox1").date; } // Call into the TextBoxWatermark behavior to set the desired text $object("TextBoxWatermarkBehavior_TextBox1").set_Text(date); } </script>

Modified to work in my content placeholder :

 function commitScript() { // Get the comitted property from the specified expando property on the TargetControlID // (CommitProperty above) var date = $("ctl00_ContentPlaceHolder1_C_calendar1_TextBox1").date; // If it's the magic value "[Clear]", then set empty text into the textbox (which // restores the watermark) if("[Clear]" == date) { date = ""; } // Call into the TextBoxWatermark behavior to set the desired text $object("TextBoxWatermarkBehavior_ctl00_ContentPlaceHolder1_C_calendar1_TextBox1").set_Text(date); }

Any idea how I could make it dynamic cause If I want to build a user control named calendar I need it to be dynamic...

Thx

Solution :

<

asp:PanelID="pn1"runat="server"CssClass="popupControl">
<atlas:UpdatePanelID="up2"runat="server">
<ContentTemplate>
<asp:TextBoxID="TextBox1"runat="server"></asp:TextBox>
</ContentTemplate>
<Triggers>
<atlas:ControlEventTriggerControlID="Calendar1"EventName="SelectionChanged"/>
</Triggers>
</atlas:UpdatePanel>

</asp:Panel>
<asp:PanelID="pn2"runat="server"CssClass="popupControl">
<atlas:UpdatePanelID="up3"runat="server">
<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>
</center>
</ContentTemplate>
</atlas:UpdatePanel>
</asp:Panel>

<cc1:TextBoxWatermarkExtenderID="TextBoxWatermarkExtender1"runat="server">
<cc1:TextBoxWatermarkPropertiesid="TextBoxWatermarkProperties1"TargetControlID="TextBox1"WatermarkCssClass="toto"WatermarkText="Select date"/>
</cc1:TextBoxWatermarkExtender>

<cc1:PopupControlExtenderID="PopupControlExtender1"runat="server">
<cc1:PopupControlPropertiesid="PopupControlProperties1"PopupControlID="pn2"Position="Bottom"TargetControlID="TextBox1"/>
</cc1:PopupControlExtender>

Protected

Sub Calendar1_SelectionChanged(ByVal senderAsObject,ByVal eAs System.EventArgs)
TextBox1.Text = Calendar1.SelectedDate.ToShortDateString()
EndSub
You can render the commitScript on the server where the TextBox1.ClientID will get you the necessary client ID. Then just pass that text down to the client and it'll be as though you coded in the right ID from the start.