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	Zdravko Kolev	March 06, 2020	Adding test plan

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. Hover on another header 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

IgxGridComponent

Name Description Type

rowSelectable Enable row selection for the grid boolean

Methods

IgxGridComponent

Name	Description	Return type	Parameters
selectedRows	Get current selection state	`Array<any>`- array with selected rows' ID (primaryKey or rowData)
selectRows	Select specified rows by ID	`bool`- whether the select was successful or not	`Array<any>`, clearCurrentSelection: `boolean`
deselectRows	Deselect specified rows	`bool`- whether the deselect is successful or not	`Array<any>`
selectAllRows	Select all rows	`bool`- whether the select is successful or not
deselectAllRows	Select all rows	`bool`- whether the deselect is successful or not

Events

Name	Description	Cancelable	Parameters
onRowSelectionChange	Emitted when selection is changing, before the selection completes.	true	{ oldSelection: `Array<any>`, newSelection: `Array<any>`, row?: IgxRowDirective, event: Event }

Note: igx-grid selection API methods will trigger this event

Note: cell selection will trigger onSelection and not onRowSelectionChange

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

row - aria-selected
header checkbox - aria-checked, aria-label="(De)Select all"/"(De)Select all filtered"
row checkbox - aria-checked, aria-label="(De)Select row with key ${primaryKey}"/"(De)Select row"; when primary key is omitted, then it's not possible to describe row as a string

5. Assumptions and Limitations

Following the Material Design Guidelines the following setting where omitted, to allow easy configuration of the feature. All the below can be achieved, using the row selection API.

the only mode of selection will be multiple

single selection will be achieved using the onSelection event and its arguments that are holding not only the cell but also the row data.

the only way to select a row, will be through the checkbox.
checkbox will be always rendered (along with the header one)

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 setting selectable of a column group.
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
Resizing: Verify that when resize a column it stays selected
MRL: Verify that columns in the MRL can be selected
Paging: Verify column stays selected when change page
Editing: Verify that when edit a cell it stays selected form a column
Cell selection: Verify that cell selection is not changed when select a column
Row selection: verify row selection is not changed when select a column
Summaries: Verify summaries are not selected when select a column