Angular ListBox Drag & Drop Between ListBoxes

The Kendo UI for Angular ListBox enables you to drag and drop rows from one ListBox to another ListBox. This allows you to easily maintain the items in each list and organize them in the desired way.

To configure the functionality for dragging and dropping rows between ListBoxes, 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 ListBox components by utilizing the Kendo UI for Angular Drag and Drop utility.

Change Theme

Theme

Loading ...

Setup

To drag an item from one ListBox and drop it at a specific index on another ListBox:

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

   html

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

2. Handle the Kendo UI for Angular Drag and Drop events provided by the two directives and modify the ListBox collections in the event handlers as necessary.

   html

   <div ...
       (onDrop)="onDrop()"
   >
      <kendo-listbox kendoListBoxDataBinding [data]="inStockData" ...>
       </kendo-listbox>
       <kendo-listbox kendoListBoxDataBinding [data]="discontinuedData" ...>
       </kendo-listbox>
   </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 ListBox
• Kendo UI for Angular Drag and Drop Overview