-
Notifications
You must be signed in to change notification settings - Fork 160
Column Moving
| Version | User | Date | Notes |
|---|---|---|---|
| 0.9 | Stefana Andreeva | 25.06.2018 | Column Moving Specification |
| 1.0 | Hristo Anastasov | 25.08.2020 | Add API method to move column |
Column moving provides means for reordering columns interactively via a standard drag/drop mouse gestures or to move column to a specified index in the collection.
-
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.
-
As an end user, I want to be able to move columns interactively on a touch device.
-
As an end user, I want to be able to move/set the visible index of a column.
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. The dragged header copy (ghost image) contains additional indication of what action can be performed - reordering, pinning, scrolling, block.
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.
End users should be able to move/set the visible index of a column. The 'move' method is exposed by the IgxColumnComponent and moveColumn is exposed by the IgxGridBaseDirective.
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.
Hidden columns – hidden columns can be moved only programmatically. Hidden columns preserve their place when reordering the visible columns.
Cell selection - cell selection is preserved when reordering columns.
Cell editing - edit mode should be exited when column moving starts, the value being entered is ignored.
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 onColumnMovingStart and onColumnMovingEnd events of the igx-grid:
<igx-grid (onColumnMovingStart)="moveStart($event)" (onColumnMovingEnd)="moveEnd($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 |
|---|---|---|---|
| moveColumn | Moves a column next to the specified target column. Third parameter defines whether the column moved should be moved after or before the target column. | void | column: IgxColumnComponent, dropTarget: IgxColumnComponent, pos: DropPosition enum |
| move | Sets the visible index of the column. | void | index: number |
Examples:
const grid = this.grid1;
const idColumn = grid.getColumnByName('ID');
const nameColumn = grid.getColumnByName('ID');
idColumn.move(2);
grid.moveColumn(idColumn, nameColumn, DropPosition.AfterDropTarget);IgxGridComponent
| Name | Description | Cancelable | Arguments |
|---|---|---|---|
| onColumnMovingStart | Emitted when column moving starts. | false | IColumnMovingStartEventArgs |
| onColumnMoving | Emitted during the column moving operation. | true | IColumnMovingEventArgs |
| onColumnMovingEnd | Emitted after column moving ended. | false | IColumnMovingEndEventArgs |
- Columns can be reordered programmatically. All column collections (pinnedColumn, unpinnedColumn, columnList) are reset accordingly.
- If there are 3 pinned columns and an unpinned column is moved programatically to index 2, column will be moved and will not be pinned.
- 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 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. Horizontal and vertical scrolling, if present, are not broken.
- Header templates - drop indicators show/hide correctly if headers use custom templates; header actions (sorting. filtering. resizing, etc.) are not broken after drag/drop.
- Filtering dialog is closed, if opened, when column moving starts.
- 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;
- pinned columns: automatic scroll to the left is performed when holding the dragged header in front of the pinned columns area;
- 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;
- 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 - if the column to be moved contains a cell, that is currently being edited, then edit mode is exited and the value being entered is dismissed; 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 (hidden columns widths are included);
- pinning both, programmatically 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 - hidden columns preserve their places when reordering column.
- Column moving and group-by - column moving is still possible after grouping a column. group-by + column moving + selection;
- 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;