Auto Expand on Drag Over in Angular TreeView

Created: 30 Oct 2017

Although you can drag drop items in the Angular TreeView, it is troublesome when you can drag over a target item that is collapsed and you can't expand it. As a solution, you need to make the auto expand option active, so that each target item is automatically expanded on drag over, after a small delay. This allows you to navigate through the whole tree hierarchy during drag drop, and drop the dragged item to desired position within the tree view.

In above demo, you can choose whether auto expand option is active or not. When active, as you can see when you drag an item over other collapsed item, the target item will expand after a delay of 500ms. The item will expand only if the mouse cursor is hold longer then this time frame, otherwise it will remain collapsed. Furthermore, if you drag an item over top or bottom border of the TreeView, the view will auto scroll.

How to Expand Items Automatically on Drag Over

By default, the auto expand option is disabled. To enabled it, you need to set the autoExpand property to true. This allows to automatically expand the target item on drag over. This can happen only if the item is collapsed and have children, otherwise nothing happens.

• Angular
• HTML5

public autoExpandValue: boolean = true;
                            

<iui-treeview [appRef]="applicationRef" [items]="data" [controlStyle]="treeStyle" [allowDrag]="true" [autoExpand]="autoExpandValue"  #treeview>
    <ng-template let-item>
        {{item.text}}
    </ng-template>
</iui-treeview>
<div>
    <label><input type="checkbox" [(ngModel)]="autoExpandValue" /> Auto Expand</label>
</div>

                            

Manually Expand Item on Drag Over

In some cases, you may need to disable auto expand and only allow expanding of specific items. For this purpose, you need to handle the dragOver event and set a condition that will determine whether the target item will expand or not.

For example, let's say that you want to expand the item with id value set to 1, on drag over. The event data carries the target item over which the dragged item is positioned. You can use this field to set the condition and expand the item if there is a match:

• Angular
• HTML5

private expandTimeout: any = null;
private prevTargetItem: any = null;

treeDragOver(e: any){
    let self = this;

    if (e.targetItem != self.prevTargetItem){
        if (self.expandTimeout)
            self.clearExpandTimeout();

        if (e.targetItem && e.targetItem.id == 1){
            this.expandTimeout = setTimeout(function(){
                if (self.expandTimeout)
                    self.treeview.expand(e.targetItem);

                self.clearExpandTimeout();
            }, 1000);
        }

        self.prevTargetItem = e.targetItem;
    }
}

clearExpandTimeout(){
    clearTimeout(this.expandTimeout);
    this.expandTimeout = null;
}
                            

<iui-treeview [appRef]="applicationRef" [items]="data" [controlStyle]="treeStyle" (dragOver)="treeDragOver($event)" [allowDrag]="true" [autoExpand]="autoExpandValue" #treeview>
    <ng-template let-item>
        {{item.text}}
    </ng-template>
</iui-treeview>
<div>
    <label><input type="checkbox" [(ngModel)]="autoExpandValue" /> Auto Expand</label>
</div>

                            

In this case, when item is dragged over target item with id 1, it will expand after time delay of 1 second, if the mouse cursor is still over the target item. All other items will remain collapsed.

Conclusion

Option to auto expand items on drag over in Angular TreeView is useful in many cases. It allows you to go through the tree hierarchy during drag drop, expand items automatically and locate the position at which you want to drop the dragged item.

In IntegralUI TreeView you can auto expand items on drag over either by setting this option active or manually from code by handling the dragOver event.

The TreeView component is part of IntegralUI Web.