Hi, I'm implementing RadzenTree component in my app and have an issue with navigating around the tree with keyboard arrows. It works fine for 2 levels. Problem starts after adding third level:
-
When focus is on third level item, I have to go down through all items to go back to parent node and collapse it. I can't focus on parent node going up.
-
When I leave one of the 2nd-level nodes expanded (say node A) and expand another 2nd-level node (node B), focus goes to node A child item instead of node B child item. And there is no way to focus on node B child items anymore.
<RadzenTree Data=@data @bind-Value=@selection>
<RadzenTreeLevel TextProperty=@nameof(AccountTagGroup.GroupName) ChildrenProperty=@nameof(AccountTagGroup.SubGroups) />
<RadzenTreeLevel TextProperty=@nameof(AccountTagSubGroup.SubGroupName) ChildrenProperty=@nameof(AccountTagSubGroup.Values) />
<RadzenTreeLevel TextProperty=@nameof(AccountTagValue.Value) HasChildren=@(_ => false) />
</RadzenTree>
@code{
IReadOnlyList<AccountTagGroup> data = [];
object selection;
}
Hi, I'm encountering with the same problem. @korchev
Hi @enchev , @korchev
I reproduced this issue on your demo page.
@using Microsoft.EntityFrameworkCore
<div class="container-fluid">
<div class="row my-5">
<div class="col-lg-6 offset-lg-3">
<RadzenCard>
<RadzenButton Click=@(() => selection = categories.Skip(1).FirstOrDefault()) Text="Select 'Condiments'" ButtonStyle="ButtonStyle.Secondary" class="me-1" />
<RadzenButton Click=@(() => selection = null) Text="Clear selection" ButtonStyle="ButtonStyle.Light" />
</RadzenCard>
<RadzenCard class="mt-4">
<RadzenTree Style="width: 100%; height: 300px" Change=@OnChange Data=@categories @bind-Value=@selection>
<RadzenTreeLevel TextProperty="CategoryName" ChildrenProperty="Products" />
<RadzenTreeLevel TextProperty="ProductName" ChildrenProperty="Items" />
<RadzenTreeLevel TextProperty="@nameof(Item.ItemName)" HasChildren=@(_ => false) />
</RadzenTree>
</RadzenCard>
</div>
</div>
</div>
<EventConsole @ref=@console />
@code {
IEnumerable<Category> categories;
object selection;
EventConsole console;
void OnChange()
{
if (selection is Category category)
{
console.Log($"Selection changed to: {category.CategoryName}");
}
if (selection is Product product)
{
console.Log($"Selection changed to: {product.ProductName}");
}
}
protected override async Task OnInitializedAsync()
{
await base.OnInitializedAsync();
categories = new List<Category>{
new Category
{
CategoryName = "Category 1",
Products = new List<Product>
{
new Product
{
ProductName = "Product 1",
Items = new List<Item>
{
new Item
{
ItemName = "Item 1"
},
new Item
{
ItemName = "Item 2"
},
new Item
{
ItemName = "Item 3"
}
}
},
new Product
{
ProductName = "Product 2",
Items = new List<Item>
{
new Item
{
ItemName = "Item 4"
},
new Item
{
ItemName = "Item 5"
},
new Item
{
ItemName = "Item 6"
}
}
}
}
},
new Category
{
CategoryName = "Category 2",
Products = new List<Product>
{
new Product
{
ProductName = "Product 3",
Items = new List<Item>
{
new Item
{
ItemName = "Item 7"
},
new Item
{
ItemName = "Item 8"
},
new Item
{
ItemName = "Item 9"
}
}
},
new Product
{
ProductName = "Product 4",
Items = new List<Item>
{
new Item
{
ItemName = "Item 10"
},
new Item
{
ItemName = "Item 11"
},
new Item
{
ItemName = "Item 12"
}
}
}
}
}
};
selection = categories.FirstOrDefault();
}
class Category
{
public string CategoryName { get; set; }
public List<Product> Products { get; set; }
}
class Product
{
public string ProductName { get; set; }
public List<Item> Items { get; set; }
}
class Item
{
public string ItemName { get; set; }
}
}