I’m happy to announce the November 2011 Release of the Ajax Control Toolkit. This release introduces a new Balloon Popup control and several enhancements to the existing Tabs control including support for on-demand loading of tab content, support for vertical tabs, and support for keyboard tab navigation. We also fixed the top-voted bugs associated with the Tabs control reported at CodePlex.com.

You can download the new release by visiting the CodePlex website:

http://AjaxControlToolkit.CodePlex.com

Alternatively, the fast and easy way to get the latest release of the Ajax Control Toolkit is to use NuGet. Open your Library Package Manager console in Visual Studio 2010 and type:

After you install the Ajax Control Toolkit through NuGet, please do a Rebuild of your project (the menu option Build, Rebuild). After you do a Rebuild, the ajaxToolkit prefix will appear in Intellisense:

Using the Balloon Popup Control

Why a new Balloon Popup control? The Balloon Popup control is the second most requested new feature for the Ajax Control Toolkit according to CodePlex votes:

The Balloon Popup displays a message in a balloon when you shift focus to a control, click a control, or hover over a control. You can use the Balloon Popup, for example, to display instructions for TextBoxes which appear in a form:

Here’s the code used to create the Balloon Popup:

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />

<asp:TextBox
    ID="txtFirstName"
    Runat="server" />

<asp:Panel ID="pnlFirstNameHelp" runat="server">
    Please enter your first name    
</asp:Panel>

<ajaxToolkit:BalloonPopupExtender 
    TargetControlID="txtFirstName" 
    BalloonPopupControlID="pnlFirstNameHelp"
    BalloonSize="Small"
    UseShadow="true"
    runat="server" />

You also can use the Balloon Popup to explain hard to understand words in a text document:

Here’s how you display the Balloon Popup when you hover over the link:

The point of the conversation was 
<asp:HyperLink ID="lnkObfuscate" Text="obfuscated" CssClass="hardWord" runat="server" /> 
by his incessant coughing.

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />
<asp:Panel id="pnlObfuscate" Runat="server">
    To bewilder or render something obscure
</asp:Panel>
<ajaxToolkit:BalloonPopupExtender
    TargetControlID="lnkObfuscate"
    BalloonPopupControlID="pnlObfuscate"
    BalloonStyle="Cloud"
    UseShadow="true"
    DisplayOnMouseOver="true"
    Runat="server" />

There are four important properties which you need to know about when using the Balloon Popup control:

• BalloonSize – The three balloon sizes are Small, Medium, and Large.

• BalloonStyle -- The two built-in styles are Rectangle and Cloud.

• UseShadow – When true, a drop shadow appears behind the popup.

• Position – Can have the values Auto, BottomLeft, BottomRight, TopLeft, TopRight. When set to Auto, which is the default, the Balloon Popup will appear where it has the most screen real estate.

The following screenshots illustrates how these settings affect the appearance of the Balloon Popup:

Customizing the Balloon Popup

You can customize the appearance of the Balloon Popup by creating your own Cascading Style Sheet and Sprite. The Ajax Control Toolkit sample site includes a sample of a custom Oval Balloon Popup style:

This custom style was created by using a custom Cascading Style Sheet and image. You point the Balloon Popup at a custom Cascading Style Sheet and Cascading Style Sheet class by using the CustomCssUrl and CustomClassName properties like this:

<asp:TextBox ID="txtCustom" autocomplete="off" runat="server" />
<br />
<asp:Panel ID="Panel3" runat="server">
    This is a custom BalloonPopupExtender style created with a custom 
    Cascading Style Sheet. 
</asp:Panel>
<ajaxToolkit:BalloonPopupExtender 
    ID="bpe1" 
    TargetControlID="txtCustom"
    BalloonPopupControlID="Panel3" 
    BalloonStyle="Custom"    
    CustomCssUrl="CustomStyle/BalloonPopupOvalStyle.css"
    CustomClassName="oval" 
    UseShadow="true" 
    runat="server" />

Learn More about the Balloon Popup

To learn more about the Balloon Popup control, visit the sample page for the Balloon Popup at the Ajax Control Toolkit sample site:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/BalloonPopup/BalloonPopupExtender.aspx

Improvements to the Tabs Control

In this release, we introduced several important new features for the existing Tabs control. We also fixed all of the top-voted bugs for the Tabs control.

On-Demand Loading of Tab Content

Here is the scenario. Imagine that you are using the Tabs control in a Web Forms page. The Tabs control displays two tabs: Customers and Products. When you click the Customers tab then you want to see a list of customers and when you click on the Products tab then you want to see a list of products.

In this scenario, you don’t want the list of customers and products to be retrieved from the database when the page is initially opened. The user might never click on the Products tab and all of the work to load the list of products from the database would be wasted.

In this scenario, you want the content of a tab panel to be loaded on demand. The products should only be loaded from the database and rendered to the browser when you click the Products tab and not before.

