BuyLog In
Ticket T1282746
Visible to All Users

Badge on DxMenuItem

created a day ago (modified a day ago)

Hi,

I am looking for a way to add a badge to a DxMenuItem.
I have seen the DxButton example. Tried to apply it on DxMenuItem:

Code
<DxMenuItem Text="@Loc["Notifications"]"
            IconCssClass="menuicon fa-solid fa-bell" 
            Visible="@isAuthenticated"
            Context="notificationContext"
>
        @notificationContext
        <span class="badge">99</span>
</DxMenuItem>

But it results in an error: @notificationContext is not in current context.

So I tried with Template:

Code
<DxMenuItem Text="@Loc["Notifications"]"
            IconCssClass="menuicon fa-solid fa-bell" 
            Visible="@isAuthenticated"
            Context="notificationContext"
>
    <Template>  
        @notificationContext
        <span class="badge">99</span>
    </Template>
</DxMenuItem>

But this results in:
Clipboard-File-2.png

Next step: use Dxbutton with Template:

Code
<DxMenuItem Text="@Loc["Notifications"]"
            IconCssClass="menuicon fa-solid fa-bell" 
            Visible="@isAuthenticated"
            Context="notificationContext"
>
    <Template>  
        <DxButton   Text = "@notificationContext.Text"
                    RenderStyle="ButtonRenderStyle.Link"
                    RenderStyleMode="ButtonRenderStyleMode.Text"
                    IconCssClass="@notificationContext.IconCssClass"
                    Context="buttonContext"
        >
            @buttonContext
            <span class="badge">99</span>
        </DxButton>
    </Template>
</DxMenuItem>

Problems

  1. DxButton has another 'primary' color (hover) than the rest of the DxMenuItems.
  2. I am using a DxFormLayout to apply a selected SizeMode to all components. But is does not match:
    Clipboard-File-1.png

Is there any easier way to implement badges?
Many thanks,

Lou Driehuis

Sign in to comment on this post

Answers approved by DevExpress Support

created 11 hours ago

Hi,

Thank you for the screenshots.

I believe the easiest way to add a badge to a menu item is to put it in TextTemplate. This way, you can display an icon, an item text, and a badge.

Razor
<DxMenuItem Text="AAA" IconCssClass="fa-solid fa-bell" Context="ctx">
    <TextTemplate>
        <span>@ctx.Text</span>
        <span class="badge text-bg-primary">99</span>
    </TextTemplate>
</DxMenuItem>

However, TextTemplate content is hidden when items are collapsed to icons. If you need to display icons along with badges when items are collapsed, use the following approach instead:

  1. Add an extra CSS class to the DxMenuItem.IconCssClass property.
  2. In the corresponding CSS class, specify CSS styles to create an element that looks like a badge.
CSS
.my-icon::after{
    top: 5px;
    background-color: red;
    position: absolute;
    content: '99';
    color: white;
    border-radius: 100%;
    font-size: xx-small;
    padding: 2px;
}

Please let me know if this helps.

    Sign in to comment on this post

    Disclaimer: The information provided on DevExpress.com and affiliated web properties (including the DevExpress Support Center) is provided "as is" without warranty of any kind. Developer Express Inc disclaims all warranties, either express or implied, including the warranties of merchantability and fitness for a particular purpose. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.

    Confidential Information: Developer Express Inc does not wish to receive, will not act to procure, nor will it solicit, confidential or proprietary materials and information from you through the DevExpress Support Center or its web properties. Any and all materials or information divulged during chats, email communications, online discussions, Support Center tickets, or made available to Developer Express Inc in any manner will be deemed NOT to be confidential by Developer Express Inc. Please refer to the DevExpress.com Website Terms of Use for more information in this regard.