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
.
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: