Grid multi column headers

Revision history

Version	User	Date	Notes
0.1	Zdravko Kolev	May 23, 2018	Initial implementation
0.2	Zdravko Kolev	May 29, 2018	Adding more integration scenarios and manual automation cases

Overview

Multi-column headers allow grouping columns by placing them under a common header. The groups can be grouped further under one common header, and so on. The feature must be tested with other features which affect the columns’ loading, size, position and visibility.

Objectives

User Stories

As an end user, I want to

have a clear visual indication about the created groups
be able to interact with groups the same way I am able to interact with columns
be able to create/destroy groups from existing columns which I find to be one conceptual entity
be able to create/destroy groups consisting from already existing groups and columns which I find to be one conceptual entity

User Interface

image::https://image.ibb.co/bF6Wdx/Multi_Column_Headers.png[design]

Developer Stories

As a developer, I want to

be able to put two or more columns in a group, which will result in rendering them next to one another with a common header above their individual ones
be able to nest groups into other groups as deep as I need to
have the grid respond appropriately when a group is created by adjusting the height of the header of ordinary columns and less-nested groups
include the creation and destruction of multicolumn headers a non-data operation in the operations UI
provide contextual operations UI for the group as a whole, as well as for each individual column or group under it

Integration scenarios

Showing and hiding of a group all at once should be possible through the operations UI
Movement and pinning(freezing) of a group altogether should be possible through the operations UI
The above scenarios should also be possible for the groups within other group in scenarios with deeper nesting
Column virtualization should treat a group under a multicolumn header as a standard column

API

ARIA support

Scenarios not covered

Test Scenarios

Automation

Verify a single multi-column header is rendered properly when grid's width is:
- defined in pixels;
- defined in percentages;
- not defined;
Verify multi-column headers are rendered properly when:
- Grid width is defined in pixels;
- Grid width is defined in percentages;
- Grid width is not defined;
- columnWidth option is defined;
- Header template height is set.
Verify correct rendering when columns are defined in the component template.
Verify correct rendering when columns features are set on initColumns event, consider using of autoGenerate as well:

   public initColumns(event: IgxColumnComponent) {
        const column: IgxColumnComponent = event;
        if (column.field === "Name") {
            column.filterable = true;
            column.sortable = true;
        ...

Verify Grid's multi-column events are fired correctly (if collapsible column groups features is present).
- groupCollapsed.
- groupExpanded.
- collectionUpdate - Add/Remove item
Verify columnInit event is fired on new column adding.
Verify correct rendering of header elements on horizontal scrolling.
Verify correct rendering of header elements on keyboard navigation (left arrow press in order to scroll the grid).
Verify correct Grid headers rendering with the following configuration:
- One Grouped column without child headers. Result should be: empty header and column, show nothing.
- One Grouped column without child headers, and add/remove one child. Result should be: showing/hiding of the Grouped header, and child header.(Show on add, hide on remove).
- Each Grouped column to have one child (On initialization).
- One parent with Four childs.
- One parent header with Two child headers and two grandchilds for each child.
Headers' caption text should be properly displayed:
- On initialization.
- Correctly aligned (centered) with well distinguished header and cell borders.
- On horizontal scrolling. Headers cells shouldnt overlap each other or replate the header cell text.
- Long header text is truncated.
Аutomation scenarios for combinations with Multi-column headers and the following features:
- Column Virtualization:
  - Verify correct rendering of header elements on horizontal scrolling.
  - Verify correct rendering of header elements on keyboard navigation (left arrow press in order to scroll the grid).
- Column Pinning:
  - Only column groups can be pinned
  - Verify correct pinning of first and second Grouped columns.
  - Verify horizontal scrollbar is working correctly on pin/unpinned columns. Check header alignment and content.
  - Enable/Disable pinning is properly reflected.
- Column Moving (Column groups and individual columns can be moved, but the moving is only within the same level (Group)):
  - Verify correct rendering of headers on moving of the third Grouped column before the first one. Visible index is properly updated to 0.
  - Verify correct rendering of headers on moving of the first individual column after the last column (which is Grouped column). Visible index is updated to collection.length - 1.
  - Verify correct rendering of headers on moving of the first child column (within Grouped column) to be after the second child column (wich is within the same Grouped column; Same level).
  - If only one child is present, cannot be moved.
- Column Hiding:
  - Verify column hiding of Individual column, Grouped column and Child column.
  - Verify when 2 of 2 child columns are hidden, the Grouped column would be hidden as well.
  - Verify when 1 of 2 child columns are hidden, the Grouped column would be visible and displayed correctly.
  - Verify when Grouped column is hidden, all childs would be hidden as well.
  - Enable/disable hiding is reflected.
- Sorting:
  - Verify sorting of Child columns. Data should be changed accordingly.
- Filtering:
  - Verify filtering of Child column. Data should be changed accordingly based on the filtering condition.
- Summaries:
  - Summaries should be rendered for each child column.
- Group by:
  - Grouping by child columns only. Example: https://jsfiddle.net/010unhx3/
- Grid exporting:
  - Grid is exporting only child and individual columns, without the header grouping.

Manual

Grid loads in a timely manner with a big number of multi column headers/nested columns.
Scrolling of the grid is working flawless in a timely manner with big number of multi-column headers.
Add manual scenarios for combinations with Multi-column headers and the following cases -
- with more than 200 Grouped columns.
- with different browsers (IE 11, Firefox, Edge, Safari).
  - Rendering of the Grouped columns should be properly reflected
  - Move a Grouped/child column, filter, sort, hide and pin as well.
  - Exporting of grid with MCH should be properly executed.
  - Scrolling horizontally of Grouped columns should be properly executed.