There is an undocumented breaking change in the selection behavior of the v13.0.0 TreeView component that prevents us from upgrading from v12.3.0.
In v12.3.0, selecting a TreeView checkbox does change the TreeView item selection or trigger the selection change events. In v13.0.0, checking an item does also change the selection. The v12.3.0 behavior is important for our implementation because selecting a TreeView item in our application fetches data from a database and we do not want the performance overhead of those calls when checking an item---we want the user to be able to select multiple items and only then explicitly fetch the data for all of them.
I've created a minimal example here: https://blazorrepl.telerik.com/cqYdEePd40Zq3ava43. You can see the behavior differences when switching between versions.
Please let me know if there's any additional information we can provide. A workaround to this behavior would be appreciated. Thank you!
The TreeView exposes drag events that allow me to detect when the user drags an item and to get the information for the dragged item. I want to be able to drag that item outside of the TreeView and drop it in my custom target.
I am aware that I should handle the custom drop functionality. However, the @ondrop event of my custom target currently does not fire for the tree item: https://blazorrepl.telerik.com/QIblPZvd0412k6U128.
We have the following scenario:
- a dialog that contains a TreeView
- the TreeView is not expanded, when the dialog is opened, only the root node is displayed
- the children are loaded on demand, when the parent node is expanded
- there is a public async Task LoadChildrenAsync() that loads the children from the source
- the loading operation might take a few seconds
The problem is when you close the dialog before the loading is finished, a NullReferenceException occurs.
System.NullReferenceException: Object reference not set to an instance of an object.
at Telerik.Blazor.Components.Common.Trees.TelerikTreeDataSource.GetTreeItems(IEnumerable`1 data, Int32 level, String parentIndex)
This REPL test page is based on the TreeView Filtering demo, but with added checkboxes.
- Check an item.
- Filter the TreeView data, so that the checked item is no longer present.
- Try to check another item.
- The TreeView will throw a NullReferenceException.
A possible workaround is to also filter (or clear) the collection that is bound to the CheckedItems parameter of the TreeView.
I am trying to restore the expanded items by programmatically populating the ExpandedItems collection of the TreeView.
I have overriden "Equals" on the model, so the items are not compared by reference but by a unique identifier. The problem is that the TelerikTreeView does not respect this override and does not expand the items.
Other controls with similar features do respect overriden implementation of "Equals".
Reproduction: https://blazorrepl.telerik.com/cSuKkqwu46w4sHaW53.
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.
Hello,
I have a TelerikTreeView with about 2000 items bound to an ObservableCollection (Data). I use SelectedItems, SelectedItemsChanged, SelectionMode multitple and @bind-ExpandedItems.
When my users manually expand the nodes of the treeview, everything is fine and the operation of the treeview works smoothly. Loading UI components based on user selection takes less than 50ms.
As soon as I set the "ExpandedItems" collection from code (according to your treeview demo), the whole treeview operation becomes painfully slow with waiting times of 2 to 4 SECONDS for selection and expansion. Already expanding from code takes several seconds.
As soon as I reset the ExpandedItems from code and collapse the complete tree, the treeview is usable again without delays.
If the application expands TreeView items programmatically, and then the user tries to select multiple items, an exception will occur.
The issue is a regression that occurred in version 3.0.0. A possible workaround is to Rebind() the TreeView with a small delay after programmatic item expansion.
<TelerikTreeView @ref="@TreeViewRef"
Data="@FlatData"
@bind-ExpandedItems="@ExpandedItems"
SelectionMode="@TreeViewSelectionMode.Multiple"
SelectedItems="@SelectedItems"
SelectedItemsChanged="@((IEnumerable<object> items) => SelectedItemsHandler(items))" />
<TelerikButton OnClick="@ExpandAll">Expand All</TelerikButton>
<TelerikButton OnClick="@CollapseAll">Collapse All</TelerikButton>
@code {
public TelerikTreeView TreeViewRef { get; set; }
public IEnumerable<TreeItem> FlatData { get; set; }
public IEnumerable<object> SelectedItems { get; set; } = new List<object>();
public IEnumerable<object> ExpandedItems { get; set; } = new List<object>();
async Task ExpandAll()
{
ExpandedItems = FlatData.Where(x => x.HasChildren == true);
await Task.Delay(1);
TreeViewRef.Rebind();
}
void CollapseAll()
{
ExpandedItems = new List<object>();
SelectedItems = new List<object>();
}
void SelectedItemsHandler(IEnumerable<object> items)
{
SelectedItems = items;
}
protected override async void OnInitialized()
{
FlatData = LoadFlat();
}
int TreeLevels { get; set; } = 3;
int ItemsPerLevel { get; set; } = 3;
int IdCounter { get; set; } = 1;
List<TreeItem> LoadFlat()
{
List<TreeItem> items = new List<TreeItem>();
PopulateTreeItems(items, null, 1);
return items;
}
void PopulateTreeItems(List<TreeItem> items, int? parentId, int level)
{
for (int i = 1; i <= ItemsPerLevel; i++)
{
var itemId = IdCounter++;
items.Add(new TreeItem()
{
Id = itemId,
Text = $"Level {level} Item {i} Id {itemId}",
ParentId = parentId,
HasChildren = level < TreeLevels
});
if (level < TreeLevels)
{
PopulateTreeItems(items, itemId, level + 1);
}
}
}
public class TreeItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
}
}
.jpg){kind=avatar}
Per WAI-ARIA 1.2, the "aria-level" attribute, if present, "is an integer greater than or equal to 1".
However, Blazor TreeView uses 0-indexing for the attribute which means that the root item has an invalid (and ignored) aria-level property. This is problematic because the browser will infer the level from the DOM nesting for the root item, but then use aria-level for all other sub-trees, leading to inconsistent levels (in the demo, the level goes 2 > 1 > 2).
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.
Checking a checkbox of a on demand-loaded child then collapsing and reopening its parent makes the checkbox disappear. However, it is still checked in the CheckedItems collection, but just not in the UI. See this REPL example. Steps...
1. Expand a top level item
2. Check its child checkbox
3. Collapse the top level item
4. Expand it again
Result: checkbox gone (in the UI)
After upgrade to 3.0, when expanding a checked tree node, the child items are not checked. Also, if the child items are checked, but the parent is collapsed and expanded again, the checked children are unchecked.
This can be replicated on the online demo.
Hi.
I'd like to request the ability to set the Enabled property on check boxes in the treeview.
For example, given a tree view with check boxes:
<TelerikTreeView Data="@StorageItems"
@bind-CheckedItems="@CheckedItems"
CheckBoxMode="TreeViewCheckBoxMode.Multiple"
CheckParents="true"
CheckChildren="true" />
I'd like to make the tree view read-only so the check boxes appear disabled and the user cannot check-mark or uncheck-mark them.
Thank you.
The TreeView has CheckBoxMode="@TreeViewCheckBoxMode.Multiple" and CheckParents="true". Only some checkboxes are checked and there are parent checkboxes in indeterminate state.
When I try to clear all checked checkboxes, the indeterminate checkboxes are not cleared and maintain their state.
ADMIT EDIT:
Initially, this bug report was about unchecking all child items. However, it appears that the opposite behavior exists too - if all children are checked programmatically, the parent checkbox will show as indeterminate. In this case, check the parent explicitly as well.
Stack trace:
crit: Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100]
Unhandled exception rendering component: Unknown edit type: 0
Error: Unknown edit type: 0
at e.applyEdits (https://localhost:44363/_framework/blazor.webassembly.js:1:15008)
at e.updateComponent (https://localhost:44363/_framework/blazor.webassembly.js:1:12880)
at Object.t.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:1704)
at Object.window.Blazor._internal.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:34784)
at _mono_wasm_invoke_js_unmarshalled (https://localhost:44363/_framework/wasm/dotnet.3.2.0.js:1:172099)
at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
Microsoft.JSInterop.JSException: Unknown edit type: 0
Error: Unknown edit type: 0
at e.applyEdits (https://localhost:44363/_framework/blazor.webassembly.js:1:15008)
at e.updateComponent (https://localhost:44363/_framework/blazor.webassembly.js:1:12880)
at Object.t.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:1704)
at Object.window.Blazor._internal.renderBatch (https://localhost:44363/_framework/blazor.webassembly.js:1:34784)
at _mono_wasm_invoke_js_unmarshalled (https://localhost:44363/_framework/wasm/dotnet.3.2.0.js:1:172099)
at wasm_invoke_iiiiii (<anonymous>:wasm-function[3160]:0x9b33d)
at icall_trampoline_dispatch (<anonymous>:wasm-function[5777]:0xfe711)
at mono_wasm_interp_to_native_trampoline (<anonymous>:wasm-function[4607]:0xca81d)
at ves_pinvoke_method (<anonymous>:wasm-function[3209]:0x9cd40)
at interp_exec_method (<anonymous>:wasm-function[1120]:0x2598d)
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,T2,TResult] (System.String identifier, T0 arg0, T1 arg1, T2 arg2) <0x3ae01e8 + 0x00046> in <filename unknown>:0
at Microsoft.JSInterop.WebAssembly.WebAssemblyJSRuntime.InvokeUnmarshalled[T0,T1,TResult] (System.String identifier, T0 arg0, T1 arg1) <0x3ae0108 + 0x00014> in <filename unknown>:0
at Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer.UpdateDisplayAsync (Microsoft.AspNetCore.Components.RenderTree.RenderBatch& batch) <0x3ae0010 + 0x0001e> in <filename unknown>:0
at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue () <0x387e448 + 0x000f2> in <filename unknown>:0