Skip to content

Latest commit

 

History

History
180 lines (150 loc) · 5.18 KB

dropdownbutton-nested-item-hierarchy.md

File metadata and controls

180 lines (150 loc) · 5.18 KB
title description type page_title slug tags ticketid res_type
Nest DropDownButton Items in Hierarchy
Learn how to nest dropdown buttons and use multiple sets of hierarchical dropdown items.
how-to
How to Nest DropDownButton Items in Hierarchy
dropdownbutton-kb-nested-item-hierarchy
blazor, dropdownbutton, hierarchy
1628170, 1682574
kb

Environment

Product DropDownButton for Blazor

Description

This KB answers the following questions:

  • How to nest dropdown buttons and use multiple sets of dropdown items in a hierarchy?
  • How to allow nested layers of hierarchical items in the Telerik DropDownButton for Blazor? The UI should look like a multi-level Menu or ContextMenu.

Solution

Here are two ways to achieve a hierarchy UI with a DropDownButton user interface.

Both examples below use Telerik CSS theme variables to avoid the need to hard-code custom style values.

Indent Dropdown Items

  1. Show parent-child relationships between the DropDownButton items by using empty space before each item text.
  2. (optional) Add separators between groups of DropDownButton items.

caption Apply padding to DropDownButton items to convey hierarchy

<TelerikDropDownButton>
    <DropDownButtonContent>DropDownButton</DropDownButtonContent>
    <DropDownButtonItems>
        <DropDownButtonItem>Level 1 Child 1</DropDownButtonItem>
        <DropDownButtonItem>Level 1 Child 2</DropDownButtonItem>
        <DropDownButtonItem><span class="pad"></span>Level 2 Child 1</DropDownButtonItem>
        <DropDownButtonItem><span class="pad"></span>Level 2 Child 3</DropDownButtonItem>
        <DropDownButtonItem><span class="pad"></span><span class="pad"></span>Level 3 Child 1</DropDownButtonItem>
        <DropDownButtonItem>Level 1 Child 3</DropDownButtonItem>
    </DropDownButtonItems>
</TelerikDropDownButton>

<style>
    .pad {
        padding-left: var(--kendo-spacing-6);
    }
</style>

Use Menu Component

  1. Render a Menu component with a single root item.
  2. Define the item hierarchy with flat data or hierarchical data.
  3. Implement a Menu OnClick event handler.

caption Style a Menu to look like a DropDownButton

<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;
    }
}

See Also

  • DropDownButton Overview
  • Menu Overview