-
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 move 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 and 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 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 the 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 columns 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).
- Drop indicators 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 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 performed on a header level are not broken after dragging/dropping a header: performing sorting, filtering, resizing is still possible after moving a column.
- Column moving and keyboard navigation - reordering columns does not break keyboard navigation.
- Column moving and selection - row/cells selection is preserved after reordering columns; selection still works properly after reordering columns;
- Column moving and paging - column moving affects all pages; reorder columns on different pages;
- Column moving and sorting - sorting is preserved after reordering columns; sorting still works properly after reordering columns;
- Column moving and filtering - filtering is preserved after reordering columns; filtering still works properly after reordering columns;
- Column moving and summaries footer - summaries (the footer cell) are affected when reordering columns. Enabling/disabling summaries works fine after reordering columns;
- Column moving and resizing - column width is preserved after reordering columns. The size of the column can be changed 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 still works properly after reordering columns;
- Column moving and pinning:
- reorder pinned columns;
- reorder unpinned columns;
- pin a column via drag/drop inside pinned columns area;
- unpin a column via drag/drop outside pinned column area;
- pinning via drag/drop is forbidden if pinned area will exceed the max allowed width;
- pinning programatically and interactively via drag/drop work fine together;
- 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; edge;
- virtualization behaves correctly after dropping the column: column widths are preserved; thumb position and size is recalculated appropriately; data, header and footer cells do not get misaligned; horizontal scrolling works accordingly; keyboard navigation;
- Column moving and multi column headers - reordering only columns on the same level.
- Column moving and 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 events fire correctly with correct values of the event arguments. Cancelable events can be canceled.
- Column moving and remote virtualization.
- Column moving and CRUD operations.
- Column moving and auto generated columns.
- Column moving and setting gird widths - reorder column and verify correct state when:
- column widths are not defined;
- mixed column widths - only some column widths are specified;
- grid width is not specified;