Selection

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:

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}}

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{users.length}} users

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.

User ID Name Creation date Favorite color {{user.id}} {{user.name}} {{user.creation | date}} {{users.length}} users

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:

Preserving Selection

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.