August, 2006

One of the questions that comes up every now and then on the "Atlas" Control Toolkit support forums is how to point both the PopupControl and the TextBoxWatermark at the same TextBox. The straightforward implementation doesn't work quite right because both controls assume they have complete control over the TextBox. What happens is that the PopupControl's result gets written directly into the TextBox where it partially overwrites the watermark that's already there. But the TextBoxWatermark doesn't realize anything has happened and assumes the TextBox is still empty. Nuts...

The solution to this problem is not immediately obvious, so I thought I'd post a simple example to help show how it's done using the 60731 release of the Toolkit.

First, here's what the sample code below looks like when it's running:

Animated demonstration

The complete code for the sample follows - most of what's there is just to get the necessary elements on the page hooked up properly. There are a few things worth noting, though:

The unique "ID" attributes on the PopupControlProperties and TextBoxWatermarkProperties elements prevent the automatically assigned IDs (which are based only on the TargetControlID (that's common to both elements)) from clashing.
The CommitProperty on the PopupControlProperties defines a custom expando property of the TargetControlID (TextBox1) into which the result of the popup will be placed. This keeps the PopupControl from blindly stomping on the text/watermark in the TextBox.
The CommitScript on the PopupControlProperties points to a script that gets run when the popup returns (after the CommitProperty has been populated). In this case, the script simply gets the popup result from the CommitProperty and uses the TextBoxWatermark behavior's set_Text method to safely set the text into the TextBox without breaking the watermark behavior.

That's all there is to it!

Just save the following code to an .ASPX file in the SampleWebSite directory of a Toolkit installation if you want to try it out for yourself:

<%@ Page 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">

<script runat="server">
    protected void RadioButtonList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        PopupControlExtender.GetCurrent(Page).Commit(RadioButtonList1.SelectedValue);
        RadioButtonList1.ClearSelection();
    }
</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>PopupControlWithTextBoxWatermark</title>
    <style type="text/css">
        .watermark { background-color:#bbbbff; font-style:italic; }
        .panel { background-color:#bbffbb; visibility:hidden; }
    </style>
</head>
<body>
    <form id="form1" runat="server" style="background-color: #dddddd; width: 350px; height: 250px;
        border-style: dashed; border-width: 1px; padding: 5px;">

        <atlas:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" />

        <asp:TextBox ID="TextBox1" runat="server" Width="150"></asp:TextBox>
        <asp:Panel ID="Panel1" runat="server" Width="125px" CssClass="panel">
            <atlas:UpdatePanel ID="UpdatePanel1" runat="server">
                <ContentTemplate>
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server"
                        OnSelectedIndexChanged="RadioButtonList1_SelectedIndexChanged" AutoPostBack="true">
                        <asp:ListItem Text="Red" />
                        <asp:ListItem Text="Green" />
                        <asp:ListItem Text="Blue" />
                        <asp:ListItem Text="[Clear]" />
                    </asp:RadioButtonList>
                </ContentTemplate>
            </atlas:UpdatePanel>
        </asp:Panel>

        <atlasToolkit:TextBoxWatermarkExtender ID="TextBoxWatermarkExtender1" runat="server">
            <atlasToolkit:TextBoxWatermarkProperties TargetControlID="TextBox1" WatermarkCssClass="watermark"
                WatermarkText="Favorite Color" ID="TextBoxWatermarkBehavior" />
        </atlasToolkit:TextBoxWatermarkExtender>
        <atlasToolkit:PopupControlExtender ID="PopupControlExtender1" runat="server">
            <atlasToolkit:PopupControlProperties TargetControlID="TextBox1" PopupControlID="Panel1"
                Position="Bottom" ID="PopupControlBehavior" CommitProperty="favoriteColor"
                CommitScript="commitScript()" />
        </atlasToolkit:PopupControlExtender>

        <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 favoriteColor = $("TextBox1").favoriteColor;
            // If it's the magic value "[Clear]", then set empty text into the textbox (which
            // restores the watermark)
            if("[Clear]" == favoriteColor) {
                favoriteColor = "";
            }
            // Call into the TextBoxWatermark behavior to set the desired text
            $object("TextBoxWatermarkBehavior_TextBox1").set_Text(favoriteColor);
        }
        </script>

    </form>
</body>
</html>

If you found this simple "How to" helpful or if you have any suggestions for ways in which future "How to"s could be improved, please let me know. Thank you!!

I'm happy to announce the 60731 release of the "Atlas" Control Toolkit (which came out two weeks ago)! (I'm also happy to announce the 60626 release of the "Atlas" Control Toolkit which came out about a month and a half ago - but that's old news by now and is only included here for completeness.)

Why the delays?

Well, there was a good reason for keeping the 60626 release a little quiet. The "Atlas" team released an updated version of their binaries just a few days after our 60626 release came out - so the bits it included were suddenly out of date. We expected to integrate the new "Atlas" bits and put out an updated release of the Toolkit a day or two later, but various issues came up and we weren't able to do so. By the time we'd resolved all of the issues, it was just about time for the 60731 release!

So that's why there was no announcement for 60626. But why the delay for the 60731 release?

No good reason, really, other than that I've been busy with other stuff and haven't posted to my blog in a while... :|

Without further ado (or excuses), here are the highlights of the new releases:

8 new controls
- Accordion: Displays one pane at a time from a set of multiple panes
- DynamicPopulate: (Re-)populates any element with HTML content downloaded from the server
- FilteredTextBox: Prevents unwanted characters from being typed into a text box
- NumericUpDown: Lets you attach flexible up/down "spinners" to any TextBox
- PagingBulletedList: Adds flexible paging and sorting to any bulleted list
- PasswordStrength: Provides interactive feedback about the strength of a password being created
- Rating: Displays a "4 out of 5 stars" interface for ranking
- ResizableControl: Makes any control resizable
A complete automated testing framework along with tests for all 21 controls in the Toolkit
Data binding support for extender properties declarations
Support for the July CTP of "Atlas"
An established process that allows anyone to contribute to the project (5 of the controls above were by people who aren't on the Toolkit team!)

The release notes outline a bunch of other improvements we've made. Please take a moment to read about the new stuff. While you're at it, sample any of the controls right now (no install required). Then browse the project web site and download the latest Toolkit so you can start creating your own controls and/or contributing to the project!

As always, if you have any feedback, please share it with us on the support forum (or email me)!!

Delay's Blog

About Delay's Blog

Delay's Blog is the blog of David Anson, a Microsoft developer who works with the Silverlight, WPF, Windows Phone, and web platforms.

http://dlaa.me/

@DavidAns

An example of watermark-friendly popping [How to: Integrate the PopupControl and TextBoxWatermark]

A late announcement and an even later announcement ["Atlas" Control Toolkit updated (twice)!]