# Angular Data Grid Drag & Drop Between Grids

The [Kendo UI for Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid) enables you to drag and drop rows from one Grid to another Grid. This allows you to easily maintain the records in each table and organize them in the desired way.

To configure the drag and drop rows between Grids functionality, use the [Kendo UI for Angular Drag and Drop](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop) and its built-in [`DragTargetContainerDirective`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/drag-container) and [`DropTargetContainerDirective`](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop/drop-container) directives.

The following example demonstrates in detail how to perform drag-and-drop between two separate Grid components by utilizing the Kendo UI for Angular Drag and Drop utility.

[Demo Source](https://demos.telerik.com/kendo-angular-ui/demos/grid/drag-and-drop/source.txt)

## Setup

To drag a record from one Grid and drop it at a specific index on another Grid:

1. Wrap both Grids inside a custom container and apply the `kendoDragTargetContainer` and `kendoDropTargetContainer` to it.

   ```html
   <div
       #wrapper
       kendoDragTargetContainer
       kendoDropTargetContainer >
       <kendo-grid [data]="inStockData" ... >
           ...
       </kendo-grid>

       <kendo-grid [data]="discontinuedData" ... >
           ...
       </kendo-grid>
   </div>
   ```

2. Add filters to define valid drag sources and drop targets. Include `.k-grid-content` in the `dropTargetFilter` so you can drop into an empty Grid.

   ```html
   <div
       #wrapper
       kendoDragTargetContainer
       kendoDropTargetContainer
       dragTargetFilter=".k-master-row"
       dropTargetFilter=".k-grid-content, .k-master-row">
       <kendo-grid [data]="inStockData" ... >
           ...
       </kendo-grid>

       <kendo-grid [data]="discontinuedData" ... >
           ...
       </kendo-grid>
   </div>
   ```

3. Applying the directives from the first steps, allows you to handle the Kendo UI for Angular Drag and Drop events and modify the Grid collections in the event handlers as necessary.

   ```html
   <div ...
       (onDrop)="onDrop()">
       <kendo-grid [data]="inStockData" ... >
           ...
       </kendo-grid>

       <kendo-grid [data]="discontinuedData" ... >
           ...
       </kendo-grid>
   </div>
   ```

4. To notify the drag and drop container that its content has changed, get the reference of the wrapper container and read it as `DragTargetContainerDirective` and `DropTargetContainerDirective`. Then use the `notify` method of the directives, to update the view.

   ```ts
   @ViewChild('wrapper', { read: DragTargetContainerDirective }) dragTargetContainer;
   @ViewChild('wrapper', { read: DropTargetContainerDirective }) dropTargetContainer;

   private notifyContainers(): void {
       this.dragTargetContainer.notify();
       this.dropTargetContainer.notify();
   }
   ```

## Suggested Links

* [API Index of the Kendo UI for Angular Grid](https://www.telerik.com/kendo-angular-ui/components/grid/api)
* [Kendo UI for Angular Drag and Drop Overview](https://www.telerik.com/kendo-angular-ui/components/utils/draganddrop)