Expand / collapse parent node on click and only make child nodes selectable

[Frederik Gysel]

Hi,

Please see my example:
https://stackblitz.com/edit/vgf5xg-x6jjt5je?file=index.js

I am trying to expand/collapse the parent nodes on click
This works but it's a  bit 'buggy': when I click the parent node 'Australia', the node expands but when I click 'Australia' again the node does not collapse unless I doubleclick the node.  How can I achieve that the parent nodes expands/collapse on single click?

Secondly: how to select a 'child' value while selection of a parent value should be blocked ?(selection of parent node should only expand/collapse the node). So for example, how to select 'Acre' from the tree?

Thx

Frederik

[Sivakumar ShunmugaSundaram]

Hi Frederik,

Thanks for reaching out and sharing your example. On further validation you're spot on about the behavior: the expand/collapse works for opening but feels "buggy" on re-clicks because the nodeSelected event only fires on the initial selection of a node.

Once a node is selected and expanded, subsequent clicks on it don't trigger nodeSelected again (since it's already in a selected state), which is why you end up needing a double-click to collapse.

To fix this and meet both requirements—single-click toggle for parent expand/collapse and blocking parent selection while allowing child selection—we need to switch to the nodeClicked event on the underlying TreeView. This fires every time you click a node, regardless of its selection state. From there:

• For parents (nodes with children): Toggle expand/collapse explicitly.

• For children (leaf nodes): Set the DropDownTree's value to select it (without checkboxes enabled, this handles the selection).

I've updated your code below with these changes.

var checkList = new ej.dropdowns.DropDownTree({

...

});

checkList.appendTo('#ddtree');

checkList.treeObj.nodeSelected = function (args) {

 ...

};

//Define nodeChecked function

checkList.treeObj.nodeClicked = function (args) {

  console.log(args);

  var nodeData = checkList.treeObj.getTreeData(

    args.node.getAttribute('data-uid')

  );

  if (nodeData[0].hasChild) {

    if (

      checkList.treeObj.expandedNodes.indexOf(nodeData[0].id.toString()) != -1

    ) {

      checkList.treeObj.collapseAll(nodeData[0].id.toString());

    } else {

      checkList.treeObj.expandAll(nodeData[0].id.toString());

    }

  } else {

    checkList.value = [nodeData[0].id.toString()];

  }

};

Sample: https://stackblitz.com/edit/vgf5xg-ymunsazk?file=index.js

Please check the shared details and get back to us if you need any further assistance.

Regards,

Sivakumar S

[Frederik Gysel]

Thanks a lot for your help!

Regards

Frederik

[Frederik Gysel]

Maybe 1 addition: 

After setting the value of the treeview you can hide popup with: 

 checkList.value = [nodeData[0].id.toString()];

checkList.hidePopup();

[LeoLavanya Dhanaraj]

Frederik, thank you for your suggestion and for providing details on hiding the popup of Dropdown Tree component. This will certainly help other users to customize the component.