C# Bits: DisplayAttribute “Prompt” or Watermark in Dynamic Data 4 (Visual Studio 2010 & .Net 4.0)

In Figure 1 there is another property called “Prompt” and the online help says:

Prompt: Gets or sets a value that will be used to set the watermark for prompts in the UI.

Figure 1 – Display attribute properties

So I set the value and looked at the output UI in Insert mode and there was no water mark so again I just had to “make it so”. So I decided to use the Ajax Control Toolkit’s TextBoxWatermark to achieve this.

Note: This example applies this to the Text and DateTime fields template, but it could also be applied to other templates that are based on Textboxes (e.g. Integer, Decimal etc.)

I’ve created a watermarked CSS class and added it to the site.css file.

.watermarked
{
     color: Silver;
}

Listing 1 – watermarked CSS class

<asp:TextBox 
    ID="TextBox1" 
    runat="server" 
    CssClass="DDTextBox"
    Text='<%# FieldValueEditString %>'> 
</asp:TextBox>
<asp:TextBoxWatermarkExtender 
    ID="TextBoxWatermarkExtender1" 
    runat="server" 
    TargetControlID="TextBox1"
    WatermarkCssClass="watermarked">
</asp:TextBoxWatermarkExtender>

Listing 2 – TextBoxWarterMarkExtender

I’ve also added the TextBoxWarterMarkExtender to both the Text_Edit.ascx and DateTime_Edit.ascx files see Listing 2 then we need to make the changes to the code behind files.

Note: The code for the TextBoxWarterMarkExtender is the same across both field templates but there are some minor differences in the TextBox.

Here there will be major differences as we can leverage the System.Globalization namespace in the DateTime_Edit.

#region Watermarked
var display = Column.GetAttribute<DisplayAttribute>();
if (display != null && !String.IsNullOrEmpty(display.Prompt))
    TextBoxWatermarkExtender1.WatermarkText = display.Prompt;
else
    TextBoxWatermarkExtender1.Enabled = false;
#endregion

Listing 3 – Watermarked region of the Text_Edit.ascx.cs Page_Load event.

In Listing 3 in the Text_Edit field template we are just looking for the Display attribute and it’s Prompt property and if we have a prompt value then we apply it to the watermark otherwise we disable the extender.

#region Watermarked
String defaultFormat = String.Empty;
if (Column.DataTypeAttribute != null)
{
    // get format string depending on the data type
    switch (Column.DataTypeAttribute.DataType)
    {
        case DataType.Date:
            defaultFormat = DateTimeFormatInfo.CurrentInfo.ShortDatePattern;
            break;
        case DataType.DateTime:
            defaultFormat = DateTimeFormatInfo.CurrentInfo.FullDateTimePattern;
            break;
        case DataType.Time:
            defaultFormat = DateTimeFormatInfo.CurrentInfo.LongTimePattern;
            break;
    }
}
else
    defaultFormat = DateTimeFormatInfo.CurrentInfo.ShortDatePattern;

// if we have a Prompt value then override the default format string
var display = Column.GetAttribute<DisplayAttribute>();
if (display != null && !String.IsNullOrEmpty(display.Prompt))
    TextBoxWatermarkExtender1.WatermarkText = display.Prompt;
else
    TextBoxWatermarkExtender1.WatermarkText = defaultFormat;
#endregion

Listing 3 – Watermarked region of the DateTime_Edit.ascx.cs Page_Load event.

So then for the DateTime field template we could have a default watermark depending on the DateType set for the DateTime field (see Listing 3). Here in Listing 3 we are using System.Globalization to get the format string based on culture and date type (DateTime, Date or Time) but allowing the Prompt to be overridden.