MenuStrip

Description

This component represents a menu strip in Blazor using the Gap.Blazor.MenuStrip model. It renders a hierarchical menu using the Telerik Menu component and dynamically builds the menu structure from a ToolStripItemCollection. It supports nested submenus and click event handling for each item.

Usage

@inherits WMControlComponentBase
@namespace Gap.Blazor.Components

<WMStyleBase [email protected]></WMStyleBase>
<TelerikMenu [email protected]()
             [email protected]
             ItemsField="SubItems"
             TextField="Text"
             OnClick="@((MenuItem item) => OnClickHandler(item))">
</TelerikMenu>

<style>
    [email protected]() {
        background-color: @GetBackColorHex() !important;
        color: @menuStrip.GetForeColorHex() !important;
    }     
    .@(model.GetComponentClass()+".k-menu") {
        height: fit-content;
        width: 100%;
        z-index: 1;
    }
    .@(model.GetComponentClass()+".k-menu") li {
        color: inherit !important;
    }
</style>

Properties

• menuStrip: Instance of the Gap.Blazor.MenuStrip model.

• menuItems: A list of MenuItem objects representing the menu hierarchy.

MenuItem Class

public class MenuItem
{
    public string Text { get; set; }
    public List<MenuItem>? SubItems { get; set; }
    public ToolStripItem ToolStripItem { get; set; }

    public MenuItem()
    {
        Text = string.Empty;
        ToolStripItem = new ToolStripItem();
    }
}

Methods

• OnInitialized(): Subscribes to the Click event and builds the menu structure from the model.

• buildMenuList(ToolStripItemCollection): Recursively constructs the top-level menu items.

• buildMenuItem(ToolStripItem): Converts a ToolStripItem into a MenuItem, including subitems if present.

• buildSubItems(ToolStripItemCollection): Recursively builds nested submenus.

• OnClickHandler(MenuItem): Executes the PerformClick() method on the associated ToolStripItem.

• GetBackColorHex(): Returns the background color in hex format, defaulting to #FDFDFDFF if not set.

Dynamic Rendering

• TelerikMenu: Renders the menu UI with support for nested items.

• Dynamic Styling: Background and text colors are derived from the model.

• Submenus: Automatically rendered based on the SubItems property.

Styles

[email protected]() {
    background-color: [model.BackColor] !important;
    color: [model.ForeColor] !important;
}

[email protected]().k-menu {
    height: fit-content;
    width: 100%;
    z-index: 1;
}

[email protected]().k-menu li {
    color: inherit !important;
}

Events

• Click: Triggered when a menu item is clicked, invoking the associated ToolStripItem.PerformClick().