Set node checkbox to indeterminate state

[Hosney]

Is there a way to set a node's checked state to indeterminate? Currently the only options I see are isChecked = true/false.

[Muthukrishnan Kandasamy]

 

Hi Hosney, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in TreeView component. We have provided autoCheck property for TreeView component. To change the tree nodes into intermediate state, we can simply check any of the child tree node, then  parent node state will be change to intermediate state. 

 

We have prepared simple sample for your convenience, in this sample we have checked the one child node this will set intermediate state for parent node.  

 

Please refer to the below link for the sample. 

 

https://stackblitz.com/edit/treeview-intermediate-check?file=index.ts 

 

Please check out the output screenshot of the shared sample. 

 

 

 

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

 

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

 

API: https://ej2.syncfusion.com/documentation/api/treeview/ 

 

Demo: https://ej2.syncfusion.com/demos/#/material/treeview/default.html 

 

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

 

Regards, 

Muthukrishnan K 

[Hosney]

Thanks for your reply.

What I need is a way to set this state programmatically. I am currently using a remote datasource where the data is lazy loaded. Therefore I would like to show the indeterminate checked state of the parent although the child nodes have not loaded yet.

[Sowmiya Padmanaban]

Hi Hosney,  

 

In Treeview component, we have set the intermediate state for parent nodes based on the checking of child nodes for that corresponding parent. If you want to set the intermediate state for initial loading, we have prepared a workaround solution to achieve your requirement. 

 

By adding the “e-stop” class for checkbox element for that corresponding TreeView node by using dataBound event of TreeView component. 

 

Please, refer the below code snippet. 

 

 dataBound: function(args) { 

    this.element 

      .querySelector('[data-uid="1"]') 

      .querySelector(".e-frame.e-icons") 

      .classList.add("e-stop"); 

  } 

 

 

Please, refer the sample link below: 

 

https://stackblitz.com/edit/treeview-intermediate-check-gmpkdf?file=index.ts 

 

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

 

Regards,  

Sowmiya.P 

[Hosney]

Thanks, I can work with that.

[Sowmiya Padmanaban]

Hi Hosney,  

  

We are happy to hear that your problem has been resolved. Please contact us, if you need any help from us. 

  

Regards,  

Sowmiya.P 

[João Goncalves]

Hi,

i did the same as Hosney to achieve the same porpuse.

the problem is when you click antoher checkbox from antoher node it removes the e-stop property from australia.

  https://stackblitz.com/edit/treeview-intermediate-check-gmpkdf?file=index.ts 

you can see what im talking about if you try that snippet.

can you guys help me?

I´m using the lazy load method too, i tried loading all elements at once but it gets to slow.

[LeoLavanya Dhanaraj]

Hi Joao,

We would like to inform you that you can achieve the checkbox intermediate related styles using our TreeView Checkbox with the autoCheck and isChecked properties. When you enable this property, by default the parent node goes to the intermediate state when one of its items is not selected and the others are selected. You can construct the datasource based on these properties and append it to the TreeView component.

When you enable the CSS custom styles for the nodes, it will override our default styles and introduce issues with the TreeView behavior because our autoCheck related source code is interrelated to its CSS selectors. Therefore, we suggest using our API properties and methods for TreeView customization instead of using CSS styles.

Here, we have included a simple sample that demonstrates the TreeView component's autoCheck support with the help of the isChecked property. Please refer to the code snippets and sample below for more information.

Sample : https://stackblitz.com/edit/treeview-intermediate-check-zwemdn?file=index.ts,dataSource.json

[dataSource.json]

"checkboxData": [

  { "id": 1, "name": "Australia", "hasChild": true, "expanded": true },

  { "id": 2, "pid": 1, "name": "India", "isChecked": true },

  { "id": 3, "pid": 1, "name": "China", "isChecked": false },

  …

]

Output screenshot :

Also, please refer the below mentioned documentation links to know more about our TreeView component.

API : https://helpej2.syncfusion.com/javascript/documentation/api/treeview/

Documentation : https://ej2.syncfusion.com/javascript/documentation/treeview/check-box

Regards,

Leo Lavanya Dhanaraj

[João Goncalves]

Hi, i think you didnt understand my question. i already tried that solution. It works great in case you an array with few position, but my data object is huge. so it gets very slow in doing basic stuff like clicking nodes etc.

So i ended up tryng this solution with lazy load, the problem is when i force the indeterminate state with class "e-stop" i get that bug sended on this code snippet,that you guys give in this ticket.

do you understand what im saying? 

[João Goncalves]

this snippet

[João Goncalves]

im sending a video with the bug.

Attachment: Your_Clip_56bc70f.zip

[Vishwanathan Muruganantham]

Hi Joao Goncalves,

We apologize for any inconvenience this may have caused. We have validated your query and understand that the indeterminate state changed when another checkbox was clicked. We were able to replicate the issue. To resolve this, we need to reassign the ‘e-stop’ class to the required checkbox in the ‘nodeChecked’ event.

Refer to the below code snippet for reference.

…. 

nodeChecked: function() {

    modifyInterminate();

  },

 

…

 

  dataBound: function() {

    modifyInterminate();

  }

});

function modifyInterminate(){

  treeObj.element.querySelector('[data-uid="1"]').querySelector(".e-frame.e-icons")

  .classList.remove("e-check");

  treeObj.element.querySelector('[data-uid="1"]').querySelector(".e-frame.e-icons")

  .classList.add("e-stop");

}

Sample: https://stackblitz.com/edit/treeview-intermediate-check-k4nyfy?file=index.ts

Best Regards,
Vishwanathan