To allow actions on multiple items at once, we provide the ability for the user to select rows in the datagrid. To make rows selectable in your datagrid, you need to do the following:
[clrDgItem]
input on each
<clr-dg-row>
component to tell us what model the user is actually selecting.
Most of the time, this will simply be the current data object in the iteration.
[(clrDgSelected)]
two-way binding on the datagrid itself, to have access to the
list of currently selected items. Note that by adding items to this list yourself, you can dynamically select
elements if you need to.
In addition to a checkbox for each row to select individual rows, there will be a checkbox in the header row that will select all of the currently visible rows.
In the following example, we simply display the names of the selected users, but since we have access to the full objects, we could perform any operation we want on them.
Selected users: No user selected. {{user.name}}
Depending on the use case, you might want to allow selection when clicking anywhere in the grid row. Note that this is not recommended when the rows contain clickable items. For example, if your cells contain input, buttons, etc. it is best to avoid enabling whole row selection.
For row selection mode add [(clrDgRowSelection)]
and set it to
true
.
clrDgRowSelection
has been deprecated in 2.0 and will be removed in a future major
release. It is impossible to support this functionality properly and also comply with accessibility standards for
Clarity, and we no longer can recommend using this pattern. The workaround is to simply use single selection
without row selection.
If you need an easier access to the selected state of a row, without having to go through the entire array, we also
provide a boolean [(clrDgSelected)]
two-way binding on the
<clr-dg-row>
itself. For instance, when your model itself tracks if items are
selected, you can simply write:
If you need to listen to when the selection changes, you can use Angular's
two way binding to listen to the
(clrDgSelectedChange)
event:
Mark a row with clrDgSelectable
, this way the state of the row could not be changed by
user interactions. This property works only when using single or multi-selection modes.
By default, when a filter is applied to the datagrid the selection is cleared. This is done to ensure that all
selected items are always visible in the datagrid. In certain instances, this might not be desireable, therefore we
provide the [clrDgPreserveSelection]
input. Setting this to true will retain the current
selection on the datagrid, even if filters are applied and selected items are not visible.
Note: If you do enable [clrDgPreserveSelection]
, before performing any action on the
selected items, a confirmation should be shown to ensure the end-user is aware of which items they are operating on,
since the filters may hide some of the selected items from the user causing a discovery issue.