Skip to content

Commit e15b9f6

Browse files
dimodidimodi
committed
kb(DropDownButton): Add KB for item hierarchy
1 parent 370b7ed commit e15b9f6

File tree

2 files changed

+181
-0
lines changed

2 files changed

+181
-0
lines changed

‎components/dropdownbutton/overview.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -176,3 +176,4 @@ The DropDownButton exposes a `FocusAsync` method that allows you to focus it pro
176176
* [DropDownButton API](slug:Telerik.Blazor.Components.TelerikDropDownButton)
177177
* [Live Demo: DropDownButton](https://demos.telerik.com/blazor-ui/dropdownbutton/overview)
178178
* [Live Demo: DropDownButton Items](https://demos.telerik.com/blazor-ui/dropdownbutton/items)
179+
* [Hierarchical DropDownButton Items](slug:dropdownbutton-kb-nested-item-hierarchy)

‎knowledge-base/dropdownbutton-nested-item-hierarchjy.md

Lines changed: 180 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,180 @@
1+
---
2+
title: Nest DropDownButton Items in Hierarchy
3+
description: Learn how to nest dropdown buttons and use multiple sets of hierarchical dropdown items.
4+
type: how-to
5+
page_title: How to Nest DropDownButton Items in Hierarchy
6+
slug: t
7+
tags: blazor, dropdownbutton, hierarchy
8+
ticketid: 1628170, 1682574
9+
res_type: kb
10+
---
11+
12+
## Environment
13+
14+
<table>
15+
<tbody>
16+
<tr>
17+
<td>Product</td>
18+
<td>DropDownButton for Blazor</td>
19+
</tr>
20+
</tbody>
21+
</table>
22+
23+
## Description
24+
25+
This KB answers the following questions:
26+
27+
* How to nest dropdown buttons and use multiple sets of dropdown items in hierarchy?
28+
* 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.
29+
30+
## Solution
31+
32+
Here are two ways to achieve hierarchy UI with a DropDownButton user interface.
33+
34+
* [Indent the DropDownButton items with some empty space](#indent-dropdown-items)
35+
* [Use a Menu component and style it to look like a DropDownButton](#use-menu-component)
36+
37+
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.
38+
39+
### Indent Dropdown Items
40+
41+
1. Show parent-child relationships between the DropDownButton items by using empty space before each item text.
42+
1. (optional) [Add separators between groups of DropDownButton items](slug:dropdownbutton-kb-add-separator-between-items).
43+
44+
>caption Apply padding to DropDownButton items to convey hierarchy
45+
46+
````RAZOR
47+
<TelerikDropDownButton>
48+
<DropDownButtonContent>DropDownButton</DropDownButtonContent>
49+
<DropDownButtonItems>
50+
<DropDownButtonItem>Level 1 Child 1</DropDownButtonItem>
51+
<DropDownButtonItem>Level 1 Child 2</DropDownButtonItem>
52+
<DropDownButtonItem><span class="pad"></span>Level 2 Child 1</DropDownButtonItem>
53+
<DropDownButtonItem><span class="pad"></span>Level 2 Child 3</DropDownButtonItem>
54+
<DropDownButtonItem><span class="pad"></span><span class="pad"></span>Level 3 Child 1</DropDownButtonItem>
55+
<DropDownButtonItem>Level 1 Child 3</DropDownButtonItem>
56+
</DropDownButtonItems>
57+
</TelerikDropDownButton>
58+
59+
<style>
60+
.pad {
61+
padding-left: var(--kendo-spacing-6);
62+
}
63+
</style>
64+
````
65+
66+
### Use Menu Component
67+
68+
1. Render a Menu component with a single root item.
69+
1. Define the item hierarchy with flat data or hierarchical data.
70+
1. Implement a [Menu `OnClick` event handler](slug:components/menu/events#onclick).
71+
72+
>caption Style a Menu to look like a DropDownButton
73+
74+
````RAZOR
75+
<TelerikMenu Data="@MenuItems"
76+
Class="menu-button"
77+
TItem="@MenuItem"
78+
OnClick="@OnMenuItemClick">
79+
</TelerikMenu>
80+
81+
<style>
82+
.menu-button {
83+
display: inline-block;
84+
color: var(--kendo-color-on-base);
85+
}
86+
87+
.menu-button > .k-item {
88+
background: var(--kendo-color-base);
89+
color: var(--kendo-color-on-base);
90+
border: 1px solid var(--kendo-color-border);
91+
border-radius: var(--kendo-border-radius-md);
92+
}
93+
94+
.menu-button > .k-item:hover {
95+
background: var(--kendo-color-base-hover);
96+
}
97+
98+
.menu-button > .k-item.k-menu-item:active {
99+
color: var(--kendo-color-on-base);
100+
background: var(--kendo-color-base-active);
101+
}
102+
103+
.menu-button > .k-item.k-menu-item:focus {
104+
box-shadow: 0 0 0 2px rgba(0,0,0,.08);
105+
}
106+
107+
/* optional: hide the expand arrow */
108+
.menu-button > .k-item .k-menu-expand-arrow {
109+
/*display: none;*/
110+
}
111+
112+
.menu-button > .k-item > .k-menu-link {
113+
padding: var(--kendo-spacing-1) var(--kendo-spacing-2);
114+
}
115+
</style>
116+
117+
@code {
118+
private void OnMenuItemClick(MenuItem clickedItem)
119+
{
120+
Console.WriteLine($"The user clicked on {clickedItem.Text}");
121+
}
122+
123+
private List<MenuItem> MenuItems { get; set; } = new List<MenuItem>()
124+
{
125+
new MenuItem()
126+
{
127+
Id = 1,
128+
Text = "Menu as DropDownButton"
129+
},
130+
new MenuItem()
131+
{
132+
Id = 2,
133+
ParentId = 1,
134+
Text = "Level 1 Child 1"
135+
},
136+
new MenuItem()
137+
{
138+
Id = 3,
139+
ParentId = 1,
140+
Text = "Level 1 Child 2"
141+
},
142+
new MenuItem()
143+
{
144+
Id = 4,
145+
ParentId = 3,
146+
Text = "Level 2 Child 1"
147+
},
148+
new MenuItem()
149+
{
150+
Id = 5,
151+
ParentId = 3,
152+
Text = "Level 2 Child 2"
153+
},
154+
new MenuItem()
155+
{
156+
Id = 6,
157+
ParentId = 5,
158+
Text = "Level 3 Child 1"
159+
},
160+
new MenuItem()
161+
{
162+
Id = 7,
163+
ParentId = 1,
164+
Text = "Level 1 Child 3"
165+
}
166+
};
167+
168+
public class MenuItem
169+
{
170+
public int Id { get; set; }
171+
public int? ParentId { get; set; }
172+
public string Text { get; set; } = string.Empty;
173+
}
174+
}
175+
````
176+
177+
## See Also
178+
179+
* [DropDownButton Overview](slug:dropdownbutton-overview)
180+
* [Menu Overview](slug:menu-overview)

0 commit comments

Comments
 (0)