Drag Grid Rows Into Custom Container

Environment

Description

How can I drag rows from the Kendo UI for Angular Grid and drop them into a custom container?

Solution

To drag Grid rows and drop them into a custom container:

1. Create a wrapper container of the Grid and the custom container and apply the built-in DragTargetContainer and DropTargetContainer directives.

   Copy Code<div #wrapper
       kendoDragTargetContainer
       kendoDropTargetContainer
       ... >
       <kendo-grid [data]="inStockData">   </kendo-grid>
       <div class="custom-container"></div>
   </div>

2. To define the drag and drop targets, configure the directives' properties.

   Copy Code<div ...
       dragTargetFilter=".k-master-row"
       dropTargetFilter=".custom-container"
       [dragData]="dragData"
       [hint]="{ hintClass: 'rowHint' }"
       (onDrop)="onDrop($event)"
       dragHandle=".reorder-icon">
   </div>

3. Use the dragData callback to fetch the row index.

   Copy Codepublic dragData = ({ dragTarget }) => {
       return Number(dragTarget.getAttribute('data-kendo-grid-item-index'));
   };

4. Use the fetched index to reorder the rows and invoke the notify() method of the directives to reflect the changes.

   Copy Codepublic onDrop(e: DropTargetEvent): void {
       const fromIndex = e.dragData;
       // update data
       this.dragTargetContainer.notify();
       this.dropTargetContainer.notify();
   }

The following example demonstrates how to reorder rows from Grid to a custom container.

Suggested Links

• Row Reordering
• Drag and Drop Rows Between Grids