-
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.
- 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.
- 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 selection - row/cells selection is preserved after reordering columns.
- Column moving and paging - column moving affects all pages.
- Column moving and sorting - sorting is preserved after reordering columns.
- Column moving and filtering - filtering is preserved after reordering columns.
- Column moving and summaries footer - summaries are also affected when 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.).