Enable/Disable checkboxes on SfTreeView

[Michael Aston]

Is it possible to enable/disable all the checkboxes on Treeview in response to event such as a radiobutton selection?

[Muthukrishnan Kandasamy]

 

Hi Michael, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in Syncfusion Blazor TreeView component. Based on your provided details, we suspect that your requirement is to show and hide the TreeView checkbox dynamically. We can achieve your requirement by using the ShowCheckBox property. We have prepared sample application to meet your requirement, in this sample we have used Radio button component for show/hide the checkbox. Please refer to the below code block. 

 

<SfRadioButton Label="Show CheckBox" Name="check" Value="enable" @onchange="onChange" @bind-Checked="RadioBtnChecked"></SfRadioButton> 

 

<SfRadioButton Label="Hide CheckBox" Name="check" Value="disable" @onchange="onChange" @bind-Checked="RadioBtnChecked"></SfRadioButton> 

 

<SfTreeView TValue="TeamDetails" ShowCheckBox="treeCheck"> 

    <TreeViewFieldsSettings TValue="TeamDetails" Id="Id" Text="Name" Child="Children" DataSource="@Team" Expanded="Expanded"></TreeViewFieldsSettings> 

</SfTreeView> 

 

 

@code{ 

 

    public bool treeCheck = true; 

    public class TeamDetails 

    { 

        public string Id { get; set; } 

        public string Name { get; set; } 

        public bool Expanded { get; set; } 

        public bool Selected { get; set; } 

        public List<TeamDetails> Children; 

    } 

    public string RadioBtnChecked = "enable"; 

 

    private void onChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) 

    { 

        if(args.Value.ToString() == "disable") 

        { 

            treeCheck = false; 

        } 

        else 

        { 

            treeCheck = true; 

        } 

    } 

 

The attached sample application can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/164660/ze/TreeCheckEnableDisable-1790729758 

 

Please check the below output screenshot of the attached sample. 

 

Enabled Checkbox	Disabled Checkbox

 

Please refer to the below links to know more about TreeView component. 

 

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

 

Demo: https://blazor.syncfusion.com/demos/treeview/default-functionalities?theme=bootstrap4 

 

API: https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html 

 

If we misunderstood your requirement, please share us some additional details. It will be help us to provide you the prompt solution. 

 

1.     Share us the exact requirement with TreeView component. 

2.     Share the screenshot of the requirement. 

3.     Share us the screen recorded video of your requirement. 

 

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

 

Regards, 

Muthukrishnan K 

[Michael Aston]

Thanks for this. Actually was looking to show the checkbox as disabled rather than hidden. In the end found a solution using DisableNodes method.

[Sowmiya Padmanaban]

Hi Michael,  

  

Based on your update, we identified that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards, 

Sowmiya.P