Skip to content

Column Moving

Stefana Andreeva edited this page Jun 25, 2018 · 9 revisions

Column Moving Specification

Contents

  1. User Stories
  2. Functionality
  3. Test Scenarios

Objectives

Column moving provides means for reordering columns interactively via a standard drag/drop mouse gesture.

1. User Stories

Developer

  • 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.

End user

  • 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.

2. Functionality

2.1. End User Experience

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.

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.

2.2. Developer Experience

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>

2.3. User Interface

2.4. API

Inputs

IgxGridColumnComponent

Name Description Type
movable Sets column to be movable boolean

Methods

IgxGridComponent

Name Description Return type Parameters

Outputs

IgxGridComponent

Name Description Cancelable Arguments

3. Test Scenarios

Basic Feature Scenarios

  • Columns can be reordered programmatically. All column collections (pinnedColumn, unpinnedColumn, columnList) are reset accordingly.
  • 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.

Integration Scenarios

  • 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, 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 - 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;
Clone this wiki locally
You can’t perform that action at this time.