Skip to main content

DxToolbarItem Class

Defines an item of the Toolbar component.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v22.1.dll

Declaration

public class DxToolbarItem :
    DxToolbarItemBase

Remarks

The DxToolbarItem class implements the functionality of an individual item (button) in the Toolbar component.

Watch Video: Get Started with Toolbar

The code below demonstrates how to add items to a toolbar and assign Open Iconic icons to them.

<div class="card-header p-2 bg-transparent">
    <DxToolbar>
        <DxToolbarItem Name="Button" Text="Button" Tooltip="Ordinary button" />
        <DxToolbarItem Name="Left"
                       BeginGroup="true"
                       IconCssClass="oi oi-align-left"
                       Tooltip="Align left" />
        <DxToolbarItem Name="Center"
                       IconCssClass="oi oi-align-center"
                       Tooltip="Align center" />
        <DxToolbarItem Name="Right"
                       IconCssClass="oi oi-align-right"
                       Tooltip="Align right" />
        <DxToolbarItem Name="Link"
                       Text="Toolbar documentation"
                       Alignment="ToolbarItemAlignment.Right"
                       BeginGroup="true"
                       NavigateUrl="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxToolbar"
                       Tooltip="Link to Toolbar documentation" />
    </DxToolbar>
</div>

Toolbar Items

Item Appearance

Use the following API members to customize a Toolbar item’s appearance:

  • Text - Specifies the processed toolbar item’s text.

  • IconCssClass - Specifies the CSS class of an item’s icon.

  • CssClass - Specifies the name of the item’s CSS class.
  • Tooltip - Specifies an item’s tooltip text.
  • Alignment - Specifies the item’s position.

You can use a toolbar item’s property values to implement custom content for your toolbar item. In the example below, the item contains a badge and a button that uses the item’s Text property value as the button text.

<div class="card p-2">
    <DxToolbar>
        <Items>
            <DxToolbarItem Text="Products" />
            <DxToolbarItem Text="Support" />
            <DxToolbarItem Text="Documentation" />
            <DxToolbarItem Text="Blog">
                @context.Text<span class="badge rounded-pill bg-primary ms-1">3</span>
            </DxToolbarItem>
         </Items>
    </DxToolbar>
</div>

Toolbar Item: ChildContent Usage

Item Groups

You can divide Toolbar items into groups. Item groups are separated by a space. To start a new item group, set the first group item’s BeginGroup property to true.

Note

The Toolbar aligns grouped items according to the first item’s Alignment property value. Alignment property values of all other items in the group are not taken into account.

<div class="card p-2 bg-transparent">
    <DxToolbar>
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="https://demos.devexpress.com/blazor/Toolbar#DropDown" />
        <DxToolbarItem BeginGroup="true" IconCssClass="oi oi-align-left" />
        <DxToolbarItem IconCssClass="oi oi-align-center" />
        <DxToolbarItem IconCssClass="oi oi-align-right" />
        <DxToolbarItem IconCssClass="oi oi-cog" 
                       Alignment="ToolbarItemAlignment.Right" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="oi oi-info" />
    </DxToolbar>
</div>

Toolbar Overview

Run Demo: Toolbar - Overview

Item Types

A toolbar item displays a drop-down list if you populate the DxToolbarItem.Items collection. The drop-down list can be displayed as a regular sub-menu, as a modal dialog, or as a modal bottom sheet. You can specify the type explicitly or let the component adapt to the device type. To specify the display mode, use the following properties:

Note

The DropDownDisplayMode property is in effect only for root items.

<div class="card-header border p-2">
    <DxToolbar DropDownDisplayMode="DropDownDisplayMode.DropDown">
        <Items>
            <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-left" />
            <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-center" />
            <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-right" />
            <DxToolbarItem Text="Format" BeginGroup="true">
                <Items>
                    <DxToolbarItem Text="Times New Roman" />
                    <DxToolbarItem Text="Tahoma" />
                    <DxToolbarItem Text="Verdana" />
                </Items>
            </DxToolbarItem>
            <DxToolbarItem Text="Size" DropDownDisplayMode="DropDownDisplayMode.ModalDialog">
                <Items>
                    <DxToolbarItem Text="8pt" />
                    <DxToolbarItem Text="10pt" />
                    <DxToolbarItem Text="12pt" />
                </Items>
            </DxToolbarItem>
            <DxToolbarItem Text="Style" DropDownDisplayMode="DropDownDisplayMode.ModalBottomSheet">
                <Items>
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-bold" Text="Bold" />
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-italic" Text="Italic" />
                    <DxToolbarItem IconCssClass="tb-icon tb-icon-underline" Text="Underline" />
                </Items>
            </DxToolbarItem>
        </Items>
    </DxToolbar>
</div>

Drop Down Display Mode

If you set the DxToolbarBase.DropDownDisplayMode or DxToolbarItemBase.DropDownDisplayMode property to ModalDialog/ModalBottomSheet, you can use the DropDownCaption property to specify the modal list’s caption.

