Bootstrap Toolbar Demo | DevExpress Bootstrap Controls for ASP.NET

Default Toolbar

The Toolbar Control allows you to supply your web application with a lightweight adaptive toolbar interface.

The Toolbar Control is presented as a set of buttons arranged in groups. Toolbar buttons are elements of the Items collection. Each button can display an icon, a text or both.

Client ItemClick and server ItemClick events - Occur when an end-user clicks a toolbar button.
BootstrapToolbarItem.Name - Specifies a button's name, which identifies the item in the toolbar's Items collection.
BootstrapToolbarItem.Text - Specifies a button's display text.
BootstrapToolbarItem.BeginGroup - If set to true, the button becomes the first button in a new button group.
BootstrapToolbarItem.IconCssClass - Specifies the CSS class of an icon displayed by a toolbar item.
BootstrapToolbarItem.NavigateUrl - Specifies a button's navigation location. When this property is specified, the button is rendered as a hyperlink.

ASPX JS Copy

<dx:BootstrapToolbar runat="server">
    <Items>
        <dx:BootstrapToolbarItem Name="Copy" IconCssClass="fa fa-copy" />
        <dx:BootstrapToolbarItem Name="Paste" IconCssClass="fa fa-paste" />
        <dx:BootstrapToolbarItem Name="Item1" Text="Item" />
        <dx:BootstrapToolbarItem Name="Link" Text="Link" NavigateUrl="#DefaultToolbar" />
        <dx:BootstrapToolbarItem Name="Left" BeginGroup="true" IconCssClass="fa fa-align-left" />
        <dx:BootstrapToolbarItem Name="Center" IconCssClass="fa fa-align-center" />
        <dx:BootstrapToolbarItem Name="Right" IconCssClass="fa fa-align-right" />
    </Items>
    <ClientSideEvents ItemClick="onDefaultToolbarItemClick" />
</dx:BootstrapToolbar>

function onDefaultToolbarItemClick(s, e) {
    dxbsDemo.showToast("The '" + e.item.name + "' button has been clicked.");
}

Each toolbar item can have multiple child items, which are specified as elements of the parent item's Items collection. Note that all root-level toolbar items are BootstrapToolbarItem objects, while items of subsequent hierarchy levels are BootstrapToolbarMenuItem objects.

A root-level menu item that has child items is rendered as a drop-down button displaying a hierarchical popup menu when clicked.

The DropDownMode property allows you to specify that an item should be split into two buttons, one of which behaves like a regular button, and the other invokes a popup menu. You can process clicks on these buttons separately.

ASPX Copy

<dx:BootstrapToolbar runat="server">
    <Items>
        <dx:BootstrapToolbarItem IconCssClass="fa fa-copy">
        </dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="DropDown">
            <Items>
                <dx:BootstrapToolbarMenuItem Text="Keep Formatting"></dx:BootstrapToolbarMenuItem>
                <dx:BootstrapToolbarMenuItem Text="Keep Text Only"></dx:BootstrapToolbarMenuItem>
                <dx:BootstrapToolbarMenuItem Text="Paste Special">
                    <Items>
                        <dx:BootstrapToolbarMenuItem Text="Option 1"></dx:BootstrapToolbarMenuItem>
                        <dx:BootstrapToolbarMenuItem Text="Option 2"></dx:BootstrapToolbarMenuItem>
                    </Items>
                </dx:BootstrapToolbarMenuItem>
            </Items>
        </dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="DropDownMode=True" DropDownMode="true">
            <Items>
                <dx:BootstrapToolbarMenuItem Text="Option 1"></dx:BootstrapToolbarMenuItem>
                <dx:BootstrapToolbarMenuItem Text="Option 2"></dx:BootstrapToolbarMenuItem>
            </Items>
        </dx:BootstrapToolbarItem>
    </Items>
</dx:BootstrapToolbar>

Render Option

