igxGrid Collapsible Column Groups

TOC

• Revision history
• Overview
  • Objectives
• User Stories
  • Developer
• API
• ARIA Support
• Assumptions and Limitations
• Test Scenarios
  • Automation
  • Manual

Revision history

Version	User	Date	Notes
0.1	Stefan Ivanov	Feb 21, 2019	Spec and design initial creation
1.0	Zdravko Kolev	Nov 04, 2019	Overview and API update, Stories and ARIA
1.1	Zdravko Kolev	Nov 06, 2019	Final changes to ARIA and API
1.2	Nadia Robakova	Nov 11, 2019	Add automation test plan

Overview

Collapsible multi-column headers make it possible to collapse all nested headers under the current one and layout the body cells of the underlying columns according to a template provided by the developer. A column group usually consists of two or more columns. When a column group is collapsed, a subset of the columns will be shown to the end-user. This subset can be one or more of the previously shown columns or an entirely new set of columns. Each collapsed/expanded column can be bound to the data source of the grid, or it may be unbound, thus calculated.

Objectives

User Stories

There are several use cases in which a user will need collapsible column groups.

As an end user, I want to

• be able to expand and collapse grouped columns through their multicolumn headers to show more relevant or hide less critical information in the grid

• be able to mark one or more columns per group as visible on collapse action, having the overall column count greatly reduced.

• be able to define a header template when a group column is collapsed as a summary of the combined headers.

• be able to define a cell template when a group column is collapsed as a summary of the combined cells.

• be able to change the expand/collapse indicator

User Interface

Expanded State

Collapsing Address multi-column header

Developer Stories

As a developer, I want to

• Be able to set a group column as collapsible
• Be able to set the initial state of a group column to expanded or not.
• Have collapsible capabilities only if there is one child column with visibleWhenCollapse set to true. Note: if all child columns are set to visibleWhenCollapse false, the collapsible indicator won't be shown.
• Be able to define a template for the layout that is used when a multi-column header is collapsed
  • This template should make it possible to combine different types of data
  • This template may additionally modify the data e.g. 12 Jan 2019 -> 1/12/19
  • This template may create a template for a single cell or define a layout of cells
• Have the grid header reduce its height automatically as headers are collapsed when the necessary height to render the headers decreases.

API

Inputs

Name	Description	Type	Default value
collapsible	Used to identify that certain Grouped column is collapsible	boolean	false
expanded	Used to set whether the group is expanded or collapsed initially. Applied only if the collapsible property is set to true	boolean	true
visibleWhenCollapse	used to identify whether the column would be visible on collapsed state of the grouped column	boolean	undefined/true/false

Events

Name	Description	Cancelable	Event arguments
collapsibleChange	This event is fired when collapsible state for a column group is changed	No	Boolean
expandedChange	This event is fired when a group is expanded/collapsed	No	Boolean
visibleWhenCollapseChange	This event is fired when visibleWhenCollapse state for the column is changed	No	Boolean

ARIA support

WAI-ARIA Support In 2014 the W3C finalized their WAI-ARIA specification which defined how to design Web content and Web applications to be more accessible to users with disabilities. The Grid has been designed so that it follows these guidelines.

The list below provides details about what changes have been made to the Grid Columns to support WAI-ARIA. Please note that no special settings are needed to leverage these changes, as they are all enabled by default.

• tabindex attribute allows access to the elements through the use of TAB and SHIFT + TAB keys. Note: The tabindex attribute should be rendered on every additional navigational element in the header elements.
• aria-label thee igxGrid header elements should carry aria-label attributes with the column header text, in order for the header text to be read instead of the title attribute value when a title attribute is present
• columnheader each igxGrid header element should be decorated with columnheader role.

Assumptions and Limitations

• At least one column should be shown when you expand/collapse a group - When you define group rules, a check is made whether you would have at least one column shown when the group is expanded or collapsed

• Group options’ hidden takes precedence over column hidden - If you declared your column to be hidden using the property hidden and you have a group defined where the same column should be shown, the column will be shown.

Automation

Base tests:

1. Verify that collapsible input can be set to a column group. Verify event collapsibleChange is fired.
2. Verify that when collapsible is true, but all the column are has same visibleWhenCollapseChange set to true the group is not collapsible. Test setting one of them to false.
3. Verify that when collapsible is true, but all the column are has same visibleWhenCollapseChange set to false the group is not collapsible. Test setting one of them to true.
4. Verify that expanded state can be set to a column group. Verify event expandedChange is fired and bound value is changed.
5. Verify changing visibleWhenCollapseChange input when column is expanded or collapsed.
6. Verify that when column group does not have children and set expand or collapsable, it is not previewed.
7. Test setting visibleWhenCollapse to a column. Test event visibleWhenCollapseChange is fired.
8. Test setting visibleWhenCollapse to a column group, inside other group. Test event visibleWhenCollapseChange is fired.
9. Test setting visibleWhenCollapse to a root column group.
10. Test setting of collapseIndicatorTemplate.set by directive
11. Test setting of collapseIndicatorTemplate.set by property
12. Test that group expand and collapse is correct when dynamically add/remove its groups/columns.
13. Verify Arai Support

Integrations:

1. Hiding: Verify that expanded state is preserved when hide column group.
2. Hiding: Verify that column can be hidden when the group is expanded
3. Hiding: Verify that column can be shown in collapsed group
4. Hiding: Verify collapse a group when for a column disableHiding is set.
5. Hiding: Verify that when a column has set to hidden to true and visibleWhenCollapseChange to false, it is previewed in expanded group.
6. Pinning: Verify that expanded state is preserved when pin column group.
7. Editing: Verify edit mode is closed when expand/collapse a group.
8. Row Editing: Verify edit mode is closed when expand/collapse a group.
9. Moving: Verify that expanded state is preserved when move column group.
10. Moving: Verify moving column inside the group.
11. Search: search when a group is collapsed.
12. Group By: test when group by a column.

Manual