<DxToolbar>
    <Items>
        <DxToolbarItem Text="Size" 
                       DropDownDisplayMode="DropDownDisplayMode.ModalDialog" 
                       DropDownCaption="Font Size">
            <Items>
                <DxToolbarItem Text="8pt" />
                <DxToolbarItem Text="10pt" />
                <DxToolbarItem Text="12pt" />
            </Items>
        </DxToolbarItem>
        ...
    </Items>
</DxToolbar>

Run Demo: Toolbar - Drop-Down Items

When a user clicks a menu item, the menu closes. If the item is a checked button or has templated content, the menu does not close. To change this behavior, use the CloseMenuOnClick property.

The code below sets the CloseMenuOnClick property to false for the Times New Roman item. When a user selects this item, the Format menu does not close.

<DxToolbar>
    <Items>
        <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-left" />
        <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-center" />
        <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-right" />
        <DxToolbarItem Text="Format" BeginGroup="true">
            <Items>
                <DxToolbarItem Text="Times New Roman" CloseMenuOnClick="false"/>
                <DxToolbarItem Text="Tahoma" />
                <DxToolbarItem Text="Verdana" />
            </Items>
        </DxToolbarItem>
    </Items>
</DxToolbar>

Close Menu

You can turn a parent item into a split button where the drop-down action is separate from the main click area. To enable this behavior, set the SplitDropDownButton property to true.

<div class="card p-2">
    <DxToolbar DropDownDisplayMode="DropDownDisplayMode.DropDown">
        <Items>
            <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-left" />
            <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-center" />
            <DxToolbarItem GroupName="align" IconCssClass="tb-icon tb-icon-align-right" />
            <DxToolbarItem Text="Format" BeginGroup="true" SplitDropDownButton="true">
                <Items>
                    <DxToolbarItem Text="Times New Roman" />
                    <DxToolbarItem Text="Tahoma" />
                    <DxToolbarItem Text="Verdana" />
                </Items>
            </DxToolbarItem>
        </Items>
    </DxToolbar>
</div>

Toolbar Drop Down Item

Checked Items and Groups

You can create a group of items within the Toolbar. Similar to radio buttons, these groups can contain only one checked item. Use the same GroupName property value to arrange toolbar items into a group.

To create a single checked button, set the GroupName property to a unique value. In this case, every user click changes the item’s state.

The example below adds one checked button (Show Filter Row) and a group of radio-like buttons (Allow sort by temperature/Allow sort by cloud cover) to the Toolbar.

<DxToolbar>
    <DxToolbarItem @bind-Checked="@ShowFilterRow" 
                   GroupName="ShowFilterRow" 
                   Text="Show Filter Row">
    </DxToolbarItem>
    <DxToolbarItem BeginGroup="true" 
                   @bind-Checked="@EnableSortByCelsius" 
                   GroupName="SortCriteria" 
                   Text="Allow sort by temperature">
    </DxToolbarItem>
    <DxToolbarItem @bind-Checked="@EnableSortByCloudCover" 
                   GroupName="SortCriteria" Text="Allow sort by cloud cover"></DxToolbarItem>
</DxToolbar>

<DxGrid Data="@Data" ShowFilterRow="@ShowFilterRow">
    <Columns>
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.Date))"></DxGridDataColumn>
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.TemperatureC))" 
                          AllowSort="@EnableSortByCelsius"
                          SortIndex="0"
                          SortOrder="GridColumnSortOrder.Ascending">
        </DxGridDataColumn>
        <DxGridDataColumn FieldName="@(nameof(WeatherForecast.CloudCover))" 
                          AllowSort="@EnableSortByCloudCover"></DxGridDataColumn>
    </Columns>
</DxGrid>

@code {
    bool ShowFilterRow { get; set; } = true;
    bool EnableSortByCelsius { get; set; } = true;
    bool EnableSortByCloudCover { get; set; } = false;
    public class WeatherForecast {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF => 32 + (int)(TemperatureC / 0.5556);
        public string CloudCover { get; set; }
        public bool Precipitation { get; set; }
    }
    String[] CloudCover = { "Sunny", "Partly cloudy", "Cloudy", "Storm" };
    object Data;

    public Task<IEnumerable<WeatherForecast>> GetForecastAsync(CancellationToken ct = default) {
        var rng = new Random();
        DateTime startDate = DateTime.Now;
        return Task.FromResult(Enumerable.Range(1, 7).Select(index => new WeatherForecast {
            Date = startDate.AddDays(index),
            TemperatureC = rng.Next(-15, 20),
            CloudCover = CloudCover[rng.Next(0, CloudCover.Length)],
            Precipitation = Convert.ToBoolean(rng.Next(0, 2))
        }).AsEnumerable());
    }

    protected override async Task OnInitializedAsync() {
        Data = await GetForecastAsync();
    }
}

Toolbar Item Checked

Run Demo: Toolbar - Checked Items and Groups

Use the item’s NavigateUrl property to specify a URL where the client web browser navigates whenever the current item is clicked.

