BootstrapToolbarItemCollection.Item[Int32] Property

Provides indexed access to individual items within the BootstrapToolbarItemCollection.

Namespace: DevExpress.Web.Bootstrap

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

Declaration

C#

public BootstrapToolbarItem this[int index] { get; set; }

VB.NET

Public Property Item(index As Integer) As BootstrapToolbarItem

Parameters

Name	Type	Description
index	Int32	An integer value specifying the zero-based index of the item to be accessed.

Property Value

Type	Description
BootstrapToolbarItem	An BootstrapToolbarItem object representing an item located at the specified index within the collection.

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>