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

This knowledge base explains how to drag and drop the values from the tree view node to 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
     );
   }
 }
}

Sample Link: https://stackblitz.com/edit/angular-ybyd13-4mdzvt?file=src%2Fapp.component.html

Output:

API Links:

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