You can specify contextual styles for the Toolbar control's root-level elements using the Item.SettingsBootstrap.RenderOption property. Refer to the Buttons - Options section of the Bootstrap documentation to learn more about different style options for buttons provided by the Bootstrap framework

ASPX Copy

<dx:BootstrapToolbar runat="server">
    <Items>
        <dx:BootstrapToolbarItem Text="Info">
            <SettingsBootstrap RenderOption="Info" />
        </dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="Success">
            <SettingsBootstrap RenderOption="Success" />
        </dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem IconCssClass="fa fa-exclamation-triangle" BeginGroup="true">
            <SettingsBootstrap RenderOption="Danger" />
        </dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem IconCssClass="fa fa-exclamation-triangle" />
        <dx:BootstrapToolbarItem IconCssClass="fa fa-exclamation-triangle">
            <SettingsBootstrap RenderOption="Warning" />
        </dx:BootstrapToolbarItem>
    </Items>
</dx:BootstrapToolbar>

Item Selection

The Toolbar control supports selecting items with a mouse click. Set the AllowSelectItem property to true to enable this. Only one item can be selected at a time.

AllowSelectItem - Specifies whether item selection is allowed.
BootstrapToolbarItem.Selected - Specifies a root-level item's selection status.
BootstrapToolbarMenuItem.Selected - Specifies a nested menu item's selection status.
BootstrapToolbar.SelectedItem - Gets or sets the selected item on the server side.

Handle the client ItemClick or server ItemClick event to detect a selection change. You can identify the clicked item by the value of its Name property.

ASPX Copy

<dx:BootstrapToolbar runat="server" AllowSelectItem="true">
    <Items>
        <dx:BootstrapToolbarItem Name="Copy" IconCssClass="fa fa-copy" />
        <dx:BootstrapToolbarItem Name="Paste" IconCssClass="fa fa-paste">
            <Items>
                <dx:BootstrapToolbarMenuItem Text="Option 1"></dx:BootstrapToolbarMenuItem>
                <dx:BootstrapToolbarMenuItem Text="Option 2"></dx:BootstrapToolbarMenuItem>
            </Items>
        </dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Name="Item1" Text="Item" Selected="true" />
    </Items>
</dx:BootstrapToolbar>

Item Checking

The toolbar control allows you to create a Radio Group UI by letting an end-user check toolbar buttons and popup menu items.

To enable this functionality, arrange toolbar items into groups using the BootstrapToolbarItem.GroupName and BootstrapToolbarMenuItem.GroupName properties. Similarly to radio buttons, only one toolbar item within a group can be checked at a time. Also you can set the GroupName to a unique value to force the menu item to change its checked state on every click.

You can detect a change in an item's checked state by handling the client ItemClick or server ItemClick event.

Item.Checked - specifies the item's checked state
ClientItem.GetChecked / ClientItem.SetChecked - gets/sets the item's checked state on the client-side

ASPX Copy

<dx:BootstrapToolbar runat="server">
    <Items>
        <dx:BootstrapToolbarItem GroupName="align" IconCssClass="fa fa-align-left" />
        <dx:BootstrapToolbarItem GroupName="align" IconCssClass="fa fa-align-center" />
        <dx:BootstrapToolbarItem GroupName="align" IconCssClass="fa fa-align-right" />
        <dx:BootstrapToolbarItem BeginGroup="true" Checked="true" GroupName="group2" IconCssClass="fa fa-adjust" />
        <dx:BootstrapToolbarItem IconCssClass="fa fa-bell">
            <Items>
                <dx:BootstrapToolbarMenuItem Text="Option 1" GroupName="group3"></dx:BootstrapToolbarMenuItem>
                <dx:BootstrapToolbarMenuItem Text="Option 2" GroupName="group3"></dx:BootstrapToolbarMenuItem>
            </Items>
        </dx:BootstrapToolbarItem>
    </Items>
</dx:BootstrapToolbar>

Auto Postback

