So I'm back in ASP.NET AJAX/Atlas world for the time being while I work on my dad's application. And like a kid in a candy store, I'm trolling through the AJAX Control Toolkit trying to see which ones I can use. As opposed to picking out the cool ones and trying to find a way to wedge them into the application. It's a subtle difference.

Anyway, the TabContainer caught my eye and I played with it both online and locally with the source code. One thing I think is a nice touch is the effect you get when you hover over the tabs, something you are accustomed to in WinForms but not as often on the web. I'm sure I've said it before but the guys on that time are counting with all ten fingers.

In the HTML for that page though is some javascript that caught my eye and it led me on a wondrous journey:

        function ActiveTabChanged(sender, e) {
            var CurrentTab = $get('<%=CurrentTab.ClientID%>');
            CurrentTab.innerHTML = sender.get_activeTab().get_headerText();
            Highlight(CurrentTab);
        }

        var HighlightAnimations = {};
        function Highlight(el) {
            if (HighlightAnimations[el.uniqueID] == null) {
                HighlightAnimations[el.uniqueID] = 
                  AjaxControlToolkit.Animation.createAnimation({
                    AnimationName : "color",
                    duration : 0.5,
                    property : "style",
                    propertyKey : "backgroundColor",
                    startValue : "#FFFF90",
                    endValue : "#FFFFFF"
                }, el);
            }
            HighlightAnimations[el.uniqueID].stop();
            HighlightAnimations[el.uniqueID].play();
        }

At first I thought this was their funky way of animating things when you switch tabs. But if you check the sample, there isn't really any animation on the page when you go from one tab to the next. Unless you look VERY closely at the text beside where it says "Current Tab". If you do, you'll see a short little fade effect that I tried to duplicate on my project with much frustration.

For those readers who actually have the Ajax Control Toolkit source code and are so inclined, here's an exercise for you: In the sample page for the Tabs control, remove the two CollapsiblePanelExtender controls at the bottom of the page and refresh your browser. If you have a default installation of Firefox with no extensions, you'll notice the fade animation is no more. If you use IE or have a Firefox extension that reports javascript errors, you'll notice a little more than that. Namely, that AjaxControlToolkit.Animation doesn't exist.

The reason is that the ScriptManager will output only those scripts it deems necessary for the controls on the page. And the Animations.js script (located in the Animation folder of the toolkit source code), which is the one that declares the AjaxControlToolkit.Animation "namespace", is not deemed necessary by the TabContainer control. But it *is* necessary for the CollapsiblePanelExtender, which you can see by opening CollapsiblePanelExtender.cs and having a boo at the [RequiredScript] attribute.

So what if you want to do this funky animation without adding an Extender that requires it? There are at least two ways I can think of:

  • Include the Animations.js file in your project and reference it like any other script. I've taken this approach in my dasBlog theme because it is, in fact, the only way to include toolkit objects in the template files since they don't allow server-side controls.
  • Add an empty AnimationExtender to your aspx page, either in the code-behind/beside or in the .aspx file:
    • <ajaxToolkit:AnimationExtender id="MyExtender"
  runat="server" TargetControlID="Tabs">
</ajaxToolkit:AnimationExtender>

Both are mildly icky. The first seems a little too manual to me. What if I later add an extender that requires the Animations.js file? And worse, what if I upgrade to a later version of the toolkit that has a different version of Animations.js?

The second is safer but the TargetControlID is required, so you have to have at least one server-side control on the page to attach the extender to.

As it turns out, that little tidbit of javascript that inspired this post isn't actually necessary for the TabContainer control. It was added, I suspect, by some mean-spirited AJAXer who was acutely aware of my inquisitive nature and tendency to be easily interrupted.

Kyle the Animated