The problem at hand arises when attempting to update the CheckedItems property of a TreeView control from within an async method.
The problem seems to be timing-related and is not always reproducible. The issue is observed most often when starting the project. It seems to be reproducible only in Blazor Server App.
Reproduction:
To reproduce the issue, try running the following snippet in a Blazor Server App.
@page "/"
<TelerikTreeView Data="@FlatData"
CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
CheckParents="@true"
CheckChildren="@true"
CheckOnClick="@false"
@bind-CheckedItems="@SelectedItems">
</TelerikTreeView>
@code {
List<TreeItem> FlatData { get; set; }
IEnumerable<object> SelectedItems { get; set; } = new List<object>();
protected override async Task OnInitializedAsync()
{
await GenerateData();
await SelectDefault();
}
async Task SelectDefault()
{
await Task.Delay(100);
SelectedItems = FlatData.Where(data => data.Id == 2);
}
#pragma warning disable
async Task GenerateData()
{
FlatData = new List<TreeItem>();
FlatData.Add(new TreeItem()
{
Id = 1,
Text = "Project",
ParentId = null,
HasChildren = true,
Icon = "folder",
Expanded = true
});
FlatData.Add(new TreeItem()
{
Id = 2,
Text = "Design",
ParentId = 1,
HasChildren = true,
Icon = "brush",
Expanded = true
});
FlatData.Add(new TreeItem()
{
Id = 3,
Text = "Implementation",
ParentId = 1,
HasChildren = true,
Icon = "folder",
Expanded = true
});
}
public class TreeItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
public string Icon { get; set; }
public bool Expanded { get; set; }
}
}
The second TreeItem should be selected.
The TreeView resets the checkbox state of its items when the app adds or removes a node to the component datasource.
A possible workaround is to reset the object reference of the CheckedItems parameter.
The following test page with a workaround is a modified version of TreeView - Refresh Data - Observable Data.
@using System.Collections.ObjectModel
<TelerikButton OnClick="@AddItem">Add Item</TelerikButton>
<TelerikButton OnClick="@RemoveItem">Remove Item</TelerikButton>
<p>
TreeViewCheckedItems Count: @TreeViewCheckedItems.Count()
<br />
<label><TelerikCheckBox @bind-Value="@ApplyWorkaround" /> Apply Workaround</label>
</p>
<TelerikTreeView Data="@TreeViewData"
CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
@bind-CheckedItems="@TreeViewCheckedItems" />
@code {
private IEnumerable<object> TreeViewCheckedItems { get; set; } = new List<TreeItem>();
private ObservableCollection<object> TreeViewData { get; set; } = new ObservableCollection<object>();
private int LastId { get; set; }
private bool ApplyWorkaround { get; set; }
private void AddItem()
{
TreeViewData.Add(
new TreeItem
{
Id = ++LastId,
Text = $"Item {LastId}",
});
if (ApplyWorkaround)
{
TreeViewCheckedItems = new List<object>(TreeViewCheckedItems);
}
}
private void RemoveItem()
{
if (TreeViewData.Count > 1)
{
TreeViewData.Remove(TreeViewData.Last());
if (ApplyWorkaround)
{
TreeViewCheckedItems = new List<object>(TreeViewCheckedItems);
}
}
}
protected override void OnInitialized()
{
TreeViewData = new ObservableCollection<object>() {
new TreeItem()
{
Id = ++LastId,
Text = $"Item {LastId}"
}
};
TreeViewCheckedItems = new List<object>() { TreeViewData.First() };
}
public class TreeItem
{
public int Id { get; set; }
public int? ParentId { get; set; }
public string Text { get; set; } = string.Empty;
public bool HasChildren { get; set; }
}
}
asdf
.jpg){kind=avatar}
There are two related issues in this bug report:
- TreeView does not allow horizontally scrolling when there are items that extend past the viewport
- TreeView cuts off items when the browser is zoomed in
See REPL: https://blazorrepl.telerik.com/wwOHGPvi11wy1OBp06
Steps to reproduce:
- Open and run the REPL.
- Observe that the last deeply-nested tree item, Design20.......01 is not fully visible (if it is fully visible, just add more 0s in the middle). Specifically, the trailing "1" is not visible and cannot be scrolled to.
- Zoom the browser to 200%.
- Observe that the TreeView still does not allow horizontal scrolling to view any of the items cut off by the increased zoom.
I'm trying to use a draggable TreeView inside a Window. I think the Window is interfering with the display of the red placement arrow when I try to move a tree node. I am able to have this work on another TreeView that is not in a Window.
Here is a REPL test page.