major
minor
major
minor
Tables support drag-and-drop of rows.
As described in Ticket #26620, dragging a selected row automatically drags the entire selection. On the client side, when handling the `dragstart ` event for the table control—in the case of dragging a selected row—the entire selection is calculated based on the control’s DOM node.
A row is selected if the corresponding DOM node is annotated with the class ` tblSelected `.
Tables are rendered using multiple HTML tables: one each for the header, the body (which displays all rows), and the footer. Frozen tables are a special case. They are divided into a fixed and a flexible section. There is one HTML table each (5 in total) for the fixed and flexible headers, the fixed and flexible bodies, and the footer.
If a search is performed starting from the control’s DOM node for nodes with the CSS class `tblSelected`, all selected rows in a frozen table (with fixed and flexible sections) are found twice, since they appear in both the fixed and flexible body sections.
As a result, all selected rows are included twice in the dragged set or in the preview of the drag-and-drop operation.
Implementation
The search for all selected rows in a table is limited to only the first "body" HTML table found.
Test
- Navigate to Technical Demo > Components > Tables and Trees > Grid.
- Configure a drag operation, for example, with `true`. Then any object can be dragged.
- Display a fixed and a flexible section in the table.
- Select a row.
- Drag the selected row. The preview image must not contain duplicate entries.