The Auto Postback feature allows the Toolbar control to automatically initiate a postback when an end-user performs an action that you can handle on the server side (for example, clicks a toolbar item). Set the AutoPostBack property to true to enable this feature.

Depending on the action, one of the following events fires on the server in response to a postback:

ItemClick - Fires when a toolbar item has been clicked.
ItemCommand - Fires when a control contained within a templated toolbar item raises the Command event.

Note that handling any of these events enables the Auto Postack feature.

ASPX C#Copy

<dx:BootstrapToolbar ID="ToolbarAutoPostBack" runat="server" AutoPostBack="true" OnItemClick="ToolbarAutoPostBack_ItemClick">
    <Items>
        <dx:BootstrapToolbarItem Text="Item 1" Name="Item 1"></dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="Item 2" Name="Item 2"></dx:BootstrapToolbarItem>
    </Items>
</dx:BootstrapToolbar>

protected void ToolbarAutoPostBack_ItemClick(object source, DevExpress.Web.Bootstrap.BootstrapToolbarItemEventArgs e) {
    DemoUtils.ShowToast(AutoPostback, string.Format("The '{0}' button has been clicked.", e.Item.Text));
}

Data Binding

The Toolbar control supports binding to a data source which can be any object that implements the IHierarchicalEnumerable or IHierarchicalDataSource interface (for example, SiteMapDataSource, XmlDataSource, etc.). Set the DataSourceID property to assign a data source to a Toolbar control.

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

ASPX ToolbarItems.xml Copy

<dx:BootstrapToolbar runat="server" DataSourceID="ToolbarDataSource" TextField="Text" NameField="Name" BeginGroupField="BeginGroup" IconCssClassField="Icon">
</dx:BootstrapToolbar>
<asp:XmlDataSource ID="ToolbarDataSource" runat="server" DataFile="~/App_Data/ToolbarItems.xml" XPath="/Toolbar/*"></asp:XmlDataSource>

<?xml version="1.0" encoding="utf-8" ?>
<Toolbar>
  <Item Name="Print" Icon="fa fa-print"></Item>
  <Item Name="Undo" Icon="fa fa-undo"></Item>
  <Item Name="Redo" Icon="fa fa-redo"></Item>
  <Item Name="Plain Format" Icon="fa fa-paint-brush"></Item>
  <Item Text="Zoom" Icon="fa fa-zoom" BeginGroup="true">
    <Item Text="100%"></Item>
    <Item Text="90%"></Item>
    <Item Text="75%"></Item>
    <Item Text="50%"></Item>
  </Item>
  <Item Name="Bold" Icon="fa fa-bold" BeginGroup="True"></Item>
  <Item Name="Italic" Icon="fa fa-italic"></Item>
  <Item Name="Underline" Icon="fa fa-underline"></Item>
  <Item Name="LeftAlign" Icon="fa fa-align-left" BeginGroup="True"></Item>
  <Item Name="CenterAlign" Icon="fa fa-align-center"></Item>
  <Item Name="RightAlign" Icon="fa fa-align-right"></Item>
  <Item Name="JustifyAlign" Icon="fa fa-align-justify"></Item>
</Toolbar>

Templates

The Toolbar control supports templates allowing you to customize control appearance and layout. A template can be applied to all toolbar items (using control level templates) or a specific item (using item level templates). Use the following properties to specify templates.

BootstrapToolbar properties:

ItemTemplate - Specifies a common template used for displaying the content of all items within the current toolbar control.
RootItemTemplate - Specifies a common template used for displaying the content of root items within the current toolbar control.
ItemTextTemplate - Specifies a common template used for displaying the text content of all items within the current toolbar control.
RootItemTextTemplate - Specifies a common template used for displaying the text content of root items within the current toolbar control.
SubMenuTemplate - Specifies a common template used for displaying the content of all submenus within the current toolbar control.

BootstrapToolbarItem properties:

