BootstrapToolbarItem Class

Implements the toolbar item functionality.

Namespace: DevExpress.Web.Bootstrap

Assembly: DevExpress.Web.Bootstrap.v20.2.dll

NuGet Package: DevExpress.Web.Bootstrap

Declaration

C#

public class BootstrapToolbarItem :
    BootstrapToolbarItemBase

VB.NET

Public Class BootstrapToolbarItem
    Inherits BootstrapToolbarItemBase

Related API Members

The following members return BootstrapToolbarItem objects:

• BootstrapToolbarItemCollection.Add()
• BootstrapToolbarItemCollection.Add(String, String, String)
• BootstrapToolbarItemCollection.Add(String, String)
• BootstrapToolbarItemCollection.Add(String)
• BootstrapToolbarItemCollection.Find(Predicate<BootstrapToolbarItem>)
• BootstrapToolbarItemCollection.FindByName(String)
• BootstrapToolbarItemCollection.FindByText(String)
• BootstrapToolbarItemCollection.FindRecursive(Predicate<BootstrapToolbarItem>)
• BootstrapToolbarItemCollection.GetVisibleItem(Int32)
• BootstrapToolbarItemCollection.Item[Int32]

Example

This example demonstrates the basic functionality of the Toolbar control.

1. Initialize a new instance of the BootstrapToolbar class.
2. Add required toolbar items (BootstrapToolbarItem objects) to the BootstrapToolbar.Items collection.

3. Additional members:

   • BootstrapToolbar.ItemClick occurs when an end-user clicks a toolbar button.
   • MenuItem.Name specifies a button’s name, which identifies the item in the toolbar’s Items collection.
   • MenuItem.Text specifies a button’s display text.
   • MenuItem.BeginGroup – if set to true, the button becomes the first button in a new button group.
   • BootstrapToolbarItemBase.IconCssClass specifies the CSS class of an icon displayed by a toolbar item.
   • MenuItem.NavigateUrl specifies a button’s navigation location. When this property is specified, the button is rendered as a hyperlink.

The image below shows the result:

JS

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

ASPX

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

Inheritance

Object

StateManager

CollectionItem

MenuItem

BootstrapToolbarItemBase

BootstrapToolbarItem