From e15b9f68a2e16ca4e0a961bade736b224e2ac080 Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 24 Mar 2025 11:22:44 +0200 Subject: [PATCH 1/2] kb(DropDownButton): Add KB for item hierarchy --- components/dropdownbutton/overview.md | 1 + .../dropdownbutton-nested-item-hierarchjy.md | 180 ++++++++++++++++++ 2 files changed, 181 insertions(+) create mode 100644 knowledge-base/dropdownbutton-nested-item-hierarchjy.md 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-hierarchjy.md b/knowledge-base/dropdownbutton-nested-item-hierarchjy.md new file mode 100644 index 0000000000..7d7ac9c8a2 --- /dev/null +++ b/knowledge-base/dropdownbutton-nested-item-hierarchjy.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: t +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 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 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) From 9688d7ffe53333089baab03bce3c5e7696b1b91c Mon Sep 17 00:00:00 2001 From: Dimo Dimov <961014+dimodi@users.noreply.github.com> Date: Mon, 24 Mar 2025 14:15:52 +0200 Subject: [PATCH 2/2] Apply tips --- ...chjy.md => dropdownbutton-nested-item-hierarchy.md} | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) rename knowledge-base/{dropdownbutton-nested-item-hierarchjy.md => dropdownbutton-nested-item-hierarchy.md} (96%) diff --git a/knowledge-base/dropdownbutton-nested-item-hierarchjy.md b/knowledge-base/dropdownbutton-nested-item-hierarchy.md similarity index 96% rename from knowledge-base/dropdownbutton-nested-item-hierarchjy.md rename to knowledge-base/dropdownbutton-nested-item-hierarchy.md index 7d7ac9c8a2..665992fa7b 100644 --- a/knowledge-base/dropdownbutton-nested-item-hierarchjy.md +++ b/knowledge-base/dropdownbutton-nested-item-hierarchy.md @@ -3,7 +3,7 @@ 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: t +slug: dropdownbutton-kb-nested-item-hierarchy tags: blazor, dropdownbutton, hierarchy ticketid: 1628170, 1682574 res_type: kb @@ -24,15 +24,15 @@ res_type: kb This KB answers the following questions: -* How to nest dropdown buttons and use multiple sets of dropdown items in hierarchy? +* 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 hierarchy UI with a DropDownButton user interface. +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) +* [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.