How to drag and drop the values from the tree view node to Angular spreadsheet

This article explains how to drag and drop values from the tree view node to an Angular spreadsheet. Use
updateCell method to achieve this requirement. Using the tree view component’s nodeDragStop event, you can update the dragged node item text into the cell using the spreadsheet dragover and drop events.

[HTML]

<h2>Treeview</h2>
<div class="tree-list">
 <ejs-treeview
   id="tree"
   [fields]="field"
   [allowDragAndDrop]="allowDragAndDrop"
   (nodeDragStop)="onDragStop($event)"
 ></ejs-treeview>
</div>
<h2>Spreadsheet</h2>
<div class="control-section">
 <ejs-spreadsheet
   #default
   (dragover)="onDragOver($event)"
   (drop)="onDrop($event)"
 >
 </ejs-spreadsheet>
</div>

[TS]

export class AppComponent {
 constructor() {}
 @ViewChild('default')
 public spreadsheetObj: SpreadsheetComponent;

 // Hierarchical data source for TreeView component
 public productTeam: Object[] = [
   {
     id: 't1',
     name: 'ASP.NET MVC Team',
     expanded: true,
     child: [
       { id: 't2', pid: 't1', name: 'Smith' },
       { id: 't3', pid: 't1', name: 'Johnson' },
       { id: 't4', pid: 't1', name: 'Anderson' },
     ],
   },
   {
     id: 't5',
     name: 'Windows Team',
     expanded: true,
     child: [
       { id: 't6', pid: 't5', name: 'Clark' },
       { id: 't7', pid: 't5', name: 'Wright' },
       { id: 't8', pid: 't5', name: 'Lopez' },
     ],
   },
 ];
 public field: Object = {
   dataSource: this.productTeam,
   id: 'id',
   text: 'name',
   child: 'child',
 };

 // Set allowDragAndDrop property as true.
 public allowDragAndDrop: boolean = true;

 public onDragStop(args: DragAndDropEventArgs): void {
   let spreadsheetObj = this.spreadsheetObj;
   let rowIndex: number;
   let colIndex: number;
   let range: string;
   // Check whether the dropped target is spreadsheet cell.
   if (args.target.classList.contains('e-cell')) {
     event.preventDefault();
     // Get the colIndex.
     colIndex = parseInt(args.target.getAttribute('aria-colindex'));
     // Get the rowIndex.
     rowIndex = parseInt(
       args.target.parentElement.getAttribute('aria-rowIndex')
     );
     // Get the cell address
     range = getRangeAddress([
       rowIndex - 1,
       colIndex - 1,
       rowIndex - 1,
       colIndex - 1,
     ]);
     // Update the dropped node value to spreadsheet cell.
     spreadsheetObj.updateCell(
       { value: args.draggedNodeData.text as string },
       range
     );
   }
 }
}

Refer to the working sample for additional details and implementation:Sample

Output:

API Links:

https://ej2.syncfusion.com/angular/documentation/api/spreadsheet/#updatecell
https://ej2.syncfusion.com/angular/documentation/api/treeview#nodedragstop

Conclusion

We hope you enjoyed learning about how to drag and drop the values from the tree view node to Angular spreadsheet.

You can refer to our Angular Spreedsheet page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Angular Spreadsheet example to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!