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