Click here to Skip to main content
15,032,967 members
Articles / Web Development / ASP.NET
Posted 1 Feb 2005


192 bookmarked

ASP.NET Cross-Browser Toolbar

Rate me:
Please Sign up or sign in to vote.
4.86/5 (53 votes)
28 Mar 2005CPOL8 min read
A flexible cross-browser ToolBar component with rich designer support. Supports arbitrary toolbar items, JavaScript rollover images, disabled items, and provides convenient postback event handling.

Sample Image

Horizontal Toolbar in Mozilla. The selected item displays a rollover image.



Image 2

I needed a flexible toolbar component for an ASP.NET project. First, I was looking around on the WWW, but didn't find anything that really fitted my requirements:

  • Designer support plus a flexible API for runtime manipulation.
  • Cross-browser support (no need to support NS 4.x).
  • Easy installation and deployment (no support files to copy etc.).
  • Flexible formatting and skinning through CSS.
  • Free deployment - it should be used in open source projects.

As a result, I came up with my own solution. This component renders fine on all major browsers and it's very easy to use due to its rich designer support. The main features:

  • Renders fine on all major browsers.
  • Full designer support.
  • Supports predefined item types such as images, text fields, links or image buttons.
  • Arbitrary controls can be plugged in via container items.
  • Optional rollover images.
  • Support for different images if item is disabled.
  • Renders both horizontally and vertically.
  • Convenient event handling.
  • Custom separators.

A working online demo of the component is available here.

Building Toolbars in the designer

To create a Toolbar, no coding is required. If you have added the control to your IDE's toolbox, just drag it on your webform. As there is nothing to preview yet, it will display a grey rectangle:

Image 3

All the control's properties are accessible via the Toolbar section of the property grid. They are pretty self-explanatory:

Image 4

To add items to the toolbar, simply click on the button of the Items property (see above) which opens a new designer window. Below is a screenshot of the toolbar settings I used for the project sample. As you can see, the Toolbar contains six different items. New items can easily be added through the dropdown list in the bottom left corner:

Image 5

Setting up Toolbar and Toolbar items is pretty straightforward as you get a proper preview of the Toolbar at design time. So the best way to get to know the component is to play around with the different settings, in your IDE...

Image 6

Toolbar Items

