IButtonGroupItemInfo Interface

Contains information about a DxButtonGroupItem.

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

public interface IButtonGroupItemInfo

Related API Members

The following members return IButtonGroupItemInfo objects:

• ButtonGroupItemClickEventArgs.ItemInfo

Remarks

When a user clicks a DxButtonGroupItem, the DxButtonGroup.ItemClick event fires. The event argument’s ItemInfo property implements the IButtonGroupItemInfo interface. Use interface properties to obtain information about the processed 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);
}