Hello,
The problem is similar to https://feedback.telerik.com/blazor/1552955-child-treeview-items-not-checked-after-expand, but in this case, the TreeView is using load-on-demand and the OnExpand event. As soon as a checked parent is expanded, the child checkboxes are always unchecked.
Here is a test page. Expand the parent item, check it, collapse it and then expand it again. The child nodes will lose their checked state.
<TelerikTreeView Data="@FlatData"
OnExpand="@LoadChildren"
CheckBoxMode="@TreeViewCheckBoxMode.Multiple"
CheckChildren="true"
CheckParents="true"
@bind-CheckedItems="@CheckedItems"
@bind-ExpandedItems="@ExpandedItems">
</TelerikTreeView>
@code {
List<TreeItem> FlatData { get; set; } = new List<TreeItem>();
IEnumerable<object> CheckedItems { get; set; } = new List<object>();
IEnumerable<object> ExpandedItems { get; set; } = new List<object>();
async Task LoadChildren(TreeViewExpandEventArgs args)
{
TreeItem currItem = args.Item as TreeItem;
if (args.Expanded && !FlatData.Any(x => x.ParentId == currItem.Id))
{
if (currItem.Id == 1)
{
FlatData.Add(new TreeItem()
{
Id = 4,
Text = "Child 1 of Parent 1",
ParentId = 1,
HasChildren = false
});
FlatData.Add(new TreeItem()
{
Id = 5,
Text = "Child 2 of Parent 1",
ParentId = 1,
HasChildren = false
});
}
}
}
protected override void OnInitialized()
{
FlatData = LoadFlat();
}
private List<TreeItem> LoadFlat()
{
FlatData.Add(new TreeItem()
{
Id = 1,
Text = "Parent 1",
ParentId = null,
HasChildren = true
});
return FlatData;
}
public class TreeItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentId { get; set; }
public bool HasChildren { get; set; }
}
}
Public sample at https://demos.telerik.com/blazor-ui/treeview/checkboxes
Check parent Documents item:
Then collapse parent and expand them again:
It would be great to be able to expand nodes dynamically by setting the expand property by code.
protected async Task OnItemClickHandler(TreeViewItemClickEventArgs e)
{
var item = e.Item as TreeViewItem;
item.Expanded = true;
}
Add the following Razor component and run. Click around tree, especially from disclosure icon to node to 'plus' icon. Error will occur.
=====================================
@page "/poopy"
@using Microsoft.AspNetCore.Components
@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.Blazor.Components.Button
<style>
.k-mid:hover .showme {
display: block;
}
.showme {
display: none;
margin-left: 10px;
}
.showhim:hover .showme {
display: block;
}
</style>
@using Telerik.Blazor.Components.TreeView
<TelerikTreeView Data="@TreeData">
<TelerikTreeViewBindings>
<TelerikTreeViewBinding IdField="Id" ParentIdField="ParentIdValue" ExpandedField="Expanded" HasChildrenField="HasChildren">
<ItemTemplate>
<div @onclick="@(_ => NodeClicked((context as TreeItem).Text))" style="cursor: pointer">@((context as TreeItem).Text)</div>
<div class="showme" @onclick="SayHelloHandler" style="cursor: pointer">
<TelerikIcon IconName="@IconName.Plus" />
</div>
</ItemTemplate>
</TelerikTreeViewBinding>
</TelerikTreeViewBindings>
</TelerikTreeView>
@helloString
@code {
MarkupString helloString;
void NodeClicked(string node)
{
helloString = new MarkupString(node);
}
void SayHelloHandler()
{
string msg = $"Hello from <strong>Telerik Blazor</strong> at {DateTime.Now}.<br /> Now you can use C# to write front-end!";
helloString = new MarkupString(msg);
}
public class TreeItem
{
public int Id { get; set; }
public string Text { get; set; }
public int? ParentIdValue { get; set; }
public bool HasChildren { get; set; }
public bool Expanded { get; set; }
}
public IEnumerable<TreeItem> TreeData { get; set; }
protected override void OnInitialized()
{
LoadTreeData();
}
private void LoadTreeData()
{
List<TreeItem> items = new List<TreeItem>();
items.Add(new TreeItem()
{
Id = 1,
Text = "Project",
ParentIdValue = null,
HasChildren = true,
Expanded = true
});
items.Add(new TreeItem()
{
Id = 2,
Text = "Design",
ParentIdValue = 1,
HasChildren = false,
Expanded = true
});
items.Add(new TreeItem()
{
Id = 3,
Text = "Implementation",
ParentIdValue = 1,
HasChildren = false,
Expanded = true
});
TreeData = items;
}
}
======================================
Microsoft.JSInterop.JSException
HResult=0x80131500