ButtonGroupItemClickEventArgs.ItemInfo Property

Returns information about the clicked button group item.

Assembly : DevExpress.Blazor.v25.2.dll

Declaration

csharp

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
CSS

razor

<div class="demo-section">
    @if (ClickedItem != null) {
        <span>Clicked item: <b>@ClickedItem</b></span>
    } else {
        <span>Clicked item: None</span>
    }
</div>
<div class="demo-section">
    <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);
}

.demo-section {
    padding-bottom: 20px;
}