DxToolbar Class

A Toolbar component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.dll

Declaration

public class DxToolbar :
    DxToolbarBase

Remarks

<DxToolbar> adds a toolbar to your Blazor application.

Toolbar Overview

NOTE

Online Demo: Toolbar

Add Toolbar to a Project

To add a <DxToolbar> component to an application, follow the steps below:

  1. Configure the application as described in Configure a Blazor Application.
  2. Add the <DxToolbar>...</DxToolbar> markup to your application.
  3. Configure the component (see the sections below).

Items

You can specify toolbar items between the <DxToolbar> and </DxToolbar> tags or add them to the DxToolbarBase.Items collection. Each item is a DxToolbarItem class instance that can have a collection of child items (the DxToolbarItem.Items property).

The Toolbar component can contain drop-down buttons, checked and radio buttons, and link buttons. You can customize item appearance, group items, and use templates to specify an item's content. Refer to the DxToolbarItem class description for more information.

<DxToolbar>
    <Items>
        <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-left" />
        <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-center" />
        <DxToolbarItem GroupName="align" IconCssClass="oi oi-align-right" />
        <DxToolbarItem Text="Font Style" BeginGroup="true">
            <Items>
                <DxToolbarItem IconCssClass="oi oi-bold" 
                              Text="Bold" 
                              GroupName="bold" />
                <DxToolbarItem IconCssClass="oi oi-italic"  
                              Text="Italic" 
                              GroupName="italic" />
                <DxToolbarItem IconCssClass="oi oi-underline" 
                              Text="Underline" 
                              GroupName="underline" />
            </Items>
        </DxToolbarItem>
    </Items>    
</DxToolbar>

Toolbar Checked Items

Toolbar Title

Use the Title property to specify a toolbar's title. The title is displayed on the left of the toolbar items.

<DxToolbar Title="Operations:">
    <DxToolbarItem Text="Insert"></DxToolbarItem>
    <DxToolbarItem Text="Edit"></DxToolbarItem>
    <DxToolbarItem Text="Delete"></DxToolbarItem>
</DxToolbar>

Toolbar Title

Render Style

The table below lists API members that allow you to customize the appearance of root items.

Member Description
DxToolbar.ItemRenderStyleMode Specifies the color fill mode for all toolbar items.
DxToolbar.ItemSizeMode Specifies the toolbar item’s size.
DxToolbarItem.RenderStyle Specifies the item's predefined style.
DxToolbarItem.RenderStyleMode Specifies the item's color fill mode.

Toolbar Item Render Style

NOTE

Online Demo: Toolbar - Render Style

Handle Item Clicks

Use the following events to handle toolbar item clicks:

Event Description
DxToolbarBase.ItemClick Fires when users activate any item in the toolbar.
DxToolbarItemBase.Click Fires when users activate a toolbar item.

The code below demonstrates how to handle the listed events.

<p>The clicked item: @ClickedItem</p>

<DxToolbar ItemClick="@OnItemCommonClick">
    <DxToolbarItem Click="@OnInsertItemClick" Text="Insert"></DxToolbarItem>
    <DxToolbarItem Click="@OnEditItemClick" Text="Edit"></DxToolbarItem>
    <DxToolbarItem Click="@OnDeleteItemClick" Text="Delete"></DxToolbarItem>
</DxToolbar>

@code  {
    public string ClickedItem { get; set; } = "";

    void OnInsertItemClick(ToolbarItemClickEventArgs args) {
        ClickedItem = "Insert";
    }
    void OnEditItemClick(ToolbarItemClickEventArgs args) {
        ClickedItem = "Edit";
    }
    void OnDeleteItemClick(ToolbarItemClickEventArgs args) {
        ClickedItem = "Delete";
    }

    ElementReference alertReference;
    void OnItemCommonClick(ToolbarItemClickEventArgs e) {
        JSRuntime.InvokeAsync<string>("ShowAlert", alertReference, $"A toolbar button was clicked");
    }
}

Toolbar Item Click

Adaptivity

The Toolbar component supports adaptive mode. The following properties specify how the toolbar responds when the container’s width changes:

<DxToolbar Title="New Article" 
           ItemRenderStyleMode="ToolbarRenderStyleMode.Plain" 
           ItemSizeMode="SizeMode.Small" 
           AdaptivityMinRootItemCount="2" 
           AdaptivityAutoHideRootItems="true" 
           AdaptivityAutoCollapseItemsToIcons="true">
    <DxToolbarItem BeginGroup="true" Name="Undo" IconCssClass="oi oi-undo" AdaptiveText="Undo" />
    <DxToolbarItem Name="Redo" IconCssClass="oi oi-redo" AdaptiveText="Redo" />
    <DxToolbarItem Name="FontFamily" Text="@currentFont.Name" BeginGroup="true" AdaptiveText="Font Family">
        <Items>
            @foreach (var font in FontInfo.DefaultFonts) {
                <DxToolbarItem Text="@font.Name" 
                               Style="@font.GetCssString()" 
                               Click="(x) => { currentFont = font; }" 
                               GroupName="fontGroup" />
            }
        </Items>
    </DxToolbarItem>
    <DxToolbarItem Name="FontSize" Text="@currentSize.Size.ToString()" BeginGroup="true" AdaptiveText="Font Size">
        <Items>
            @foreach (var fontSize in FontSizeInfo.DefaultFontSizes) {
                <DxToolbarItem Text="@fontSize.Size.ToString()" 
                               Click="(x) => { currentSize = fontSize; }" 
                               GroupName="fontSizeGroup" />
            }
        </Items>
    </DxToolbarItem>
    <DxToolbarItem AdaptivePriority="1" 
                   GroupName="font-bold" 
                   BeginGroup="true" 
                   Name="Bold" 
                   IconCssClass="oi oi-bold" 
                   AdaptiveText="Bold" />
    ...
    <DxToolbarItem AdaptivePriority="2" 
                   BeginGroup="true" 
                   GroupName="align" 
                   IconCssClass="oi oi-align-left" />
    ...
</DxToolbar>

Toolbar Adaptivity

NOTE

Online Demo: Toolbar - Adaptivity

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxDecoratedComponent
DxComponentBase
DxComponentBase<DevExpress.Blazor.Internal.JSInterop.ToolbarJSInteropProxy>
DxControlComponent<DxToolbarBase, DevExpress.Blazor.Internal.JSInterop.ToolbarJSInteropProxy>
DxToolbarBase
DxToolbar
See Also