This sample demonstrates the Grid component with the row drag and drop feature. Drag and drop rows between Grids to move rows.
Order ID | Customer Name | Freight |
|---|---|---|
| 10248 | Maria | $32.38 |
| 10249 | Ana Trujillo | $11.61 |
| 10250 | Antonio Moreno | $65.83 |
| 10251 | Thomas Hardy | $41.34 |
| 10252 | Christina Berglund | $51.30 |
| 10253 | Hanna Moos | $58.17 |
| 10254 | Frédérique Citeaux | $22.98 |
| 10255 | Martín Sommer | $148.33 |
| 10256 | Laurence Lebihan | $13.97 |
| 10257 | Elizabeth Lincoln | $81.91 |
| 10258 | Victoria Ashworth | $140.51 |
| 10259 | Patricio Simpson | $3.25 |
Order ID | Customer Name | Freight |
|---|---|---|
| No records to display |
Grid rows can be dragged and dropped to another Grid or custom controlled by enabling allowRowDragAndDrop property. The target control on which the Grid rows has to be dropped can be set by using rowDropSettings->targetID property.
The Selection feature should be enabled to select the rows. Multiple rows can be selected by simply clicking and dragging inside the Grid.
In this demo, we have demonstrated how to drag and drop the rows between Grids. Row drag and drop feature is enabled in both the Grids. To drag and drop rows between Grids select rows, drag and drop them in the adjacent Grid.
Injecting Module:
Grid component features are segregated into individual feature-wise modules. To use row, drag and drop feature we need to inject RowDDService into the @NgModule.providers section. Since the selection feature is required to select rows, we also need to inject the SelectionService.
More information on the row drag and drop can be found in this documentation section.