How to allow multiple selection and multiple drag and drop on angular tree?

Question

I am using angular-tree-component and I need to implement multiple selection with click+shift keys. Who can help, me please? This is what I have for now. monitoring.ts file:

import { ITreeOptions, TreeNode} from 'angular-tree-component';
  @ViewChild('tree') tree: any;
  treeOptions: ITreeOptions = {
    getChildren: this.getChildren.bind(this),
    useVirtualScroll: true,
    nodeHeight: 22
  };

monitoring.html file:

<tree-root #tree [nodes]="nodes" [focused]="true" [options]="treeOptions" (updateData)="treeUpdate()"  >
...
 </tree-root>

score 0 · Answer 1 · answered Aug 20 '21 at 14:10

I have implemented multi-select by using shift+click as below.

private lastSelected = [];

if ($event.shiftKey) {
            // Capturing last clicked node details
            if (this.lastSelected.length > 1) {
              this.lastSelected.pop();
            }
            const last = { id: node.data.id, level: node.level };
            this.lastSelected.push(last);

            this.getAllNodeIds(tree.nodes);
            // Getting the index of first and last clicked node
            const firstClicked = this.nodeIds.indexOf(this.lastSelected[0].id);
            const lastClicked = this.nodeIds.indexOf(this.lastSelected[1].id);

            this.nodeIds.map((val, index) => {
                if (firstClicked > lastClicked) {
                  if (index >= lastClicked && firstClicked > index) {
                    const currentNode = tree.getNodeById(val);
                    TREE_ACTIONS.TOGGLE_ACTIVE_MULTI(tree, currentNode, $event);
                  }
                } else {
                  if (index > firstClicked && lastClicked >= index) {
                    const currentNode = tree.getNodeById(val);
                    TREE_ACTIONS.TOGGLE_ACTIVE_MULTI(tree, currentNode, $event);
                  }
              }
            });
          } 

 public getAllNodeIds(tree): void {
    if (tree) {
      for (const val of tree) {
        this.nodeIds.push(val.id);
        const childrenCount = val.children ? val.children.length : 0;
        if (val.hasChildren || childrenCount > 0) {
          this.getAllNodeIds(val.children);
        }
      }
    }
    return;
  }

How to allow multiple selection and multiple drag and drop on angular tree?

1 Answers1