Skip to main content

Selection Modes

The grid supports 5 different selection modes as defined in the GridSelectionMode enum.

export enum GridSelectionMode {
"SingleRow" = "SingleRow",
"MultipleRows" = "MultipleRows",
"SingleCell" = "SingleCell",
"MultipleCells" = "MultipleCells",
"None" = "None",
}

The default selection mode is MultipleRows. To change the selection mode, set the selectionMode prop of the GridOptions interface.

Single Row Selection

Live Editor
Result
Loading...

Multiple Row Selection

Live Editor
Result
Loading...

Single Cell Selection

Live Editor
Result
Loading...

Multiple Cell Selection

Live Editor
Result
Loading...

No Selection

Live Editor
Result
Loading...

Programmatically Selecting Rows

You can programmatically select rows by using the selectRows method of the GridApi interface.

Live Editor
Result
Loading...
Tip

Note that the rebuild method is required to update the UI after selecting rows. This is because in addition to selecting rows, we also need to update the Toolbar UI to reflect the selection. This also helps with custom renderers you may have written that need to know when rows are selected. Technically, you can call repaint as well, but unless you are doing this in a loop, it is better to call rebuild. Both methods are single digit millisecond fast, so it is not usually a performance concern. For most usecases, this wont even be perceptible to the human eye.

Programmatically Selecting Cells

You can programmatically select cells by using the setSelectedCells method of the GridApi interface.

Live Editor
Result
Loading...
Tip

Note that the rebuild method is required to update the UI after selecting cells. This is because in addition to selecting cells, we also need to update the Toolbar UI to reflect the selection. This also helps with custom renderers you may have written that need to know when cells are selected. Technically, you can call repaint as well, but unless you are doing this in a loop, it is better to call rebuild. Both methods are single digit millisecond fast, so it is not usually a performance concern. For most usecases, this wont even be perceptible to the human eye.

Styling Selected Rows

There are multiple ways to style selected rows.

Using CSS

You can simply set this globally in css by customizing the following css classes:

.ezgrid-dg-selected-cell,
.ezgrid-dg-selected-row {
background-color: #f0f0f0;
}
Tip

When you modify css classes, please create a new css file and import it in your application after importing the datagrid css file. This will ensure that your css overrides do not get overwritten by future updates.

Using rowStyleFunction

You can also use the rowStyleFunction property of the GridOptions interface to style selected rows.

Live Editor
Result
Loading...