[Expand]General Information
[Expand]WinForms Controls
[Expand]ASP.NET Controls and MVC Extensions
[Collapse]ASP.NET Bootstrap Controls
  Overview
 [Expand]Getting Started
 [Expand]Demos and Sample Applications
 [Expand]Project Configuration
 [Expand]Grid View
 [Expand]Card View
 [Expand]Scheduler
 [Expand]Spreadsheet
 [Expand]Rich Text Editor
 [Expand]Charts
  Sparkline
 [Expand]Data Editors
 [Collapse]Site Navigation
   Accordion
   Floating Action Button
   Menu
   Pager
  [Expand]Ribbon
   Tab Control
   Toolbar
   Tree View
 [Expand]Site Layout
  File Manager
 [Expand]Redistribution and Deployment
 [Expand]API Reference
[Expand]ASP.NET Core Bootstrap Controls
[Expand]WPF Controls
[Expand]Xamarin Controls
[Expand]Windows 10 App Controls
[Expand]Office File API
[Expand]Reporting
[Expand]Report and Dashboard Server
[Expand]Dashboard
[Expand]eXpressApp Framework
[Expand]eXpress Persistent Objects
[Expand]CodeRush
[Expand]CodeRush Classic
[Expand]Cross-Platform Core Libraries
[Expand]Tools and Utilities
 End-User Documentation
View this topic on docs.devexpress.com (Learn more)

Toolbar

The BootstrapToolbar control is a set of buttons arranged in groups.

The main Bootstrap Toolbar features are:

Expanded Multiple Button Types

Use the control's BootstrapToolbar.Items collection to populate it with buttons. Root-level toolbar items are instances of the BootstrapToolbarItem class. Each button can display an icon, a text or both. You can customize buttons to turn them into the following types:

Button

Drop-down list

Child items are specified as BootstrapToolbarMenuItem objects that belong the parent item’s Items collection.

The BootstrapToolbarMenuItem.DropDownMode property allows you to split a drop-down item into two buttons: one behaves like a regular button; the other invokes a pop-up menu.

Radio button

The Radio Group UI specifies that only one toolbar item within a group can be checked at a time. To enable this functionality, specify equal MenuItem.GroupName properties for toolbar items that should be used as a Radio Group.

Check box

Set a toolbar item's MenuItem.GroupName property to a unique value to force the item to change its checked state on every click.

Custom

Use the MenuItem.Template property to create a custom toolbar item.

Expanded Data Binding

Use the ASPxHierarchicalDataWebControl.DataSourceID property to bind a Toolbar control to a data source object. The object should implement the System.Web.UI.IHierarchicalEnumerable or System.Web.UI.IHierarchicalDataSource interface.

A data-bound Toolbar automatically creates a toolbar item for each data item. A created item's properties obtain values from data item attributes with corresponding names. You can also use the following properties to explicitly specify the mapping between toolbar item properties and data item attribute names:

Expanded Bootstrap-Specific Render

Use the BootstrapToolbarItemBootstrapSpecificSettings.RenderOption property to specify contextual styles for the Toolbar's root items.

Expanded Templates

The Bootstrap Toolbar control supports templates that allow you to customize the control's appearance and layout. A template can be applied to all toolbar items (control-level templates) or a specific item (item-level templates).

Control-level templates' API:

Item-level templates' API:

Expanded Adaptivity

The Bootstrap Toolbar automatically adapts to container size change or to various target device sizes. The following settings allow you to control what happens when the toolbar cannot fit into its container:

  1. The BootstrapToolbarSettingsAdaptivity.Title property specifies the toolbar title that is never hidden.

  2. MenuSettingsAdaptivity.EnableCollapseRootItemsToIcons set to true hides the text of all items that contain icons. Additionally, you can use the item's MenuItem.AdaptivePriority property to hide a specific item first of others.

  3. MenuSettingsAdaptivity.EnableAutoHideRootItems set to true moves the root items one by one to the root submenu until the toolbar contains the minimum number of root items (specified by the BootstrapToolbarSettingsAdaptivityBase.MinRootItemsCount property).

Expanded Automatic Postback

You can set the ASPxMenuBase.AutoPostBack property to true to automatically initiate a postback when a user performs an action that can be handled on the server side (for example, clicks a toolbar item).

One of the following events is fired on the server in response to a postback:

Expanded Fully Featured Client-Side API

On the client side, use the BootstrapClientToolbar class to interact with the control as specified below:

Expanded Online Demos

DevExpress Bootstrap controls are shipped with online feature-based demos. To preview the Bootstrap Toolbar and its features, click See Demos.

Expanded See Also

Is this topic helpful?​​​​​​​