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.

<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 button '" + e.item.name + "' 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.

<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

<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.

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.

<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.

<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.

<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:

  • BeginGroupField – Specifies the name of a data field that provides values defining whether a toolbar item should start a new group.
  • IconCssClassField - Specifies the name of a data field providing CSS classes of icons displayed by toolbar items.
  • NameField - Specifies the name of a data field providing toolbar item names.
  • NavigateUrlField - Specifies the name of a data field providing toolbar item navigation locations.
  • TextField - Specifies the name of a data field providing toolbar item display texts.
  • ToolTipField - Specifies the name of a data field providing toolbar item tooltip texts.
<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.
<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();
}

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:
<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.

BootstrapClientToolbar methods:

BootstrapClientMenuItem methods

<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>
Screen Size
Color Themes
Demo QR Code