Template - Specifies a template used for displaying the content of the current item.
TextTemplate - Specifies a template used for displaying the text content of the current item.
SubMenuTemplate - Specifies a template used for displaying the content of the submenu of the current item.

ASPX JS Copy

<dx:BootstrapToolbar runat="server">
    <ItemTemplate>
        <span class="<%# Eval("IconCssClass") %>" data-toggle="tooltip" title="<%# Eval("Text") %>"></span>
    </ItemTemplate>
    <ClientSideEvents Init="onClipboardToolbarInit" />
    <Items>
        <dx:BootstrapToolbarItem Name="Paste" Text="Paste" IconCssClass="fa fa-2x fa-paste" />
        <dx:BootstrapToolbarItem Name="Cut" Text="Cut" IconCssClass="fa fa-2x fa-cut fa-rotate-270" />
        <dx:BootstrapToolbarItem Name="Copy" Text="Copy" IconCssClass="fa fa-2x fa-copy" />
    </Items>
</dx:BootstrapToolbar>

function onClipboardToolbarInit(s, e) {
    $('[data-toggle="tooltip"]').tooltip();
}

Adaptivity Settings

The BootstrapToolbar control supports adaptive mode.

The SettingsAdaptivity.Title property specifies the toolbar title.

The following properties control how the toolbar responds when the container's width changes:

SettingsAdaptivity.EnableCollapseRootItemsToIcons - If true, the text of all items that contain icons are hidden. Additionally, you can use the item's BootstrapToolbarItem.AdaptivePriority property to hide a specific item first of others.
SettingsAdaptivity.EnableAutoHideRootItems - If true, the toolbar combines root items one by one in the root submenu until the toolbar contains the minimum number of root items (specified in the SettingsAdaptivity.MinRootItemsCount property).

ASPX Copy

<div class="card m-3">
    <div class="card-header p-0">
        <dx:BootstrapToolbar runat="server">
            <SettingsBootstrap RemoveItemBackgrounds="true" />
            <SettingsAdaptivity Enabled="true" Title="New article" EnableCollapseRootItemsToIcons="true" MinRootItemsCount="4" />
            <Items>
                <dx:BootstrapToolbarItem Name="Paste" Text="Paste" IconCssClass="fa fa-paste" />
                <dx:BootstrapToolbarItem Name="Cut" Text="Cut" IconCssClass="fa fa-cut" />
                <dx:BootstrapToolbarItem Name="Copy" Text="Copy" IconCssClass="fa fa-copy" />
                <dx:BootstrapToolbarItem BeginGroup="true" Name="Undo" IconCssClass="fa fa-undo" />
                <dx:BootstrapToolbarItem Name="Redo" IconCssClass="fa fa-redo" />
                <dx:BootstrapToolbarItem AdaptivePriority="1" GroupName="font-bold" BeginGroup="true" Name="Bold" IconCssClass="fa fa-bold" />
                <dx:BootstrapToolbarItem AdaptivePriority="1" GroupName="font-italic" Name="Italic" IconCssClass="fa fa-italic" />
                <dx:BootstrapToolbarItem AdaptivePriority="1" GroupName="font-underline" Name="Underline" IconCssClass="fa fa-underline" />
                <dx:BootstrapToolbarItem AdaptivePriority="1" GroupName="font-strikethrough" Name="Strikethough" IconCssClass="fa fa-strikethrough" />
                <dx:BootstrapToolbarItem AdaptivePriority="1" BeginGroup="true" GroupName="align" IconCssClass="fa fa-align-left" />
                <dx:BootstrapToolbarItem AdaptivePriority="1" GroupName="align" IconCssClass="fa fa-align-center" />
                <dx:BootstrapToolbarItem AdaptivePriority="1" GroupName="align" IconCssClass="fa fa-align-right" />
                <dx:BootstrapToolbarItem BeginGroup="true" Name="InsertImage" AdaptiveText="Insert Image" IconCssClass="fa fa-image" />
                <dx:BootstrapToolbarItem Name="InsertLink" AdaptiveText="Insert Hyperlink" IconCssClass="fa fa-link"></dx:BootstrapToolbarItem>
                <dx:BootstrapToolbarItem AdaptivePriority="1" BeginGroup="true" AdaptiveText="Help" IconCssClass="fa fa-question-circle" />
            </Items>
        </dx:BootstrapToolbar>
    </div>
