DxToolbarItem.CheckedChanged Event

Fires after the Toolbar item’s Checked property changed.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v25.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<bool> CheckedChanged { get; set; }

Parameters

Type	Description
Boolean	A new Checked property value.

Remarks

Use the CheckedChanged event to handle changes to the checked item’s Checked property.

To add a checked item to the Toolbar, set the item’s GroupName property to a unique value. This changes the item’s state (checked/unchecked) on every user click.

To create a group of checked (radio) buttons that allow users to select one option from a group, use the same GroupName property value for all group items.

The CheckedChanged event fires each time a checked item’s state changes. If an item belongs to a radio group, the CheckedChanged event fires twice when a new item is checked: for a new item (unchecked → checked) and for the previously checked item (checked → unchecked).

The following code snippet handles CheckedChanged for grouped toolbar items and updates text alignment.

<DxToolbar>
    <DxToolbarItem Text="Align Left"
                   GroupName="TextAlignment"
                   Checked="true"
                   CheckedChanged="@((bool state) => OnCheckedChanged(TextAlignment.Left, state))" />
    <DxToolbarItem Text="Center"
                   GroupName="TextAlignment"
                   CheckedChanged="@((bool state) => OnCheckedChanged(TextAlignment.Center, state))" />
    <DxToolbarItem Text="Align Right"
                   GroupName="TextAlignment"
                   CheckedChanged="@((bool state) => OnCheckedChanged(TextAlignment.Right, state))" />
</DxToolbar>

<div style="text-align: @Alignment">Lorem ipsum dolor sit amet</div>

@code {
    string Alignment = "left";

    enum TextAlignment {
        Left,
        Center,
        Right
    }

    void OnCheckedChanged(TextAlignment alignment, bool isChecked) {
        if(isChecked) Alignment = alignment switch {
            TextAlignment.Left => "left",
            TextAlignment.Center => "center",
            TextAlignment.Right => "right",
            _ => Alignment
        };
    }
}