TreeView - Looking for specific behavior

[Matias Puzanowski]

Hello Syncfusion team!

I want the treeview to work this way:

- If parent node is checked, all childs are checked. 

- If all childs are unchecked, parent IS NOT unchecked.

- If parent is unchecked, childs are not unchecked.

Could you assist me to achieve desired behavior?

Thanks in advance

[Keerthana Rajendran]

Hi Matias, 

 

Thanks for contacting Syncfusion support. 

 

To achieve your requirements with Treeview, we suggest you enable or disable the autoCheck property during nodeChecking event based on check/uncheck action. 

 

Refer to the following code. 

 

nodeChecking: function (args) { 

    if (args.action == 'uncheck') { 

      treeObj.autoCheck = false; //disable autoCheck for uncheck. 

    } else { 

      treeObj.autoCheck = true; //enable autoCheck for check. 

    } 

  }, 

 

Sample: https://stackblitz.com/edit/ivh9kj-1kin4b?file=index.js 

 

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

 

API links: https://ej2.syncfusion.com/javascript/documentation/api/treeview/#autocheck 

                 https://ej2.syncfusion.com/javascript/documentation/api/treeview/#nodechecking 

 

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Matias Puzanowski]

Thanks for the reply!

It works, but it is possible to add this behavior?

-If the child node is parent AND has parent, all children are marked but not the parent

[Keerthana Rajendran]

Hi Matias, 

 

Most welcome.  

 

We have included a condition to uncheck the top-level parent node through the nodeChecking event. You can use the getNode method to get the parent details of the checked node.  

 

Please find the modified sample link below. 

 

https://stackblitz.com/edit/ivh9kj-vb76nn?file=index.js 

 

If we have misunderstood, kindly share your exact use case to assist you promptly.  

 

Regards, 

Keerthana R. 

 

 

[Matias Puzanowski]

Hi Keerthana,

The behavior is near what I expected, but i found an issue:

When you check Brazil, then uncheck 'Paraná'. I've Brazil, Ceará, Acre. checked.

But when I check 'China', Brazil gots unchecked.

Is there any workaround for this?

Thanks in advance,

Matias.

[Indhumathy Loganathan]

Hi Matias, 

We were able to reproduce the reported issue at our end. Since the workaround way completely changes the default behaviour of the TreeView autoCheck property, we need some additional time to validate this requirement. We will update you with further details on or before March 29, 2022. We appreciate your patience. 

Regards, 

Indhumathy L 

[Keerthana Rajendran]

Hi Matias, 

The reported issue occurs because we are dynamically switching the value of autoCheck property in TreeView for previous use case.  

To overcome this, we achieved your requirements through an alternate solution.  

The autoCheck property can be set to false during initial rendering and the child items of checked node can be retrieved through nodeChecking event.  

After retrieval, pass the child nodes id to the checkAll method of TreeView to perform check action for child nodes. 

Refer to the following code. 

nodeChecking: function (args) { 

    if (args.action == 'check') { 

      var nodeId = []; 

      var predicate = new ej.data.Predicate( 

        'pid', 

        'equal', 

        args.data[0].id, 

        true 

      ); 

      var filteredList = new ej.data.DataManager( 

        window.checkBoxData 

      ).executeLocal(new ej.data.Query().where(predicate)); //get the child nodes of current checked parent node 

      for (var i = 0; i < filteredList.length; i++) { 

        nodeId.push(filteredList[i].id); // push the child node Id 

      } 

      this.checkAll(nodeId); //check all child nodes 

    } 

  } 

Modified sample: https://stackblitz.com/edit/ivh9kj-tx8eey?file=index.js 

Please let us know if any concerns. 

Regards, 

Keerthana R.