</div>

Client-Side Events

This demo illustrates the Toolbar control's client event capabilities and allows you to specify which client-side events you want to track.

The item.name property of the event handler's parameter allows you to identify the item for which an event has been raised.

ItemClick - Fires when an end-user clicks a toolbar item.
ItemMouseOver - Fires when the mouse cursor moves onto a toolbar item.
ItemMouseOut - Fires when the mouse cursor moves outside a toolbar item.
PopUp - Fires for a toolbar item when it displays a drop-down menu.
CloseUp - Fires for a toolbar item when its drop-down menu is closed.

Interact with the interface of a Toolbar control below to see the information about all tracked events raised in response to your actions in the event log.

Trace Events:

Init

ItemClick

ItemMouseOver

ItemMouseOut

PopUp

CloseUp

ASPX JS Copy

<dx:BootstrapToolbar runat="server">
    <ClientSideEvents
        PopUp="onPopUp"
        CloseUp="onCloseUp"
        ItemMouseOver="onItemMouseOver"
        ItemMouseOut="onItemMouseOut"
        ItemClick="onItemClick"
        Init="onInit" />
    <Items>
        <dx:BootstrapToolbarItem Name="Copy" IconCssClass="fa fa-copy" />
        <dx:BootstrapToolbarItem Name="Paste" IconCssClass="fa fa-paste">
            <Items>
                <dx:BootstrapToolbarMenuItem Text="Option 1" Name="Option 1"></dx:BootstrapToolbarMenuItem>
                <dx:BootstrapToolbarMenuItem Text="Option 2" Name="Option 2"></dx:BootstrapToolbarMenuItem>
            </Items>
        </dx:BootstrapToolbarItem>
    </Items>
</dx:BootstrapToolbar>

function onPopUp(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'PopUp');
}
function onCloseUp(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'CloseUp');
}
function onItemMouseOver(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ItemMouseOver');
}
function onItemMouseOut(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ItemMouseOut');
}
function onItemClick(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'ItemClick');
}
function onInit(s, e) {
    dxbsDemo.eventMonitor.trace(s, e, 'Init');
}

Client-Side Functionality

The Toobar control offers an advanced client-side API allowing you to manipulate the control and its elements.

The EnableClientSideAPI property specifies whether or not the client-side API is available. Note that the client-side API is automatically enabled if the ClientInstanceName property is specified or any client-side event available through the ClientSideEvents property is handled.

This demo allows you to interactively explore capabilities of the Toolbar control's client-side API.

ASPX Copy

<dx:BootstrapToolbar ClientInstanceName="toolbar" AllowSelectItem="true" runat="server">
    <Items>
        <dx:BootstrapToolbarItem Text="Item 1"></dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="Item 2"></dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="Item 3" IconCssClass="fa fa-cogs"></dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="Item 4"></dx:BootstrapToolbarItem>
        <dx:BootstrapToolbarItem Text="Item 5"></dx:BootstrapToolbarItem>
    </Items>
</dx:BootstrapToolbar>

Default Toolbar

Render Option

Item Selection

Item Checking

Auto Postback

Data Binding

Templates

Adaptivity Settings

Client-Side Events

Trace Events:

Client-Side Functionality

Screen Size

Color Themes

Demo QR Code

Default Toolbar

DropDown Items

Render Option

Item Selection

Item Checking

Auto Postback

Data Binding

Templates

Adaptivity Settings

Client-Side Events

Trace Events:

Client-Side Functionality

Screen Size

Color Themes

Demo QR Code