Back to Devexpress

IDropDownButtonItemInfo Interface

blazor-devexpress-dot-blazor-c3cb5213.md

latest3.7 KB
Original Source

IDropDownButtonItemInfo Interface

Contains information about a DxDropDownButtonItem

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
public interface IDropDownButtonItemInfo

The following members return IDropDownButtonItemInfo objects:

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

<div class="container">
    <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;
}

.container {
    width: 300px; 
    height: 150px;
}

See Also

IDropDownButtonItemInfo Members

DevExpress.Blazor Namespace