Row Selection (Grid feature)

Row Selection Specification

Contents

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

Revision History

Version	User	Date	Notes
0.1	Nikolay Alipiev	March 22, 2018	Initial Draft

1. Overview

Objectives

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

The igx-grid should support selection of one or more rows, through a checkbox that is preceding all other columns in the row. Clicking the checkbox will select/deselect the row, and selection will not happen when clicking any other cell in the row. Checkbox column will be fixed, which will leave it visible, even a horizontal scrollbar is presented.

2. User Stories

As an end user, I want to

• to select/deselect grid rows, using a checkbox
• to select/deselect checkbox, using space key
• the checkbox column to be always the first column
• the checkbox column to be always visible
• to have checkbox in header that will select/deselect all visible rows
• preserver selection, even the selected rows are out of visual scope

Developer Stories

As a developer, I want to

• get/set selected rows collection
• select/deselect all rows
• be notified, when selection has changed
• be able to cancel selection that is in progress

3. Functionality

3.1. End User Experience

Users are able to select and deselect row, using a checkbox, that is pinned at the start of the row.

3.2. Developer Experience

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

<igx-grid #grid [data]="localData" [selectable]="true"></igx-grid>

Developers are able to programmatically select/deselect rows. The identification of the rows, happen according the the grid primaryKey.

Selection of rows is as easy as:

this.grid.select([row1,row3,row5]);

Developers can also subscribe to an event emitted before the row selection is copmleted:

<igx-grid #grid [data]="localData" [selectable]="true" (onRowSelection)="rowSelection($event)"></igx-grid>

public rowSelection(event) {
    const grid = event.row.grid;
    grid.deselectAll();
    grid.select([event.row]);
}

3.3. Keyboard Interaction

As far as the default way to select a row is using, the checkbox, then focusing the checkbox and using the Space, will toggle the selection.

3.4 API

Properties

1. IgxGridComponent

   Name	Description	Type
   selectable	Enable row selection for the grid	boolean

Methods

1. IgxGridComponent

   Name	Description	Return type	Parameters
   getSelection	Get current selection state	Array<IgxRowComponent>- array with selected rows
   select	Select specified rows	bool- whether the select was successful or not	Array<IgxRowComponent>, clearCurrentSelection: boolean
   deselect	Deselect specified rows	bool- whether the deselect is successful or not	Array<IgxRowComponent>
   selectAll	Select all rows	bool- whether the select is successful or not
   deselectAll	Select all rows	bool- whether the deselect is successful or not

2. IgxGridRowComponent

   Name	Description	Return type	Parameters
   isSelected		bool - whether the row is selected or not
   select	Select this row	bool - whether the select is successful or not
   deselect	Deselect this row	bool - whether the deselect is successful or not

Events

Name	Description	Cancelable	Parameters
onRowSelection	Emitted when selection is changed, before the selection completes.	true	row: IgxGridRowComponent, selection: Array<IgxRowComponent>

4. ARIA Support

Add aria attribute for the selected row.

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
• the only way to select row, will be through the checkbox.
• checkbox will be always rendered (along with the header one)

6. References