Drag and drop from treeview to grid

[Luis]

Hello,

 

I'm my angular app I'm trying to achieve drag and drop from treeview to grid.

I have on the sidebar a list of items in a treeview and what to drag them to the grid. Even if this feature is not provided out-of-the-box, I could implement it if I had on the drop event, the id of the dragged item and the position where it is dropped.

 

Is this possible?

 

Thanks in advance

[Yanmario]

Hi Luis,

It seems that the same question is asked in private ticked id: 153958: https://www.telerik.com/account/support-tickets/view-ticket/1539585

For public knowledge, I will provide the answer from the private ticket here.

While testing the multiple drag and drop functionality while one TreeView component is in a Drawer component, it seems the reference is being lost and that will prevent dropping to that TreeView inside the Drawer. To avoid that, the reference should be retrieved by using Angular's ViewChild decorator as demonstrated in the following updated drag and drop between TreeView components demo:

https://stackblitz.com/edit/angular-uuhb4z?file=app%2Fapp.component.ts

The reference from the TreeView inside the Drawer is being set in the second TreeView within the expand event of the Drawer:

 HTML:
<kendo-drawer #drawer mode="push"(expand)="onExpand()" [(expanded)]="expanded">
      <ng-template kendoDrawerTemplate>
      <div>
      <kendo-treeview
      #listA
      [dropZoneTreeViews]="[listB]"
...

 <kendo-treeview
                    #listB
                    [dropZoneTreeViews]="listA"
...

TypeScript:
 @ViewChild('listA')
  public treeViewA: TreeViewComponent;
 
public listA;

 onExpand() {
    this.listA = [this.treeViewA];
  }
 

If any further questions come up related to this matter, they can be asked in the private ticket support. Thank you.

Regards,
Yanmario
Progress Telerik