Column Selection

Column Selection Specification

Revision History

Version	User	Date	Notes
0.1	Stefan Ivanov	February 11, 2020	Initial Draft
0.2	Stefan Ivanov	February 18, 2020	Adding samples and finalizing behavior
0.3	Nadia Robakova	March 06, 2020	Adding test plan
0.4	Nadia Robakova	March 16, 2020	Update API

1. Overview

Objectives

The igx-grid should support the selection of one or more columns.

The igx-grid should support the selection of one or more columns, through an API that would provide a way for developers to determine how to allow column selection to be performed. It will also be included in the Excel Style Filtering dialog within the context of other column-related operations.

2. User Stories

As an end-user, I want to

to select/deselect grid columns
to have a clear visual indication of the selected columns
my selection to be preserved, even the selected rows are scrolled out of sight
be able to select a range of columns by clicking on one end of the range and then SHIFT-clicking to specify the other end of the range
to select/deselect a particular column via its Excel Style Filter dialog

Developer Stories

As a developer, I want to

get/set selected columns using their identifiers
select/deselect single column via the API
select/deselect all columns via the API
be notified, when the selection has changed
determine which columns can be selected e.g. I may only let users select visible columns
persist which columns are selected and save/load the column selection state

3. Functionality

3.1. End-User Experience

Initially, users see an ordinary grid in the normal state even though some columns are selectable. Initial state

Upon hovering on a selectable column, its background is changed to reflect that it is possible to interact with the header to select the column, similar to MS Excel. This cannot be experienced on touch devices. Hover on a selectable header

Upon clicking on the header the column gets selected and both header and column cell backgrounds get updated accordingly. Select a column

If the user was to hover on a header for a column that is not defined as selectable, its background would not change. Hover on a not-selectable header

Below are two more states reflecting hovering and selecting a second column in a similar fashion as above. Hover on another selectable header Select a second column

3.2. Integration with other features

If the row filter is enabled and the user has activated its UI to filter the records of a given column, then column selection should be blocked until the user exits row filter mode. States of the column selection when the row filter UI is activated

Here is how selecting a set of columns arranged in a multi-column header organization would look like: Column selection and multi-column headers

Here is how selecting a column that is part of a multi-row layout would look like: Column selection and multi-row layouts

Column resizing and moving are not affected by whether a column is selected or not. Column moving of a selected column

3.3. Developer Experience

Enabling the column selection behavior in the grid is as easy as:

3.4. Other igxGrid features integration

Filtering
Hiding
Pinning

Column selection should preserve selection, during data operations, like the ones above. If a selected column is hidden or pinned this should not affect its selected state. Also, column selection should be integrated with the Excel Style Filtering within the template for column operations.

3.5. Keyboard Interaction

3.6 API

Properties

IgxColumnComponent

Name Description Type Default value

selectable Enables the selection of column boolean true

selected Selects a column if the column is selectable boolean false
IgxColumnGroupComponent

Name Description Type Default value

selectable True if any of its child columns is selectable boolean true

selected Selects a column group, if the group is selectable boolean false

Methods

IgxGridComponent

Name	Description	Return type	Parameters
selectedColumns	Get current selected columns	`Array<IgxColumnComponent>`- array with selected columns
selectColumns	Select specified columns		`Array<IgxColumnComponent>` - array of columns to select or Array- Array of column fields to select, clearCurrentSelection: `boolean`
deselectColumns	Deselect specified columns		`Array<IgxColumnComponent>` - array of columns to deselect or Array- Array of column fields to deselect
selectAllColumns	Select all columns
deselectAllColumns	Deselect all columns

Events

Name	Description	Cancelable	Parameters
onColumnsSelectionChange	Emitted when selection is changing, before the selection completes.	true	{ oldSelection: `Array<string>`, newSelection: `Array<scring>`, added: `Array<scring>`, removed: `Array<scring>`, cancel: boolean, event: Event }

3.6 Samples

Create a sample with a header template with a check icon that upon clicking toggles the selection state of the column
Create a sample with a toolbar with dropdown for selected columns, similar to how hidden columns are displayed via a drop-down in the samples

4. ARIA Support

The following components gets the corresponding aria attributes

column header and column group header- aria-selected
cells with selected column - aria-selected

6. References

igxGrid Column Selection Issue

7. Test plan

Base tests:

Should be able to set column properties selected and selectable
Should be able to select a column with mouse click(verify event is fired)
Should not be able to select not selectable column with mouse click
Should be able to select multiple columns with Crtl + mouse click (verify event is fired)
Should be able to select multiple columns with Shift + mouse click (verify event is fired) (verify no errors are returned when there no previous selected columns)
When select a range of columns with Shift + mouse click not selectable columns should not be selected.
When there a selected columns and click on column, which is selected, only this column should stay selected
When there a selected columns and click on column holding Ctrl key, the column should be unselected and the other columns should stay selected
When a column is selected and there are no other selected columns, clicking on it should deselect the column
Verify that when hover selectable column hovered class is applied
Verify that when hover not selectable column hovered class is not applied
Verify that when column is selected, its header has aria-selected and all its cells has aria-selected.
Verify that event onColumnSelectionChange can be canceled when select/deselect a single column
Verify that event onColumnSelectionChange can be canceled when select/deselect columns range
Verify API method getSelectedColumns returns all selected columns
Verify API method selectColumns with array of fields and with array of columns. Verify event is not fired
Verify API method deselectColumns with array of fields and with array of columns. Verify event is not fired
Verify API method deselectAllColumns deselects all columns.
Verify getSelectedColumnsData returns correct data.

Column Selection in Excel Style Filter:

Verify that when a columns is selectable and open ESF, checkbox for selecting is previewed. (Verify with different densities )
Verify that when columns is not selectable checkbox for selection is not previewed
Verify that clicking the checkbox selects/deselects the column and fires event
Verify that columns selection can be template in ESF

Multi column headers:

Verify setting selected on columns group, all its children, which are selectable are selected/deselected
Verify that when all the group child has selectable false, the group is also selectable false.
Verify that when hover group all its children which are selectable are hovered
Verify that when click on column group all its visible and selectable children are selected/deselected
Verify multiple selection with Ctrl and mouse click on column groups
Verify multiple selection with Shift and mouse click on column groups
Verify selecting all visible children of a group selects the group
Verify and when a group is selected and deselects one of its children the group is deselected

Integration scenarios:

Filtering: verify that when a filter row is opened and hover a column its background is not changed and when click on a column it is not selected
Filtering: Verify the column cells stays selected when filter
Sorting: Verify that when click sort indicator of a column the columns is not selected
Pinning: Verify that when pin/unpin the column stays selected
Hiding: Verify that when hide/unhide a column the column stays selected
Moving: Verify that when move a column the drag indicator does not have selected style and the columns stays selected
Paging: Verify column stays selected when change page