DxButtonGroup.ItemClick Event

Fires when a user clicks a button group item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

[Parameter]
public EventCallback<ButtonGroupItemClickEventArgs> ItemClick { get; set; }

Event Data

The ItemClick event's data class is ButtonGroupItemClickEventArgs. The following properties provide information specific to this event:

Property	Description
ItemInfo	Returns information about the clicked button group item.
MouseEventArgs	Blazor’s built-in MouseEventArgs event arguments.

Remarks

Use the ItemClick event to specify a common click handler for all button group items. To react to an individual item click, handle the item’s Click event.

Razor

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

<DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
               ItemClick="@OnItemClick" >
    <Items>
        <DxButtonGroupItem Text="Add Task"
                           IconCssClass="icon icon-plus"
                           Click="@OnAddItemClick" />
        <DxButtonGroupItem Text="Edit Task"
                           IconCssClass="icon icon-edit"
                           Click="@OnEditItemClick" />
        <DxButtonGroupItem Text="Assign Task"
                           IconCssClass="icon icon-user-profile" />
        <DxButtonGroupItem Text="Complete Task"
                           IconCssClass="icon icon-check" />
        <DxButtonGroupItem Text="Archive Task"
                           IconCssClass="icon icon-delete" />
    </Items>
</DxButtonGroup>

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

    void OnAddItemClick(MouseEventArgs args) {
        ClickedItem = "Add Task";
    }
    void OnEditItemClick(MouseEventArgs args) {
        ClickedItem = "Edit Task";
    }

    async Task OnItemClick(ButtonGroupItemClickEventArgs args) {
        await JSRuntime.InvokeVoidAsync("alert", $"The button group item has been clicked.");
    }
}

CSS

.icon {
    width: 16px;
    height: 16px;
    background-color: currentColor;
    opacity: 0.7;
}
.icon-plus {
    mask-image: url(../images/plus.svg);
}

.icon-edit {
    mask-image: url(../images/edit.svg);
}

.icon-user-profile {
    mask-image: url(../images/user-profile.svg);
}

.icon-check {
    mask-image: url(../images/check.svg);
}

.icon-delete {
    mask-image: url(../images/delete.svg);
}