Enable users to select many rows at once within a grid.
To enable multi-row selection set rowSelection.mode
to 'multiRow'
.
dashGridOptions = {
'rowSelection': {
'mode': 'multiRow',
},
# other grid options...
}
The following example illustrates a basic multi-row selection configuration.
Click checkboxes to select or deselect a row. Alternatively, you can do this via the keyboard by focusing the row and
pressing the <kbd>␣ Space<kbd> key. Users can hold <kbd>⇧ Shift<kbd> and then click a checkbox to add a range of
adjacent rows to the selection.
Ranges of rows can be selected by holding down <kbd>⇧ Shift<kbd> while clicking on rows. This behavior also applies
when Checkbox Selection is disabled, and in
Group Selection .
The rowSelection.enableClickSelection
property configures whether a row’s selection state will be impacted when the
row is clicked.
enableClickSelection
]This is typically used
when Checkbox Selection is disabled, though
both can be enabled simultaneously if desired. Click-selection and deselection can be enabled by setting
enableClickSelection
to True
, otherwise they may be enabled separately using the values 'enableSelection'
and
'enableDeselection'
.
dashGridOptions = {
'rowSelection': {
'mode': 'multiRow',
'enableClickSelection': True,
},
# other grid options...
}
The example below demonstrates the three possible configurations for this property, as well as the behavior when it is
disabled. Click a row to select it, and <kbd>Ctrl<kbd>-click to deselect it.
Note that deselection is still possible using the <kbd>␣ Space<kbd> key or when checkboxes are enabled by clicking a
selected checkbox.
<br>
To prevent any row selection checkboxes from being rendered, set rowSelection.checkboxes
to False
.
To prevent the header checkbox from being rendered, set rowSelection.headerCheckbox
to False
. Setting both to
False
will disable the checkbox column.
Selection is still possible using the <kbd>␣ Space<kbd> key, or setting enableClickSelection
to select clicking on
the row.
dashGridOptions = {
'rowSelection': {
'mode': 'multiRow',
'checkboxes': False,
'headerCheckbox': False,
'enableClickSelection': True,
},
# other grid options...
}
You may also pass a function to rowSelection.checkboxes
to dynamically enable or disable checkboxes for given rows.
For example, to enable checkboxes for rows where the ‘year’ property is less than 2007, we can set:
dashGridOptions = {
'rowSelection': {
'mode': 'multiRow',
'checkboxes': {"function": "params.data.year < 2007"},
},
# other grid options...
}
Note that:
rowSelection.hideDisabledCheckboxes
to True
to hide disabled checkboxes.It is possible to specify which rows can be selected via the rowSelection.isRowSelectable
callback function.
For instance, if we only wanted to allow selection for rows where the ‘year’ property is less than 2007, we could
implement the following:
dashGridOptions = {
'rowSelection': {
'mode': 'multiRow',
'isRowSelectable': {"function": "params.data.year < 2007"},
},
# other grid options...
}
Rows for which isRowSelectable
returns False
cannot be selected at all, whether using the UI or the API.
Note that:
rowSelection.hideDisabledCheckboxes
to True
to hide disabled checkboxes.All rows may be selected at once by using the header checkbox, which is enabled by default in 'multiRow'
mode.
The three possible values of rowSelection.selectAll
are:
'all'
(Default): Selecting the header checkbox selects'filtered'
: Selecting the header checkbox will select all rows that satisfy the currently active filter.'currentPage'
: Selecting the header checkbox will select all rows that satisfy the currently active filter on thedashGridOptions = {
'rowSelection': {
'mode': 'multiRow',
'selectAll': 'filtered'
},
# other grid options...
}
The example below demonstrates the three different modes available for rowSelection.selectAll
.
Note that when rowSelection.isRowSelectable
is defined, the header checkbox will only select selectable rows.
<br>
The value of
rowSelection.selectAll
does not affect group selection behavior, which is controlled by
rowSelection.groupSelects
.
See Row Grouping - Selecting Groups for more on this.
The checkbox column may be customized in a similar way to any other column, by specifying its column definition in the
selectionColumnDef
grid option.
selectionColumnDef
]columnDefs
, which does not support several normal column features such as editing, pivoting and grouping.The SelectionColumnDef
allows for a great deal of customization, including custom renderers, sorting, tooltips and
more. The example below demonstrates allowing sorting using the default sort order (selected first), changing the
default width of the column, making the column resizable and adding some header tooltip text.
The checkbox column has a default
maxWidth
set. To make the columnresizable
(when settingresizable: True
), or
to set awidth
/initialWidth
, the max width must also be overridden.
<br>
dashGridOptions = {
'selectionColumnDef': {
'sortable': True,
'width': 100,
'maxWidth': 100,
'resizable': True,
'headerTooltip': 'Checkboxes indicate selection',
},
# other grid options...
}
In certain circumstances, especially in the context of touchscreen devices, users may want to select multiple rows
without having to use the <kbd>Ctrl<kbd> key.
This can be achieved by setting the rowSelection.enableSelectionWithoutKeys
flag to True
. You will also need to set
enableClickSelection
to True
.
dashGridOptions = {
'rowSelection': {
'mode': 'multiRow',
'checkboxes': False,
'headerCheckbox': False,
'enableSelectionWithoutKeys': True,
'enableClickSelection': True,
},
# other grid options...
}
Click multiple rows in the example below without pressing any keyboard keys to explore this behavior.
See AG Grid docs API Reference for the full
list of configuration options available in 'multiRow'
mode.
<br>