The Toolbar comes with built-in support for various item types. Furthermore, arbitrary controls can be plugged into the Toolbar by using an empty container item. (BTW - you can also use the items without a Toolbar. If you just need a single image button with rollovers on your page - just drag the control directly on your web form and you're done.)


This item renders a simple image with optional rollovers. An additional DisabledImageUrl can be specified which is rendered if the item's RenderDisabled property is true. An additional label (LabelText property) can be specified which is rendered next to the image.


This item renders an image button which posts back to the server and raises an ItemSubmitted event on the toolbar. Like the ToolbarImage control, this item supports rollover and disabled images. If the item's RenderDisabled property is set to true, a normal image is rendered rather than an image button.

An additional label (LabelText property) can be specified which is rendered next to the image button. In a future release, I will replace this label through a LinkButton that also posts back to the server.


This item renders a hyperlinked image. Like the ToolbarImage control, this item supports rollover and disabled images. If the item's RenderDisabled property is set to true, a normal image is rendered rather than a link. An additional label (LabelText property) can be specified which is rendered as part of the hyperlink (see vertical Toolbar sample image above).


This item renders an ASP.NET TextBox. You can get/set the text of the item through the Text property of the item. To format the textbox, use the properties of the item itself (CssClass, Width, Height etc.). If text was changed, this item raises an ItemSubmitted event on the toolbar. Like the standard ASP.NET TextBox, it provides an AutoPostBack property which causes an automatic postback to the server if text was changed.


Renders a simple text, enclosed in HTML span tags. Can be used to render text in its own item cell. This is a safe way to assign text to the toolbar without getting formatting issues (see Troubleshooting for more info).


Renders a separator item. Separators are very simple controls which are configured via the Toolbar's properties. This enables you to conveniently configure all your Toolbar's separators at once. If you want to separate your items with more flexibility, just use ToolbarImage items instead.


This class is an empty container for arbitrary controls. This enables you to plug arbitrary controls into the toolbar at runtime.

Say you want to add an ASP.NET DropDown control to the Toolbar:

  • Add a ControlContainerItem to your Toolbar using the designer (don't forget the ItemId - you need it to reference the item at runtime!).
  • At runtime, you can assign the DropDown control with only two lines of code:
private void Page_Load(object sender, System.EventArgs e)
  //get the container item
  ToolbarItem item = this.Toolbar1.Items["DropdownItem"];
  //add the dropdown to the container's Controls collection

The sample project contains a web form (containeritem.aspx) which adds a CheckBox control at runtime.

Using the code

PostBack event handling

You can register event handlers for toolbar items that post back through the Toolbar's ItemPostBack event. If an event occurs, the Toolbar submits the item that caused the postback to the event handler. If there are several items that post back to the server, you will probably use the ItemId property to determine how to respond to the event.

A typical event handler looks like this:

/// <summary>
/// Handles the toolbar's button events.
/// </summary>
/// <param name="item">Clicked toolbar button.</param>
private void Toolbar1_ItemPostBack(ToolbarItem item)
  if (item.ItemId == "SAVE")
      //save something
  else if (item.ItemId == "DELETE")
      //delete something

Processing Toolbar items at runtime

You can easily customize your Toolbar at runtime. The Toolbar's Items collection provides everything you need to find, add or remove items:

Image 7

As an example: the Edit button of the sample project is being created at runtime. In the code below, a new ToolbarButton object is being created. Afterwards, the index of the Save button is being determined and used to add the new Edit button right after the Save button.

/// <summary>
/// Creates an additional toolbar button and adds it to
/// the toolbar's <c>Items</c> collection.
/// </summary>
private void CreateEditButton()
  //create an "edit" button
  ToolbarButton editItem = new ToolbarButton();
  editItem.ID = "EditItem";
  editItem.ImageUrl = "images/edit.gif";
  editItem.RollOverImageUrl = "images/edit_ro.gif";
  editItem.ItemId = "Edit";
  editItem.ToolTip = "Click to enable save button";
  editItem.ItemCellWidth = Unit.Pixel(100);
  //get the index of the save button and insert the
  //edit button right after this one
  int index = this.Toolbar1.Items.IndexOf("Save");
  this.Toolbar1.Items.Insert(index + 1, editItem);

Note that dynamically created toolbar item controls are not being stored in ViewState, so you will have to recreate them on postback!


Rollovers don't work

The rollover JavaScript uses the id attribute of the HTML element that contains the image (an HTML image or an image button) to exchange rollover images.

<img src="save.gif" id="saveitem" /> 

However, this attribute is only available if the ID (not ItemId!) property of the ASP.NET ToolbarItem object was set properly. So if rollovers don't work, check the IDs of your controls (right after having checked your image URLs, of course ;-).

If you configure your Toolbar in the designer, IDs are automatically generated. However, if you add your items at runtime through code, you need to specify an ID yourself:

//create an "edit" button
ToolbarButton editItem = new ToolbarButton();
editItem.ID = "EditItem";

General formatting troubles with Non-IE browsers

Per default, ASP.NET renders down-level output for all non-IE browsers (pathetic...) which prevents the rendering of CSS styles for the Toolbar. As an example, your toolbar could look bad if you use labels for image items:

Image 8

To properly identify Firefox & Co., it's important to have an updated browserCaps configuration (stands for "Brower Capabilities"). Rob Everhardt did a great job here. You can find an introduction to browserCaps, links and downloads at his site.

If you can't update your browserCaps for some reason, you can also fix the Toolbar layout with a declaration in an external stylesheet (the sample assumes the CSS class of the Toolbar is mytoolbar).

/* adjust images and image buttons via external CSS */
.mytoolbar img, .mytoolbar input
  border: none;

The sample looks like crap on Netscape 4.x

Yes, it does, and I can perfectly live with that. I had to choose between deprecated HTML tags (align, border etc.) and proper CSS skinning. I chose the latter which works perfectly with all major browsers I tested.

However, if you need a down-level version of this control, you should be able to get it with very little effort (but don't expect me to do it for you ;-). Have a look at the rendering methods of the Toolbar and ImageItem classes and exchange the CSS rendering with the corresponding HTML attributes.

Acknowledgements and Licensing

To output JavaScript for the rollover links, I started with a procedure from MetaBuilders' RollOverLink which I adapted to my needs. MetaBuilders offer a nice variety of controls on their site - check it out.

The background theme of the horizontal Toolbar sample was taken from the great PHPBB2 bulletin board. Graphics of the vertical Toolbar example are mine, feel free to use them.

This control is released under the less restrictive GNU Lesser General Public License (LGPL). While you can't slap your name on it and claim it to be yours (or even sell it), you are free to adapt it to your needs and use it in both free and commercial applications. Have fun!


This is the first release and I'm pretty sure there will be bug fixes and enhancements. If you don't want to check back for updates, you can subscribe to a newsletter at my site.


  • V 1.0: Initial release (Jan 22, 2005)
  • V 1.01: Updated properties with 'Localizable' attributes to support i18n.
  • V 1.02: Made library CLS compliant (thanks to Jorge Castellanos)


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Philipp Sumi
Architect I'm a gun for hire
Switzerland Switzerland
Philipp is an independent software engineer with great love for all things .NET.
He lives in Winterthur, Switzerland and his home on the web is at

Comments and Discussions

Questiondoesn't work with IE on <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...> Pin
cn yee19-Nov-12 16:23
Membercn yee19-Nov-12 16:23 
Questionhow to install Toolbar in browser? Pin
Digital Reflection28-Apr-11 17:56
MemberDigital Reflection28-Apr-11 17:56 
QuestionProblem with MastePage Pin
amirtap14-Jan-09 11:07
Memberamirtap14-Jan-09 11:07 
GeneralMy vote of 2 Pin
ToohTooh5-Jan-09 8:54
MemberToohTooh5-Jan-09 8:54 
GeneralRe: My vote of 2 Pin
Jeremy D Lee6-Jul-09 10:38
MemberJeremy D Lee6-Jul-09 10:38 
GeneralRe: My vote of 2 Pin
Marco Bertschi15-Jan-13 4:21
professionalMarco Bertschi15-Jan-13 4:21 
Questiondisplay data vertically Pin
Basheer10-Jan-08 23:51
MemberBasheer10-Jan-08 23:51 
GeneralRe: display data vertically Pin
Philipp Sumi11-Jan-08 0:15
MemberPhilipp Sumi11-Jan-08 0:15 
GeneralFantastic Component Pin
sumitkm26-Mar-07 0:32
Membersumitkm26-Mar-07 0:32 
GeneralRe: Fantastic Component Pin
Philipp Sumi27-Mar-07 10:21
MemberPhilipp Sumi27-Mar-07 10:21 
GeneralExcellent Pin
John Whiteman29-Dec-06 10:58
MemberJohn Whiteman29-Dec-06 10:58 
QuestionHaving a customised toolbar need to work in other browsers Pin
DotNetAnish3-Dec-06 4:09
MemberDotNetAnish3-Dec-06 4:09 
AnswerRe: Having a customised toolbar need to work in other browsers Pin
Philipp Sumi3-Dec-06 4:17
MemberPhilipp Sumi3-Dec-06 4:17 
GeneralMagicAjax support Pin
GOHDS12-Jan-06 8:38
MemberGOHDS12-Jan-06 8:38 
GeneralRe: MagicAjax support Pin
Philipp Sumi12-Jan-06 8:44
MemberPhilipp Sumi12-Jan-06 8:44 
GeneralClient Javascript Pin
jay_dubal11-Jan-06 19:19
Memberjay_dubal11-Jan-06 19:19 
GeneralRe: Client Javascript Pin
Philipp Sumi11-Jan-06 21:48
MemberPhilipp Sumi11-Jan-06 21:48 
GeneralHotmail Style Pin
jay_dubal5-Jan-06 6:10
Memberjay_dubal5-Jan-06 6:10 
GeneralRe: Hotmail Style Pin
Philipp Sumi5-Jan-06 6:38
MemberPhilipp Sumi5-Jan-06 6:38 
QuestionButton distance Pin
User 91483324-Nov-05 22:43
MemberUser 91483324-Nov-05 22:43 
AnswerRe: Button distance Pin
Philipp Sumi28-Nov-05 21:56
MemberPhilipp Sumi28-Nov-05 21:56 
GeneralRe: Button distance Pin
User 91483329-Nov-05 1:11
MemberUser 91483329-Nov-05 1:11 
QuestionGreat Toolbar, but still a question Pin
Thomas-H.27-Sep-05 1:19
MemberThomas-H.27-Sep-05 1:19 
AnswerRe: Great Toolbar, but still a question Pin
Philipp Sumi15-Nov-05 1:26
MemberPhilipp Sumi15-Nov-05 1:26 
QuestionRollover malfunctions Pin
TyP22-Sep-05 11:51
MemberTyP22-Sep-05 11:51 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.