Skip to content

Column Selection

Radoslav Mirchev edited this page Mar 30, 2020 · 20 revisions

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
0.6 Radoslav Mirchev March 30, 2020 Update API with columnSelection input

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.

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 Excel Style Filter with Column Selection

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.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 The selection is data based.

  • Sorting - When sorting is performed selection should not be cleared. It will leave currently selected cells the same while sorting ascending or descending.
  • Paging - On paging selected cells should not be cleared. Selection will be persisted across pages.
  • Filtering - When filtering is performed selection should not be cleared. getSelected() will return only the visible cells on filtering. If filtering is cleared it will return the initially selected cells.
  • Resizing - On column resizing selected cells should not be cleared.
  • Hiding - the selected cells should be cleared. If column is hidden, the selection on the cells will be cleared.
  • Pinning - Selected cell should not be cleared. Same as hiding
  • Group by - On column grouping selected cells should not be cleared.

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 Header Template for Column Selection Header Template with One Selected 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 Toolbar with Column Selection Dropdown

The following components gets the corresponding aria attributes

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

igxGrid Column Selection Issue

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

Clone this wiki locally