The DropDownTree does not show its selected value if the data is set asynchronously.
Possible workarounds include:
Test page:
DropDownTreeValue1: @DropDownTreeValue1
<br />
DropDownTreeValue2: @DropDownTreeValue2
<br />
Bug:
<TelerikDropDownTree Data="@DropDownTreeData"
@bind-Value="@DropDownTreeValue1"
@bind-ExpandedItems="@DropDownTreeExpandedItems"
Width="300px">
</TelerikDropDownTree>
Workaround:
<TelerikDropDownTree Data="@DropDownTreeData"
@bind-Value="@DropDownTreeValue2"
@bind-ExpandedItems="@DropDownTreeExpandedItems"
Width="300px">
</TelerikDropDownTree>
@* Render DropDownTree after setting Data *@
@if (DropDownTreeData is not null)
{
<span>Workaround:</span>
<TelerikDropDownTree Data="@DropDownTreeData"
@bind-Value="@DropDownTreeValue1"
@bind-ExpandedItems="@DropDownTreeExpandedItems"
Width="300px">
</TelerikDropDownTree>
}
@code {
private List<TreeItem>? DropDownTreeData { get; set; }
private int DropDownTreeValue1 { get; set; }
private int DropDownTreeValue2 { get; set; }
private IEnumerable<object> DropDownTreeExpandedItems { get; set; } = new List<TreeItem>();
protected override async Task OnInitializedAsync()
{
DropDownTreeValue1 = 3;
await Task.Delay(1000);
DropDownTreeData = LoadFlatData();
// Set DropDownTree Value after setting Data
DropDownTreeValue2 = 3;
DropDownTreeExpandedItems = DropDownTreeData.Where(x => x.ParentId is null && x.HasChildren);
}
private int TreeLevels { get; set; } = 3;
private int RootItems { get; set; } = 2;
private int ItemsPerLevel { get; set; } = 2;
private int IdCounter { get; set; }
private List<TreeItem> LoadFlatData()
{
List<TreeItem> items = new List<TreeItem>();
PopulateChildren(items, null, 1);
return items;
}
private void PopulateChildren(List<TreeItem> items, int? parentId, int level)
{
var itemCount = level == 1 ? RootItems : ItemsPerLevel;
for (int i = 1; i <= itemCount; i++)
{
var itemId = ++IdCounter;
items.Add(new TreeItem()
{
Id = itemId,
ParentId = parentId,
HasChildren = level < TreeLevels,
Text = $"Level {level} Item {i} Id {itemId}",
Value = itemId
});
if (level < TreeLevels)
{
PopulateChildren(items, itemId, level + 1);
}
}
}
public class TreeItem
{
public int Id { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
public string Text { get; set; } = string.Empty;
public int Value { get; set; }
}
}
I tried to use the TelerikDropDownTree component in my blazor application. When I activate the option ShowClearButton and click on the clear button, there is no update of the bound value or the ValueChanged event will be raised.
I can reproduce my issue with repl https://blazorrepl.telerik.com/wKOcviug54ZSE06146
(bug report only)
Reproducible in the demos: https://demos.telerik.com/blazor-ui/dropdowntree/overview
(optional)
For a brief moment the filter input in the dropdown appears focused, but then the focus moves to the first item in the list. If the user clicks the “down arrow” icon to open the dropdown, the filter input is focused as expected.
The filter input is focused regardless where in the component the user clicks.