New to Kendo UI for Angular? Start a free 30-day trial
Drag Grid Rows Into Custom Container
Environment
Product | Progress® Kendo UI Grid |
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:
-
Create a wrapper container of the Grid and the custom container and apply the built-in
DragTargetContainer
andDropTargetContainer
directives.html<div #wrapper kendoDragTargetContainer kendoDropTargetContainer ... > <kendo-grid [data]="inStockData"> </kendo-grid> <div class="custom-container"></div> </div>
-
To define the drag and drop targets, configure the directives' properties.
html<div ... dragTargetFilter=".k-master-row" dropTargetFilter=".custom-container" [dragData]="dragData" [hint]="{ hintClass: 'rowHint' }" (onDrop)="onDrop($event)" dragHandle=".reorder-icon"> </div>
-
Use the
dragData
callback to fetch the row index.tspublic dragData = ({ dragTarget }) => { return Number(dragTarget.getAttribute('data-kendo-grid-item-index')); };
-
Use the fetched index to reorder the rows and invoke the
notify()
method of the directives to reflect the changes.tspublic 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.
Change Theme
Theme
Loading ...