Unplanned
Last Updated: 02 Apr 2025 08:03 by Travis
Travis
Created on: 02 Apr 2025 08:03
Category: DropDownButton
Type: Feature Request
1
DropDownButton nested / hierarchical items

Currently the DropDownButton only allows a single level of button items inside it. I need to put nested (child) levels of items, similar to the ContextMenu.

===

TELERIK EDIT:

A possible workaround is to use a Menu component with a single root item. Make that root item look like a Button with CSS:

<TelerikMenu Data="@MenuItems"
             Class="menu-button"
             TItem="@MenuItem"
             OnClick="@OnMenuItemClick">
</TelerikMenu>

<style>
    .menu-button {
        display: inline-block;
        color: var(--kendo-color-on-base);
    }

        .menu-button > .k-item {
            background: var(--kendo-color-base);
            color: var(--kendo-color-on-base);
            border: 1px solid var(--kendo-color-border);
            border-radius: var(--kendo-border-radius-md);
        }

            .menu-button > .k-item:hover {
                background: var(--kendo-color-base-hover);
            }

            .menu-button > .k-item.k-menu-item:active {
                color: var(--kendo-color-on-base);
                background: var(--kendo-color-base-active);
            }

            .menu-button > .k-item.k-menu-item:focus {
                box-shadow: 0 0 0 2px rgba(0,0,0,.08);
            }

            /* optional: hide the expand arrow */
            .menu-button > .k-item .k-menu-expand-arrow {
                /*display: none;*/
            }

            .menu-button > .k-item > .k-menu-link {
                padding: var(--kendo-spacing-1) var(--kendo-spacing-2);
            }
</style>

@code {
    private void OnMenuItemClick(MenuItem clickedItem)
    {
        Console.WriteLine($"The user clicked on {clickedItem.Text}");
    }

    private List<MenuItem> MenuItems { get; set; } = new List<MenuItem>()
    {
        new MenuItem()
        {
            Id = 1,
            Text = "Menu as DropDownButton"
        },
        new MenuItem()
        {
            Id = 2,
            ParentId = 1,
            Text = "Level 1 Child 1"
        },
        new MenuItem()
        {
            Id = 3,
            ParentId = 1,
            Text = "Level 1 Child 2"
        },
        new MenuItem()
        {
            Id = 4,
            ParentId = 3,
            Text = "Level 2 Child 1"
        },
        new MenuItem()
        {
            Id = 5,
            ParentId = 3,
            Text = "Level 2 Child 2"
        },
        new MenuItem()
        {
            Id = 6,
            ParentId = 5,
            Text = "Level 3 Child 1"
        },
        new MenuItem()
        {
            Id = 7,
            ParentId = 1,
            Text = "Level 1 Child 3"
        }
    };

    public class MenuItem
    {
        public int Id { get; set; }
        public int? ParentId { get; set; }
        public string Text { get; set; } = string.Empty;
    }
}

 

0 comments