ButtonGroupItemClickEventArgs.ItemInfo Property

Returns information about the clicked button group item.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public IButtonGroupItemInfo ItemInfo { get; }

Property Value

Type	Description
IButtonGroupItemInfo	An object that implements the IButtonGroupItemInfo interface and stores information about the clicked button group item.

Remarks

Use the ItemInfo event argument to obtain information about the clicked button group item.

Razor

<div style="padding-bottom:20px;">
    @if (ClickedItem != null) {
        <span>Clicked item: <b>@ClickedItem</b></span>
    } else {
        <span>Clicked item: None</span>
    }
</div>
<div style="padding-bottom:25px;">
    <DxButtonGroup RenderStyle="ButtonRenderStyle.Secondary"
                   ItemClick="@OnItemClick">
        <Items>
            <DxButtonGroupItem Text="Add Task"
                               IconCssClass="icon icon-plus" />
            <DxButtonGroupItem Text="Edit Task"
                               IconCssClass="icon icon-edit" />
            <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>
</div>

@code {
    string ClickedItem { get; set; } = "";
    void OnItemClick(ButtonGroupItemClickEventArgs args) {
        ClickedItem = args.ItemInfo.Text;
    }
}

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);
}