Need a requirement of tree view(possibly 3 tier) with checkbox only at leaf nodes and can select only one checkbox at nodes of same level

[Unknown]

Need a requirement of tree view(possibly 3 tier) with checkbox only at leaf nodes and can select only one checkbox at nodes of the same level in both the parent level and child level.

• Discover Music (Root)

• English (Parent)

1.  Pop (Leaf child node)
2. Jazz (Leaf child node)
3. Rock (Leaf child node)

• Latin (Parent)

1.  Country(Leaf child node)
2. Instrumental(Leaf child node)

Checkboxes should be only at leaf child nodes and able to select one at a time, and at the parent level also at the same time. That means when I check the leaf child node 'country' in 'Latin' parent node, previously if 'Instrumental' is checked then it should be cleared as well as the child leaf nodes of the parent 'English'  too. 

[Sowmiya Padmanaban]

Hi Richy,  

 

Greetings from Syncfusion support. 

 

We have checked your requirement with TreeView component. Based on your shared details, we understood that you are using three tree node levels in TreeView component.  

 

Query1-  Show checkbox only in third level node of TreeView component. 

 

As you expect to show checkboxes only for last node level of TreeView, you can hide the checkbox of first two levels by using CSS styles . Refer the below code snippet. 

 

<style> 

    .CustomTree.e-treeview .e-list-item.e-level-1 > .e-text-content .e-checkbox-wrapper,  

    .CustomTree.e-treeview .e-list-item.e-level-2 > .e-text-content .e-checkbox-wrapper { 

        display: none 

    } 

</style> 

 

Query2- Check the one node at a time. 

 

You can achieve this requirement by using NodeChecking event of TreeView component. 

 

Refer the below code snippet. 

 

@using Syncfusion.Blazor.Navigations 

 

<SfTreeView TValue="Music" ShowCheckBox="true" CssClass="CustomTree" CheckedNodes="CheckedNodes" AutoCheck="false"> 

    <TreeViewFieldsSettings TValue="Music" Id="Id" DataSource="@Countries" Text="Name" ParentID="ParentId" HasChildren="HasChild" Expanded="Expanded" Selected="IsSelected"></TreeViewFieldsSettings> 

    <TreeViewEvents TValue="Music" NodeChecking="nodeChecking"></TreeViewEvents> 

</SfTreeView> 

@code{  

    public string[] CheckedNodes; 

    public void nodeChecking(NodeCheckEventArgs args) 

    { 

        if (args.IsInteracted && (args.Action == "check") && ((this.CheckedNodes == null) || (args.Data[0].Id != this.CheckedNodes[0]))) 

        { 

            //prevent the check action of TreeVew node 

            args.Cancel = true; 

            // Check only the corresponding node of TreeView component. 

            CheckedNodes = new string[] { args.Data[0].Id }; 

        } 

    } 

  } 

 

To achieve your requirement, you need to set AutoCheck property as false for TreeView component with that configuration, parent tree node will not auto check when check any child tree nodes, and selection will be maintained in the TreeView. 

 

Refer to the below sample link. 

 

https://www.syncfusion.com/downloads/support/directtrac/291385/ze/TreeView1640801143.zip 

 

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

 

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

 

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

 

API reference- https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor~Syncfusion.Blazor.Navigations.ITreeView_members.html 

 

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

 

Regards,  

Sowmiya.P 

[Unknown]

Thanks for the reply... 

But the levels are not always three, the levels can increase or decrease dynamically with data. And the treeview you shared still not binding the list.

<SfTreeView TValue="Music" ShowCheckBox="true" CssClass="CustomTree" CheckedNodes="CheckedNodes" AutoCheck="false"> 

    <TreeViewFieldsSettings TValue="Music" Id="Id" DataSource="@Countries" Text="Name" ParentID="ParentId" HasChildren="HasChild" Expanded="Expanded" Selected="IsSelected">TreeViewFieldsSettings> 

    <TreeViewEvents TValue="Music" NodeChecking="nodeChecking">TreeViewEvents> 

SfTreeView> 

unless the Child="@("Children")" parameter being added.

[Unknown]

Getting this error while populating data to Treeview

