diff --git a/components/dropdownbutton/overview.md b/components/dropdownbutton/overview.md index 410af2962d..08c26212ae 100644 --- a/components/dropdownbutton/overview.md +++ b/components/dropdownbutton/overview.md @@ -176,3 +176,4 @@ The DropDownButton exposes a `FocusAsync` method that allows you to focus it pro * [DropDownButton API](slug:Telerik.Blazor.Components.TelerikDropDownButton) * [Live Demo: DropDownButton](https://demos.telerik.com/blazor-ui/dropdownbutton/overview) * [Live Demo: DropDownButton Items](https://demos.telerik.com/blazor-ui/dropdownbutton/items) +* [Hierarchical DropDownButton Items](slug:dropdownbutton-kb-nested-item-hierarchy) diff --git a/knowledge-base/dropdownbutton-nested-item-hierarchy.md b/knowledge-base/dropdownbutton-nested-item-hierarchy.md new file mode 100644 index 0000000000..665992fa7b --- /dev/null +++ b/knowledge-base/dropdownbutton-nested-item-hierarchy.md @@ -0,0 +1,180 @@ +--- +title: Nest DropDownButton Items in Hierarchy +description: Learn how to nest dropdown buttons and use multiple sets of hierarchical dropdown items. +type: how-to +page_title: How to Nest DropDownButton Items in Hierarchy +slug: dropdownbutton-kb-nested-item-hierarchy +tags: blazor, dropdownbutton, hierarchy +ticketid: 1628170, 1682574 +res_type: kb +--- + +## Environment + + + + + + + + +
ProductDropDownButton 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. + +* [Indent the DropDownButton items with some empty space](#indent-dropdown-items). +* [Use a Menu component and style it to look like a DropDownButton](#use-menu-component). + +Both examples below use [Telerik CSS theme variables](https://www.telerik.com/design-system/docs/themes/kendo-themes/default/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. +1. (optional) [Add separators between groups of DropDownButton items](slug:dropdownbutton-kb-add-separator-between-items). + +>caption Apply padding to DropDownButton items to convey hierarchy + +````RAZOR + + DropDownButton + + Level 1 Child 1 + Level 1 Child 2 + Level 2 Child 1 + Level 2 Child 3 + Level 3 Child 1 + Level 1 Child 3 + + + + +```` + +### Use Menu Component + +1. Render a Menu component with a single root item. +1. Define the item hierarchy with flat data or hierarchical data. +1. Implement a [Menu `OnClick` event handler](slug:components/menu/events#onclick). + +>caption Style a Menu to look like a DropDownButton + +````RAZOR + + + + + +@code { + private void OnMenuItemClick(MenuItem clickedItem) + { + Console.WriteLine($"The user clicked on {clickedItem.Text}"); + } + + private List MenuItems { get; set; } = new List() + { + 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](slug:dropdownbutton-overview) +* [Menu Overview](slug:menu-overview)