TreeView - Async loaded DataSource results in all nodes being selected when using Checkboxes

[Stephen McMahon]

I am using a SfTreeView component, and the datasource is loaded OnInitializedAsync.

When the component displays, all the top-level nodes are selected (i.e. they all show with a blue background over the row) if I have checkboxes turned on.

e.g.

<SfTreeView @ref="tree" TValue="ClassificationDTO" AllowEditing="true" AllowDragAndDrop="true" ExpandOn="ExpandOnSettings.Click" AutoCheck="true" SortOrder="Syncfusion.Blazor.Navigations.SortOrder.None" FullRowSelect="true" ShowCheckBox="true" AllowMultiSelection="false">

    <TreeViewFieldsSettings TValue="ClassificationDTO" @bind-DataSource="@classifications" Id="Id" Text="Name" ParentID="ParentId" HasChildren="HasChildren" IsChecked="Active" Selected="false" Expanded="true" />

    <TreeViewEvents TValue="ClassificationDTO" NodeSelected="OnSelect" NodeClicked="NodeClicked" />

    <SfContextMenu TValue="ContextMenuItem" @ref="menu" Target="#treeview">

        <ContextMenuEvents TValue="ContextMenuItem" ItemSelected="MenuSelect" />

        <ContextMenuItems>

            <ContextMenuItem Text="Add" />

            <ContextMenuItem Text="Edit" />

            <ContextMenuItem Text="Delete" />

        </ContextMenuItems>

    </SfContextMenu>

</SfTreeView>

@code {

List<ClassificationDTO> classifications;

protected override async Task OnInitializedAsync()

{

    classifications = await caseRepository.GetClassifications();

}

If I turn checkboxes off, the issue does not occur (however, I need them turned on). If I populate the DataSource synchronously, the issue does not occur (but I need to load the data from my WebAPI async).

Does anyone else have this issue, and a workaround?

(Just to clarify, the 'selection' I'm talking about is the selection of the entire row, like the node has been clicked on, not the selection via the checkbox)

[Sowmiya Padmanaban]

Hi Stephen McMahon,  

 

Greetings from Syncfusion support. 

 

We have checked your reported issue with TreeView component and able to reproduce it. We consider this as a bug from our end. It will be included in our Volume 3 release which is expected to be released at the end of September 2020.  

 

Track the below link to know the bug status. 

 

https://www.syncfusion.com/feedback/16600/when-set-the-ischecked-property-as-true-it-also-selects-the-treeview-node 

 

However, we suggest a workaround to resolve your issue, remove the isChecked property in your application and check the node using checkedNodes property using DataBound event. 

 

<SfTreeView @ref="tree" TValue="ClassificationDTO" AllowEditing="true" AllowDragAndDrop="true" ExpandOn="ExpandOnSettings.Click"  AutoCheck="true" SortOrder="Syncfusion.Blazor.Navigations.SortOrder.None" FullRowSelect="true" ShowCheckBox="true" AllowMultiSelection="false"> 

    <TreeViewFieldsSettings TValue="ClassificationDTO" DataSource="@classifications" Id="Id" Text="Name" ParentID="ParentId" HasChildren="HasChildren" Expanded="Expanded" /> 

    <TreeViewEvents TValue="ClassificationDTO" DataBound="dataBound"></TreeViewEvents> 

</SfTreeView> 

    public async Task dataBound(Syncfusion.Blazor.Navigations.DataBoundEventArgs<ClassificationDTO> args) 

    { 

        tree.CheckedNodes = new string[] { "1" }; 

        tree.DataBind(); 

    } 

 

Refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/TreeView-2003388843.zip 

 

To know more about the TreeView component, refer the below links. 

 

UG Documentation-https://blazor.syncfusion.com/documentation/treeview/getting-started/ 

 

API Reference-https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.ITreeView.html 

 

Demo link-https://blazor.syncfusion.com/demos/treeview/default-functionalities/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P

[Andreas Gabriel]

If I change your demo little bit and add one line:  await Task.Yield() - or any other real task with await, the treeview doesn't show anymore.

 protected override async Task OnInitializedAsync()

    {

        await Task.Delay(10);   //  --> no data visible!!!

        classifications = await TreeViewService.GetClassifications();

    }

[Sowmiya Padmanaban]

Hi Andreas Gabriel,  

 

We have checked your reported issue with TreeView component. We have already logged this as a feature improvement task with TreeView component. This feature will be included in Volume 3 SP release which is expected to be released at the end of October 2020. 

 

You can track the following feedback link to know the status of this feature implementation. 

 

https://www.syncfusion.com/feedback/15027/datasource-in-treeview-is-not-binded-to-the-treeview-component-when-declaring 

 

We appreciate your patience. 

 

Regards,  

Sowmiya.P