Data Grid Row Selection

With row selection in Ignite UI for Angular, there is a checkbox that precedes all other columns within the row. When a user clicks on the checkbox, the row will either become selected or deselected, enabling the user to select multiple rows of data.

Demo

Setup

Single Selection

The grid single selection can be easily setup using the grid's onSelection event. The event emits a reference to the cell component. That cell component has a reference to the row component that is holding it. The row component reference rowID getter can be used to pass a unique identifier for the row (using either rowData[primaryKey] or the rowData object itself) to the appropriate list of the selectionAPI. To make sure that only a single row is always selected, we empty the selectionAPI row selection list beforehand (the second argument in the selectRows method call):

    <!-- in example.component.html -->
    ...
    <igx-grid #grid1 [data]="remote | async" [rowSelectable]="false" (onSelection)="handleRowSelection($event)"
      [width]="'800px'" [height]="'600px'" [allowFiltering]="true">
            ...
    </igx-grid>
    ...
    /* in examplegrid.component.ts */
    public handleRowSelection(args) {
        const targetCell = args.cell as IgxGridCellComponent;
        if (!this.selection) {
            this.grid1.selectRows([targetCell.row.rowID], true);
        }
    }

Multiple Selection

To enable multiple row selection, the igx-grid exposes the rowSelectable property. Setting rowSelectable to true enables a select checkbox field on each row and in the grid header. The checkbox allows users to select multiple rows, with the selection persisting through scrolling, paging, and data operations such as sorting and filtering:

    <igx-grid #grid1 [data]="remote | async" [primaryKey]="'ProductID'" [rowSelectable]="selection" (onSelection)="handleRowSelection($event)"
      [width]="'800px'" [height]="'600px'" [allowFiltering]="true">

Note: In order to have proper row selection and cell selection, while grid has remote virtualization, primaryKey should be provided.

Note: If filtering is in place, selectAllRows() and deselectAllRows() select/deselect all filtered rows.

Note: When grid has remote virtualization then clicking the header checkox will select/deselect all records. But when all records are selected through header checkbox and then a visible row has been deselected, when new data is loaded in the grid on demand, it is a limitation that the newly loaded rows are not selected.

Note: Cell selection will trigger onSelection and not onRowSelectionChange.

Code Snippets

Select rows programatically

The below code example can be used to select one or multiple rows simultaniously (via primaryKey):

<!-- in component.html -->
<igx-grid ... [primaryKey]="'ID'">
...
</igx-grid>
...
<button (click)="this.grid.selectRows([1,2,5])">Select 1,2 and 5</button>

This will add the rows which correspond to the data entries with IDs 1, 2 and 5 to the grid selection.

Cancel selection event

<!-- in component.html -->
<igx-grid
    (onRowSelectionChange)="handleRowSelectionChange($event)"
>
...
</igx-grid>
// in component.ts
public handleRowSelectionChange(args) {
    args.newSelection = args.oldSelection; // overwrites the new selection, making it so that no new row(s) are entered in the selectionAPI
    args.checked = false; // overwrites the checkbox state
}

API Reference

Additional Resources

Our community is active and always welcoming to new ideas.

View page on GitHub