Kendo tree view drag and drop using same tree componant

Question

I am using Kendo UI for Angular which has tree view drag drop feature. This requires two tree view to be initialized and the instance of the other to be included in dropZoneTreeViews of the first tree.

This works perfectly when I use two tree views in my HTML page and give them each different id to be used.

<div>
<kendo-treeview #listA 
    [dropZoneTreeViews]="[listB]" 
    kendoTreeViewDragAndDrop
    kendoTreeViewFlatDataBinding 
                            .
                            .
                            .>
</kendo-treeview>

<kendo-treeview #listB 
    [dropZoneTreeViews]="[listA]" 
    kendoTreeViewDragAndDrop
    kendoTreeViewFlatDataBinding 
                            .
                            .
                            .>
</kendo-treeview>
</div>

Now what I need to achieve is to create a separate component for tree view and use it for both the tree views like this

<app-tree-view #listA [dropZoneTreeViews]="[listB]"
.
.></app-tree-view> 

<app-tree-view #listB [dropZoneTreeViews]="[listA]
.
."></app-tree-view> 

I pass the data using @Input dropZoneTreeViews for drop zone as well as other data, but am not able to link the two tree views using dropZoneTreeViews as it no longer recognizes the instance of the other tree.

How should I proceed with this?

Answer 1

What you can do is the following.

In your CustomTreeviewComponent add the following ViewChild's:

@ViewChild(DragAndDropDirective) dragDrop: DragAndDropDirective;
@ViewChild(TreeViewComponent) treeview: TreeViewComponent;

And then in the parent component:

@ViewChild('listA') listA: CustomTreeviewComponent;
@ViewChild('listB') listB: CustomTreeviewComponent;
    
ngAfterViewInit(): void {
  this.listA.dragDrop.dropZoneTreeViews.push(this.listB.treeview);
  this.listB.dragDrop.dropZoneTreeViews.push(this.listA.treeview);
}