-
Notifications
You must be signed in to change notification settings - Fork 162
igxGrid Collapsible Column Groups
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 |
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.
There are several use cases in which a user will need collapsible column groups.
-
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 combinedheaders
. -
be able to define a
cell template
when a group column is collapsed as a summary of the combinedcells
. -
be able to change the expand/collapse indicator
Expanded State
Collapsing Address multi-column header
- 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 withvisibleWhenCollapse
set to true. Note: if all child columns are set tovisibleWhenCollapse
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.
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 |
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 |
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: Thetabindex
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.
-
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.
- Verify that collapsible input can be set to a column group. Verify event collapsibleChange is fired.
- 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.
- 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.
- Verify that expanded state can be set to a column group. Verify event expandedChange is fired and bound value is changed.
- Verify changing visibleWhenCollapseChange input when column is expanded or collapsed.
- Verify that when column group does not have children and set expand or collapsable, it is not previewed.
- Test setting visibleWhenCollapse to a column. Test event visibleWhenCollapseChange is fired.
- Test setting visibleWhenCollapse to a column group, inside other group. Test event visibleWhenCollapseChange is fired.
- Test setting visibleWhenCollapse to a root column group.
- Test setting of collapseIndicatorTemplate.set by directive
- Test setting of collapseIndicatorTemplate.set by property
- Test that group expand and collapse is correct when dynamically add/remove its groups/columns.
- Verify Arai Support
- Hiding: Verify that expanded state is preserved when hide column group.
- Hiding: Verify that column can be hidden when the group is expanded
- Hiding: Verify that column can be shown in collapsed group
- Hiding: Verify collapse a group when for a column disableHiding is set.
- Hiding: Verify that when a column has set to hidden to true and visibleWhenCollapseChange to false, it is previewed in expanded group.
- Pinning: Verify that expanded state is preserved when pin column group.
- Editing: Verify edit mode is closed when expand/collapse a group.
- Row Editing: Verify edit mode is closed when expand/collapse a group.
- Moving: Verify that expanded state is preserved when move column group.
- Moving: Verify moving column inside the group.
- Search: search when a group is collapsed.
- Group By: test when group by a column.