-
Notifications
You must be signed in to change notification settings - Fork 160
Column Moving
Column moving provides means for reordering columns interactively via a standard drag/drop mouse gesture.
-
As a developer, I want to mark specific columns as movable, so that I can allow the end user to reorder columns interactively.
-
As a developer, I want to be able to reorder columns programatically.
-
As a developer, I want to be notified when column moving starts and ends, so that I can add custom logic.
-
As an end user, I want to be able to use a standard drag/drop gesture to change the order in which columns appear in the view.
-
As an end user, I want a visual clue that a column is being dragged in order to be moved to a new location.
-
As an end user, I want a visual clue when a column can be dropped to its new location.
End users should be able to move/reorder columns according to their needs. Moving a column is performed via dragging the header cell. Only deferred column moving is supported, there is no immediate preview of the potential column position while dragging it to the new location. A copy of the header appears under the mouse as soon as the end user starts dragging the header. A drop indicator appears between two columns to notify the end user that the column can be dropped and therefore moved to that new location.
Canceling the drag operation is performed by either hitting the ESCAPE key, or dropping the header on a non-interactive area, i.e. outside the grid header area.
End users should be able to move a column to a location that is outside the view port. Dragging and holding the header over the right or left edge of the view port, will cause the grid to automatically scroll the columns that are not currently in view.
Multi-column headers - only columns from the same level can be reordered.
Pinned columns – pinned as well as unpinned columns can be reordered among themselves. Dragging an unpinned column and dropping it inside the pinned area will make that column pinned and vice versa, dragging a pinned column and dropping it outside the pinned area will make that column unpinned. If pinning a column causes the pinned area to exceed its maximum allowed width (80% of the total grid width), a visual clue notifies the end user that the operation is forbidden and pinning is not possible.
Column moving is enabled via setting the movable input of the igx-column:
<igx-column [field]="'ID'" width="100px" [movable]="true"></igx-column>Developers can subscribe to onColumnMovingStarted and onColumnMovingEnded events of the igx-grid:
<igx-grid (onColumnMovingStarted)="moveStarted($event)" (onColumnMovingEnded)="moveEnded($event)">
<igx-column [field]="'ID'" [movable]="true"></igx-column>
<igx-column [field]="'Name'" [movable]="true"></igx-column>
</igx-grid>IgxGridColumnComponent
| Name | Description | Type |
|---|---|---|
| movable | Sets column to be movable | boolean |
IgxGridComponent
| Name | Description | Return type | Parameters |
|---|---|---|---|
IgxGridComponent
| Name | Description | Cancelable | Arguments |
|---|---|---|---|
- Columns can be reordered programmatically. All column collections (pinnedColumn, unpinnedColumn, columnList) are reset accordingly. Column index property - clarify?
- Only movable columns' headers are draggable. All other headers are valid drop targets. All other parts of the grid are not valid drop targets (including row selector header: it's neither draggable nor a valid drop target).
- Drop indicators (between headers) are shown/hidden correctly on drag enter and drag leave.
- Columns are reordered correctly after dragging/dropping the header on the desired position that is a valid drop target. All columns collections (pinnedColumn, unpinnedColumn, columnList) are reset accordingly. Column index property?
- Column moving operation is canceled if dropping a header on a non-interactive area, that is not a valid drop target.
- Hitting ESCAPE while dragging cancels the operation, columns are not reordered.
- Actions that can be performed on a header cell are not broken after dragging/dropping a header: sorting, filtering, resizing actions are still possible after moving a column.
- Drag/drop column outside the view port via holding the dragged header over the right or left edge of the grid:
- holding the dragged header over the right/left edge of the grid - automatic scroll is performed, column can be dropped among the new columns that were previously out view; automatic scrolling stops once the dragged header goes away from the right/left edge of the grid;
- virtualization behaves correctly after dropping the header: column widths are preserved; thumb position and size are recalculated appropriately; data, header and footer cells do not get misaligned; horizontal scrolling, keyboard navigation are not broken;
- All column moving events are fired correctly with correct values of the event arguments. Cancelable events can be canceled.
- Column moving and keyboard navigation - reordering columns does not break keyboard navigation.
- Column moving and selection - rows/cells selection is preserved after reordering columns; selection works after reordering columns;
- Column moving and paging - column moving affects all pages; reorder columns on different pages; paging + selection + column moving (bug when selecting a cell from the column that is being moved);
- Column moving and sorting - sorting is preserved after reordering columns; sorting works after reordering columns;
- Column moving and filtering - filtering is preserved after reordering columns; filtering works after reordering columns;
- Column moving and summaries - summaries (the footer cell) are affected when reordering columns. Enabling/disabling summaries works after reordering columns;
- Column moving and resizing - column widths are preserved after reordering columns. Columns can be resized after reordering which does not break the overall state of the grid (virtualization, cells alignment, etc.).
- Column moving and editing - clarify what should happen if dragging a column and a cell belonging to it is being edited; editing works after reordering columns;
-
Column moving and pinning:
- pinned columns can be reordered among themselves;
- unpinned columns can be reordered among themselves;
- unpinned column is pinned if dragging/dropping it inside pinned columns area;
- pinned column is unpinned if dragging/dropping it inside unpinned columns area;
- pinning via drag/drop is forbidden if pinned area will exceed the max allowed width;
- pinning both, programatically and interactively via drag/drop, work fine together;
- Column moving and multi column headers - reordering only columns on the same level.
- Column moving and column hiding - hiding/showing columns in run-time. Column moving when having initially hidden columns.
- Column moving and group-by - to be clarified upon feature completion.
- Column moving and CRUD operations - CRUD operations are performed correctly after reordering columns.
-
Column moving and setting gird widths - reorder columns and verify correct state when:
- column widths are not defined;
- having mixed column widths - only some column widths are specified;
- grid width is not specified;
- Column moving and auto generated columns - check the ability to make columns movable when they are not defined in the markup.