The Tabs control in the November 2011 Release of the Ajax Control Toolkit includes a new property named OnDemand. When OnDemand is set to the value True, a tab panel won’t be loaded until you click its associated tab.

Here is the code for the aspx page:

<ajaxToolkit:ToolkitScriptManager ID="tsm1" runat="server" />

<ajaxToolkit:TabContainer ID="tabs" OnDemand="false" runat="server">
    <ajaxToolkit:TabPanel HeaderText="Customers" runat="server">
    <ContentTemplate>
        <h2>Customers</h2>
        
        <asp:GridView ID="grdCustomers" DataSourceID="srcCustomers" runat="server" />
        <asp:SqlDataSource 
            ID="srcCustomers" 
            SelectCommand="SELECT * FROM Customers"
            ConnectionString="<%$ ConnectionStrings:StoreDB %>"
            runat="server" />

    </ContentTemplate>    
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel HeaderText="Products" runat="server">
    <ContentTemplate>
        <h2>Products</h2>
                 
        <asp:GridView ID="grdProducts" DataSourceID="srcProducts" runat="server" />
        <asp:SqlDataSource 
            ID="srcProducts" 
            SelectCommand="SELECT * FROM Products"
            ConnectionString="<%$ ConnectionStrings:StoreDB %>"
            runat="server" />
         
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

Notice that the TabContainer includes an OnDemand=”True” property. The Tabs control contains two Tab Panels. The first tab panel uses a DataGrid and SqlDataSource to display a list of customers and the second tab panel uses a DataGrid and SqlDataSource to display a list of products.

And here is the code-behind for the page:

using System;
using System.Diagnostics;
using System.Web.UI.WebControls;

namespace ACTSamples {
    public partial class TabsOnDemand : System.Web.UI.Page {

        protected override void OnInit(EventArgs e) {
            srcProducts.Selecting += new SqlDataSourceSelectingEventHandler(srcProducts_Selecting);
        }

        void srcProducts_Selecting(object sender, SqlDataSourceSelectingEventArgs e) {
            Debugger.Break();
        }
    }
}

The code-behind file includes an event handler for the Products SqlDataSource Selecting event. The handler breaks into the debugger by calling the Debugger.Break() method. That way, we can know when the Products SqlDataSource actually retrieves the list of products.

When the OnDemand property has the value False then the Selecting event handler is called immediately when the page is first loaded. The contents of all of the tabs are loaded (and the contents of the unselected tabs are hidden) when the page is first loaded.

When the OnDemand property has the value True then the Selecting event handler is not called when the page is first loaded. The event handler is not called until you click on the Products tab. If you never click on the Products tab then the list of products is never retrieved from the database.

If you want even more control over when the contents of a tab panel gets loaded then you can use the TabPanel OnDemandMode property. This property accepts the following three values:

• None – Never load the contents of the tab panel again after the page is first loaded.

• Once – Wait until the tab is selected to load the contents of the tab panel

• Always – Load the contents of the tab panel each and every time you select the tab.

There is a live demonstration of the OnDemandMode property here in the sample page for the Tabs control:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

Displaying Vertical Tabs

With the November 2011 Release, the Tabs control now supports vertical tabs.

To create vertical tabs, just set the TabContainer UserVerticalStripPlacement property to the value True like this:

<ajaxToolkit:TabContainer ID="tabs" OnDemand="false" UseVerticalStripPlacement="true" runat="server">
    <ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="First Tab" runat="server">
    <ContentTemplate>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
    </p>
    </ContentTemplate>    
    </ajaxToolkit:TabPanel>
    <ajaxToolkit:TabPanel ID="TabPanel2" HeaderText="Second Tab" runat="server">
    <ContentTemplate>
    <p>
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas porttitor congue massa. Fusce posuere, magna sed pulvinar ultricies, purus lectus malesuada libero, sit amet commodo magna eros quis urna.
    </p>
         
    </ContentTemplate>
    </ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

In addition, you can use the TabStripPlacement property to control whether the tab strip appears at the left or right or top or bottom of the tab panels:

Tab Keyboard Navigation

Another highly requested feature for the Tabs control is support for keyboard navigation. The Tabs control now supports the arrow keys and the Home and End keys.

In order for the arrow keys to work, you must first move focus to the tab control on the page by either clicking on a tab with your mouse or repeatedly hitting the Tab key.

You can try out the new keyboard navigation support by trying any of the demos included in the Tabs sample page:

http://www.asp.net/ajaxLibrary/AjaxControlToolkitSampleSite/Tabs/Tabs.aspx

Summary

I hope that you take advantage of the new Balloon Popup control and the new features which we introduced for the Tabs control. We added a lot of new features to the Tabs control in this release including support for on-demand tabs, support for vertical tabs, and support for tab keyboard navigation.

I want to thank the developers on the Superexpert team for all of the hard work which they put into this release.