Drag & Drop Between Wrapped Grid Components

Updated on Jan 20, 2026

Environment

Product

Progress® Kendo UI for Angular Grid

Description

I am using a custom component to wrap the Kendo UI for Angular Grid and reuse it in the same configuration on multiple instances across my Angular application. How can I implement a drag-and-drop feature between two Grids which are encapsulated in my custom wrapper component?

Solution

To implement a drag-and-drop functionality between two wrapped Grid components:

1. Expose a designated property for the wrapper component that allows differentiating the Grids.

   html

   <kendo-grid [data]="data" [attr.data-kendo-grid-index]="index">
       ...
   </kendo-grid>

2. Wrap the two instances of the component that encapsulates the Grid in a custom container and apply the DragTargetContainerDirective and DropTargetContainerDirective directives.

   html

   <div
       #wrapper
       kendoDragTargetContainer
       kendoDropTargetContainer
   >
       <app-wrapper #first [data]="inStockData"></app-wrapper>
       <app-wrapper #second [data]="discontinuedData"></app-wrapper>
   </div>

3. Handle the Kendo UI for Angular Drag and Drop events that the two directives expose and modify the Grid collections in the event handlers as necessary.

   html

   <div ...
       (onDrop)="onDrop($event)"
   >
       <app-wrapper #first [data]="inStockData"></app-wrapper>
       <app-wrapper #second [data]="discontinuedData"></app-wrapper>
   </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();
   }

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...

See Also

• Grid Overview
• Drag and Drop Overview
• API Reference of the Grid Component
• API Reference of the Drag and Drop utility