Scenario
Hi, I am using @circlon/angular-tree-component
in Angular (I tried both version 10 and version 11) and I load in an async way the children of each node by expanding it (basically I initially load all the routes, than if I expand, using the arrow, a node, it will load its children, and so on, until I reach a leaf that I cannot expand because it have the hasChildren
property set to false
).
Problem
The problem is that I use checkboxes, both on leaves and on parent nodes, so I have a checkbox for each node of the tree. When I check (so I click on the checkbox) of a node I expect to fire the (select)
event but this only works if the node does not have any child, so if it is a leaf.
In all the other cases, for example if I have a node that has hasChildren=true
but has not any child loaded, I can graphically see the checkbox checked but the select event is not fired, if I manually expand the nodes until I reach at least 1 child, I can select the parent node and all the subnodes will be selected until the leaf/leaves.
Expected behavior I expected the following behavior but I does not know if I can have it: basically I want to be able to check any node, firing the (select) event both if the node has or does not have any children, I just need to have the list of the selected IDs. Is it possible?
This is the HTML of my tree:
<tree-root #tree
[focused]="true"
[nodes]="this.alberatura.treeNodes"
[options]="this.alberatura.options"
[(ngModel)]="this.selectedNode"
(moveNode)="this.alberatura.nodeMoved($event)"
(focus)="this.alberatura.selectNode($event)"
(dblclick)="openModalEditTree(editElementoTree, this.alberatura.selectedNode)"
(select)="this.alberatura.onSelect($event)"
(deselect)="this.alberatura.onDeselect($event)"
(loadNodeChildren)="true",
ngDefaultControl>
<ng-template let-node let-index="index">
<div>
<span>{{index + 1}} - {{ node.data.name }}</span>
</div>
</ng-template>
<ng-template #loadingTemplate>Loading, please hold....</ng-template>
</tree-root>
And these are my options:
this.alberatura.options = {
allowDrag: true,
allowDrop: true,
useCheckbox: true,
actionMapping: this.actionMapping
}