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
}
0

There are 0 best solutions below