<div class="card p-2 bg-transparent">
    <DxToolbar>
        <DxToolbarItem Text="Item" />
        <DxToolbarItem Text="Link to the next demo" 
                       NavigateUrl="https://demos.devexpress.com/blazor/Toolbar#DropDown" />
        <DxToolbarItem BeginGroup="true" IconCssClass="oi oi-align-left" />
        <DxToolbarItem IconCssClass="oi oi-align-center" />
        <DxToolbarItem IconCssClass="oi oi-align-right" />
        <DxToolbarItem IconCssClass="oi oi-cog" 
                       Alignment="ToolbarItemAlignment.Right" 
                       BeginGroup="true" />
        <DxToolbarItem Text="About" IconCssClass="oi oi-info" />
    </DxToolbar>
</div>

Toolbar Overview

Run Demo: Toolbar - Overview

Item Templates

Use the item’s Template property to completely override an individual item’s content, including text, icon, child item, etc.

The example below demonstrates how to add the Search text box to the Toolbar component.

<DxToolbar ItemRenderStyleMode="ToolbarRenderStyleMode.Plain">
    <Items>
        <DxToolbarItem>
            <Template>
                <div class="dxbs-textbox">
                    <input type="text" class="form-control" placeholder="Search...">
                    <span class="dxbs-feedback">
                        <span class="d-flex pl-2 pr-2" role="button" style="color:gray">
                            <span class="tb-icon tb-icon-search"></span>
                        </span>
                    </span>
                </div>
            </Template>
        </DxToolbarItem>
        <DxToolbarItem IconCssClass="oi oi-cog" Tooltip="Settings" BeginGroup="true" />
    </Items>
</DxToolbar>

Toolbar Item Template

Run Demo: Toolbar - Item Templates

Handle an Item Click

Use the Click event to specify individual click handlers for Toolbar items. You can also use the ItemClick event to specify a common click handler that will be applied to all Toolbar items.

<p>The clicked item is @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, $"The Toolbar button has been clicked");
    }
}

Submit Form on Item Click

You can use a toolbar item to submit a form. This behavior is equivalent to the type=”submit” HTML button’s behavior.

To create such a toolbar item, use the SubmitFormOnClick property.

@using System.ComponentModel.DataAnnotations

<div class="cw-880">
    <EditForm Model="@starship"
              OnValidSubmit="@HandleValidSubmit"
              OnInvalidSubmit="@HandleInvalidSubmit"
              Context="EditFormContext">
        <DataAnnotationsValidator />
        <DxFormLayout>
            <DxFormLayoutItem Caption="Identifier:" ColSpanMd="6">
                <DxTextBox @bind-Text="@starship.Identifier" />
            </DxFormLayoutItem>
            @* ... *@
        </DxFormLayout>
        <DxToolbar>
            <DxToolbarItem SubmitFormOnClick="true" Alignment="ToolbarItemAlignment.Right">Submit form</DxToolbarItem>
        </DxToolbar>
        <div class="row w-100 mx-0">
            <p class="demo-text col-12 mt-2 text-muted">
                Form Validation State: <b>@FormValidationState</b>
            </p>
        </div>
    </EditForm>
</div>

@code {
    string FormValidationState = @"Press the ""Submit form"" button to validate the form.";
    Starship starship = new Starship() { ProductionDate = DateTime.Now + TimeSpan.FromDays(1) };
    List<string> classifications = new List<string>() { "Defense", "Exploration", "Diplomacy" };
    void HandleValidSubmit() {
        FormValidationState = @"Form data is valid";
    }
    void HandleInvalidSubmit() {
        FormValidationState = @"Form data is invalid";
    }
    [AttributeUsage(AttributeTargets.Property | AttributeTargets.Field | AttributeTargets.Parameter, AllowMultiple = false)]
    public class DateInPastAttribute : ValidationAttribute {
        public override bool IsValid(object value) {
            return (DateTime)value <= DateTime.Today;
        }
    }
    public class Starship {
        [Required(ErrorMessage = "The Identifier value should be specified.")]
        [StringLength(16,
        ErrorMessage = "The Identifier exceeds 16 characters.")]
        public string Identifier { get; set; }
        // ...
    }
}

Toolbar Item - Submit Form on Click

For more information, refer to the following help topic: Validate Input.

Adaptivity

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

<DxToolbar>
    <DxToolbarItem Name="Left" BeginGroup="true" IconCssClass="oi oi-align-left" />
    <DxToolbarItem Name="Center" IconCssClass="oi oi-align-center" />
    <DxToolbarItem Name="Right" IconCssClass="oi oi-align-right" />
    <DxToolbarItem Text="Insert a new record" AdaptiveText="Insert" BeginGroup="true"></DxToolbarItem>
    <DxToolbarItem Text="Edit the selected record" AdaptiveText="Edit"></DxToolbarItem>
    <DxToolbarItem Text="Delete the selected record" AdaptiveText="Delete"></DxToolbarItem>       
</DxToolbar>

Toolbar Adaptive Text

Run Demo: Toolbar - Adaptivity

Inheritance

Object
ComponentBase
DevExpress.Blazor.Base.DxAsyncDisposableComponent
See Also