Drag & Drop between the Angular Grid and ListView

The Kendo UI for Angular Grid enables you to drag and drop rows from a Grid to a ListView and vice versa. This allows you to easily maintain the records in each component and organize them in the desired way.

To configure the dragging and dropping of rows between a Grid and a ListView functionality, use the Kendo UI for Angular Drag and Drop utility and its built-in DragTargetContainerDirective and DropTargetContainerDirective directives.

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

Change Theme

Theme

Loading ...

Configuring the Drag and Drop

To drag and drop records between the Grid and ListView components:

1. Wrap both components inside a custom container and apply the kendoDragTargetContainer and kendoDropTargetContainer directives to it.

   html

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

2. Handle the Kendo UI for Angular Drag and Drop events and modify the data collections of the two components in the event handlers as necessary.

   html

   <div ...
       (onDrop)="onDrop()">
       <kendo-grid [data]="inStockData" ... >
           ...
       </kendo-grid>
   
       <kendo-listview [data]="discontinuedData" ...>
           ...
       </kendo-listview>
   </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
• API Index of the Kendo UI for Angular ListView
• Kendo UI for Angular Drag and Drop Overview