IDropDownButtonItemInfo Interface

Contains information about a DxDropDownButtonItem

Namespace: DevExpress.Blazor

Assembly: DevExpress.Blazor.v24.2.dll

NuGet Package: DevExpress.Blazor

Declaration

C#

public interface IDropDownButtonItemInfo

Related API Members

The following members return IDropDownButtonItemInfo objects:

• DropDownButtonItemClickEventArgs.ItemInfo

Remarks

When a user clicks a drop-down button item, the DxDropDownButton.ItemClick event fires. The event argument’s ItemInfo property implements the IDropDownButtonItemInfo 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="width:300px; height:150px;">
    <DxDropDownButton RenderStyle="ButtonRenderStyle.Secondary"
                      Text="Clipboard"
                      IconCssClass="tb-icon tb-icon-paste"
                      ItemClick=@OnClick
                      CssClass="me-1">
        <Items>
            <DxDropDownButtonItem Text="Cut" IconCssClass="menu-icon-cut menu-icon"/>
            <DxDropDownButtonItem Text="Copy" IconCssClass="menu-icon-copy menu-icon" />
            <DxDropDownButtonItem Text="Paste" IconCssClass="tb-icon tb-icon-paste" />
            <DxDropDownButtonItem Text="Paste Special" BeginGroup="true">
                <Items>
                    <DxDropDownButtonItem Text="Paste Text Only" />
                    <DxDropDownButtonItem Text="Paste Picture" Enabled="false" />
                    <DxDropDownButtonItem Text="Paste as Hyperlink" />
                </Items>
            </DxDropDownButtonItem>
        </Items>
    </DxDropDownButton>

</div>

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

CSS

.tb-icon {
    width: 1rem;
    height: 1rem;
    background-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.tb-icon-paste {
    -webkit-mask-image: url(../images/paste.svg);
    mask-image: url(../images/paste.svg);
}

.menu-icon-copy {
    mask-image: url(../images/copy.svg);
    -webkit-mask-image: url(../images/copy.svg);
}

.menu-icon-cut {
    mask-image: url(../images/cut.svg);
    -webkit-mask-image: url(../images/cut.svg);
}

.menu-icon {
    width: 1rem;
    height: 1rem;
    min-width: 1rem;
    min-height: 1rem;
    background-size: contain;
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    background-position: center center;
    background-color: currentColor;
    opacity: 0.7;
}

.dxbl-btn-dropdown .dxbl-btn-dropdown-list-item .dxbl-btn-dropdown-item.dxbl-btn {
    justify-content: flex-start;
}