Column Selection

Column Selection Specification

Contents

1. Overview
2. User Stories
3. Functionality
4. ARIA support
5. Assumptions and Limitations
6. References
7. Test plan

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
0.5	Zdravko Kolew	March 30, 2020	Update API with columnSelection input

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.

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.

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

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

Below are two more states reflecting hovering and selecting a second column in a similar fashion as above.

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.

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

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

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

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

1. 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

2. 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

[NEW] 3. IgxGridComponent

Name	Description	Type	Default value
columnSelection	Input that is used to set column selection type using the GridSelectionMode enum (none, single, multiple)	GridSelectionMode	none

Note:

• none - Default value. Clicking and Hovering on the column header will do nothing - no visual selection style indicator, no clicking action. Sort behavior remains as it was decided, only on clicking on the sort icon. Columns can still be selected through the API with none
• single - clicking on the header will perform single selection. If you select a column and then click on another column, it will deselect the currently selected column and will select the new one.
• multiple - clicking on a header with hold-press of Ctrl key will perform multiple selection. If you click on a new column header, it will be added to the current selection. If you click again on an already selected column, it will deselect it.

Example:

Use GridSelectionMode enum or pass a string directly to the cellSelection input

export enum GridSelectionMode {
    none = 'none',
    single = 'single',
    multiple = 'multiple',
}

Code example:

<igx-grid #grid1 [data]="data" [columnSelection]="'single'">
..
</igx-grid>

Methods

1. 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

1. Create a sample with a header template with a check icon that upon clicking toggles the selection state of the column

2. 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:

1. Should be able to set column properties selected and selectable

2. Should be able to select a column with mouse click(verify event is fired)

3. Should not be able to select not selectable column with mouse click

4. Should be able to select multiple columns with Crtl + mouse click (verify event is fired)

5. 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)

6. When select a range of columns with Shift + mouse click not selectable columns should not be selected.

7. When there a selected columns and click on column, which is selected, only this column should stay selected

8. When there a selected columns and click on column holding Ctrl key, the column should be unselected and the other columns should stay selected

9. When a column is selected and there are no other selected columns, clicking on it should deselect the column

10. Verify that when hover selectable column hovered class is applied

11. Verify that when hover not selectable column hovered class is not applied

12. Verify that when column is selected, its header has aria-selected and all its cells has aria-selected.

13. Verify that event onColumnSelectionChange can be canceled when select/deselect a single column

14. Verify that event onColumnSelectionChange can be canceled when select/deselect columns range

15. Verify API method getSelectedColumns returns all selected columns

16. Verify API method selectColumns with array of fields and with array of columns. Verify event is not fired

17. Verify API method deselectColumns with array of fields and with array of columns. Verify event is not fired

18. Verify API method deselectAllColumns deselects all columns.

19. Verify getSelectedColumnsData returns correct data.

Column Selection in Excel Style Filter:

1. Verify that when a columns is selectable and open ESF, checkbox for selecting is previewed. (Verify with different densities )

2. Verify that when columns is not selectable checkbox for selection is not previewed

3. Verify that clicking the checkbox selects/deselects the column and fires event

4. Verify that columns selection can be template in ESF

Multi column headers:

1. Verify setting selected on columns group, all its children, which are selectable are selected/deselected

2. Verify that when all the group child has selectable false, the group is also selectable false.

3. Verify that when hover group all its children which are selectable are hovered

4. Verify that when click on column group all its visible and selectable children are selected/deselected

5. Verify multiple selection with Ctrl and mouse click on column groups

6. Verify multiple selection with Shift and mouse click on column groups

7. Verify selecting all visible children of a group selects the group

8. Verify and when a group is selected and deselects one of its children the group is deselected

Integration scenarios:

1. 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

2. Filtering: Verify the column cells stays selected when filter

3. Sorting: Verify that when click sort indicator of a column the columns is not selected

4. Pinning: Verify that when pin/unpin the column stays selected

5. Hiding: Verify that when hide/unhide a column the column stays selected

6. Moving: Verify that when move a column the drag indicator does not have selected style and the columns stays selected

7. Paging: Verify column stays selected when change page