Error: Newtonsoft.Json.JsonSerializationException: Self referencing loop detected with type 'Cureitt.Web.Components.ViewModels.Patient.StudyParameterGroupViewModel'. Path 'Children[0].Parent.Children'.

   at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.CheckForCircularReference(JsonWriter writer, Object value, JsonProperty property, JsonContract contract, JsonContainerContract containerContract, JsonProperty containerProperty)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.SerializeList(JsonWriter writer, IEnumerable values, JsonArrayContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.SerializeObject(JsonWriter writer, Object value, JsonObjectContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.SerializeObject(JsonWriter writer, Object value, JsonObjectContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.SerializeList(JsonWriter writer, IEnumerable values, JsonArrayContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.SerializeObject(JsonWriter writer, Object value, JsonObjectContract contract, JsonProperty member, JsonContainerContract collectionContract, JsonProperty containerProperty)

   at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.Serialize(JsonWriter jsonWriter, Object value, Type objectType)

   at Newtonsoft.Json.JsonSerializer.SerializeInternal(JsonWriter jsonWriter, Object value, Type objectType)

   at Newtonsoft.Json.JsonConvert.SerializeObjectInternal(Object value, Type type, JsonSerializer jsonSerializer)

   at Syncfusion.Blazor.Lists.ListBaseFoundation`1.GetMappedData(T data)

   at Syncfusion.Blazor.Lists.CreateListFromComplex`1.BuildRenderTree(RenderTreeBuilder __builder)

   at Microsoft.AspNetCore.Components.Rendering.ComponentState.RenderIntoBatch(RenderBatchBuilder batchBuilder, RenderFragment renderFragment)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.RenderInExistingBatch(RenderQueueEntry renderQueueEntry)

   at Microsoft.AspNetCore.Components.RenderTree.Renderer.ProcessRenderQueue()

[Sowmiya Padmanaban]

Hi Richy,  

 

Sorry for the inconvenience. 

 

Query1 – Hide the checkbox of TreeView component 

 

Based on your shared details, we understood that you are using Hierarchal datasource with TreeView component. If you are using Hierarchical datasource, there is no need for using the ParentID and hasChildren attributes in TreeView fields settings.  

 

Refer the below link for Data binding of TreeView component.   

 

https://blazor.syncfusion.com/documentation/treeview/data-binding/ 

 

When using Hierarchical datasource “e-has-child” class will add for each parent node in TreeView component. Using that class you can hide the checkbox. 

 

Refer the below code snippet. 

 

<style> 

      .e-treeview .e-list-item.e-has-child > .e-text-content .e-checkbox-wrapper { 

        display: none 

    }  

</style> 

 

Refer the below code snippet. 

 

@using Syncfusion.Blazor.Navigations 

<div class="control-section"> 

    <div class="control_wrapper"> 

        <SfTreeView TValue="StudyParameterGroupViewModel" ShowCheckBox="true" AutoCheck="false"> 

            <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="Id" Text="DisplayText" Expanded="Expanded" Selected="Selected" Child="@("Children")"></TreeViewFieldsSettings> 

            <TreeViewEvents TValue="StudyParameterGroupViewModel"></TreeViewEvents> 

        </SfTreeView> 

    </div> 

</div> 

@code{ 

    List<StudyParameterGroupViewModel> TreeDataSource = new List<StudyParameterGroupViewModel>(); 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

        TreeDataSource.Add(new StudyParameterGroupViewModel 

        { 

            Id = 01, 

            DisplayText = "Local Disk (C:)", 

            Expanded = true, 

            Children = new List<StudyParameterGroupViewModel>() 

    { 

                new StudyParameterGroupViewModel { Id = 015, DisplayText = "Program Files", 

                    Children = new List<StudyParameterGroupViewModel>() 

            { 

                        new StudyParameterGroupViewModel { Id = 011, DisplayText = "Windows NT" }, 

                        new StudyParameterGroupViewModel { Id = 012, DisplayText = "Windows Mail" }, 

                        new StudyParameterGroupViewModel { Id = 012, DisplayText = "Windows Photo Viewer" } 

                    }, 

                }, 

            }, 

        }); 

       

    } 

    class StudyParameterGroupViewModel 

    { 

        public int Id { get; set; } 

        public string DisplayText { get; set; } 

        public string Icon { get; set; } 

        public bool Expanded { get; set; } 

        public bool Selected { get; set; } 

        public List<StudyParameterGroupViewModel> Children { get; set; } 

    } 

} 

<style> 

    .e-treeview .e-list-item.e-has-child > .e-text-content .e-checkbox-wrapper { 

        display: none 

    } 

</style> 

 

Refer the below screenshot. 

 

 

 

We have prepared a sample based on your shared code snippet. 

 

https://www.syncfusion.com/downloads/support/directtrac/291385/ze/TreeView1414331125.zip 

  

Query2- Script error in TreeView component. 

 

Based on your shared details, we were unable to predict the exact case of your reported issue. Could you please share the following details regarding your reported issue. 

 

·         Share the steps to replicate the issue. 

·         Share the code snippet for binding the datasource to TreeView component. 

·         Share the issue replicating video. 

·         If possible, replicate the issue in attached sample. 

 

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

 

Regards,  

Sowmiya.P