Skip to content

Row Selection (Grid feature)

MonikaKirkova edited this page May 31, 2022 · 20 revisions

Row Selection Specification


  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
0.2 Nikolay Alipiev March 27, 2018 API Renaming
0.3 Nikolay Alipiev April 2, 2018 API Update (methods, events); add user stories for header checkbox; add other features integration paragraph;
0.4 Nikolay Alipiev April 3, 2018 Add user stories
0.5 Nikolay Alipiev April 4, 2018 Add keyboard navigation; onRowEditing event args;
0.6 Nikolay Alipiev April 4, 2018 Aria support
0.7 Nikolay Alipiev April 10, 2018 API Updates
0.8 Nikolay Alipiev April 13, 2018 API Updates


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

The igx-grid should support the 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. The checkbox column will be fixed, which will leave it visible, even a horizontal scrollbar is presented.

As an end-user, I want to

  • to select/deselect grid rows, using a checkbox
  • to select/deselect the checkbox, using the space key
  • the checkbox column to be always the first column
  • the checkbox column to be always visible
  • to have checkbox in the header that will select/deselect all visible rows
  • the header checkbox to have indeterminate state, which will be visible, when 1 or more, but not all the rows are selected
  • preserve selection, even the selected rows are out of visual scope
  • filter grid data, then use the header checkbox to select all visible rows. When the filter is cleared, then only the previously filtered items are selected
  • if filtering is applied then header checkbox will show state only for the filtered items, and clicking the header checkbox will select all filtered items, and will make the header checkbox selected (not indeterminate state, because it will not be related to all the items)
  • if paging is enabled in the grid then selecting header checkbox will select all the rows on all the pages
  • if hiding is enabled and all columns are hidden, then header and row selections are hidden too.
  • select/deselect grid rows and preserve previous selection on cell click holding ctrl key

Developer Stories

As a developer, I want to

  • get/set selected rows using their identifiers (primaryKey or rowData)
  • select/deselect all rows
  • be notified, when the selection has changed
  • select/deselect single rowComponent

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" [rowSelectable]="true"></igx-grid>

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

Selection of rows is as easy as:


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

<igx-grid #grid [data]="localData" [rowSelectable]="true" (onRowSelectionChange)="rowSelection(args)"></igx-grid>
public rowSelection(args) {
    grid.selectRows([rowID1, rowID2, rowID5]);

3.3 Other igxGrid features integration:

  • Filtering
  • Sorting
  • Paging
  • Pinning
  • Group By

Row selection should preserve selection, during data operations, like the one above. When a grid data is filtered and then the header checkbox is selected, only the visible items should be added to the selection. The same is not valid for paging - when the header checkbox is clicked then all the items on all the pages are selected.

3.4. Keyboard Interaction

Key combination Description
Space (on a data row) Toggles the selection state of an individual row in the body
Shift + Click Extends the selection to where the click was performed by selecting all unselected items between the current selection and the click target
Ctrl/Cmd + Click Adds to the current selection the item on which the user has clicked

3.5 API


  1. IgxGridComponent

    Name Description Type
    rowSelectable Enable row selection for the grid boolean


  1. 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
    selectRowsInGroup Select all rows within a group. void group: IGroupByRecord, clearPrevSelection?: boolean
    deselectRowsInGroup Deselect all rows within a group. void group: IGroupByRecord


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

The following components get 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 the primary key is omitted, then it's not possible to describe row as a string

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

igxGrid Row Selection Issue

Clone this wiki locally