RadzenPanelMenuItem with badges

asto · May 7, 2021, 7:22am

Hi,

is it possible to integrate a badge into the RadzenPanelMenuItem, e.g. to display the number of activities of a user?

<span class="badge badge-light">4</span>

Thanks and regards
Arne

Thomas · July 20, 2021, 1:54pm

That would be a great feature!

AlxFigueiredo · June 1, 2022, 4:12pm

Hello, did you find a way to do it ?

sys_mike · January 14, 2023, 4:46am

Hi,

I noticed Radzen's documentation has a PanelMenu with a badge. A lot of their source code is on GitHub. The link below shows how to handle it with a Template.

github.com

radzenhq/radzen-blazor/blob/master/RadzenBlazorDemos/Shared/NavigationItem.razor

@if (!Example.New && !Example.Updated)
{
    <RadzenPanelMenuItem @bind-Expanded=@Expanded Text="@Example.Name" Path="@Example.Path" Icon="@Example.Icon">
        @ChildContent
    </RadzenPanelMenuItem>
}
else
{
    <RadzenPanelMenuItem @bind-Expanded=@Expanded Text="@Example.Name" Path="@Example.Path" Icon="@Example.Icon">
        <Template>
            @Example.Name
            <RadzenBadge Text="Updated" Visible=@Example.Updated BadgeStyle="BadgeStyle.Info" Shade="Shade.Lighter"/>
            <RadzenBadge Text="New" Visible=@Example.New BadgeStyle="BadgeStyle.Success"/>
        </Template>
        <ChildContent>@ChildContent</ChildContent>
    </RadzenPanelMenuItem>
}
@code {
    [Parameter]
    public Example Example { get; set; }

This file has been truncated. show original

I tested it, and it works - but I need to play around with the formatting to get it to look nice like theirs.

Hope that helps.

Mike