How to programmatically set the checkbox to intermediate state?

Question

Hi,I'm looking for a way to programmatically set the treeview checkbox to an intermediate state and also change the color of the box.Could you please help me?Regards,Sérgio Sant'Anna

Indhumathy Loganathan · Answer

Hi Sergio,

Greetings from Syncfusion support.

We have validated your requirement in Blazor TreeView component. We have provided AutoCheck property for TreeView component. To change the tree nodes into intermediate state, enable AutoCheck property and we can just check any of the child tree node so the parent node state will be change to intermediate state.

For your reference, we have prepared a simple sample where we have set AutoCheck as true and in a button click we checked the child node to programmatically set intermediate state for its parent node. Check the below code snippet.

<button @onclick="click">SetIntermediateState</button>

</SfTreeView>

...

public void click()

{

treeview.CheckAllAsync(new string[] { "3" });

}

Similar to the above way, you can pass the child nodes id inside the CheckAllAsync method to set intermediate state for the required parent nodes. Also to change the color of the checkbox, you can use the below CSS styles.

/*style to set the color of the checkbox*/

.Tree .e-checkbox-wrapper .e-frame {

background-color: #fff;

border-color: #e61809;

}

/*style to set the color of the intermediate state and checked state of checkbox*/

.Tree .e-checkbox-wrapper .e-frame.e-stop, .Tree .e-checkbox-wrapper .e-frame.e-check {

background-color: #e61809;

border-color: #e61809;

color: #fff;

}

Sample: https://www.syncfusion.com/downloads/support/forum/169923/ze/TreeViewSample1629168745

We also have Theme Studio option which can be used to generate customized theme apart from existing themes. Please refer to the below link for more details on theme studio.

https://blazor.syncfusion.com/documentation/appearance/theme-studio

Please check the shared details and let us know if you need any further assistance.

Regards,

Indhumathy L

Sergio Sant'Anna · Answer

Hi Indumathy,Thanks for the detailed explanation.Sorry, but I forgot to mention that I need to do this without using the Autocheck feature.In my solution I need to conditionally control the parent node selections. And that's why my need to programmatically check the intermediate state.Could you please help me with this?Regards,Sérgio Sant'Anna

Indhumathy Loganathan · Answer

Hi Sergio, 
 
In Treeview component, we have set the intermediate state for parent nodes based on the checking of child nodes for that corresponding parent. To set the intermediate state for the parent node without auto check functionality, we have prepared a workaround solution to achieve your requirement.  
 
By adding the “e-stop” class for checkbox element of that corresponding parent node, you can achieve your requirement. We have made a JS interop call to perform this customization. Refer to the below code snippet. 
 




[Index.razor] 
public async Task click() 
{ 
    string[] id = {"1","14" }; 
    for (var i = 0; i < id.Length; i++) 
    { 
        await jsRuntime.InvokeAsync<object>("setstate", id[i]); 
    } 
} 
[_Host.cshtml] 
function setstate(idValue) {         
    var tree = document.getElementsByClassName("e-treeview")[0]; 
    //set intermediate state for the parent nodes. 
    tree.querySelector('[data-uid="' + idValue + '"]') 
        .querySelector(".e-frame.e-icons") 
        .classList.add("e-stop");           
} 
 
Sample: https://www.syncfusion.com/downloads/support/forum/169923/ze/TreeViewSample1515370977 
 
Similar to the above way, you can pass the required parent node id value to set the intermediate state for them. Please let us know if you need any further assistance. 
 
Regards, Indhumathy L

Sergio Sant'Anna · Answer

Hi Indumathy,

This workaround solved my problem. Thanks!Regards,Sérgio  Sant'Anna

Keerthana Rajendran · Answer

Hi Sergio, 

Most welcome. We are glad to hear that the provided suggestions helped you. Please get back to us if you need any further assistance. 

Regards, 
Keerthana R.