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.
