Angular Data Grid Drag & Drop Between Grids

The Kendo UI for Angular 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 and its built-in DragTargetContainerDirective and DropTargetContainerDirective 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.

Change Theme

Theme

Loading ...

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. 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>

3. 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
• Kendo UI for Angular Drag and Drop Overview