Depending on the use case, you might want to restrict the user to only allow single selection in a datagrid. If you haven't done so, please read the previous section on general selection first.
[(clrDgSelected)]
, add a
[(clrDgSingleSelected)]
two-way binding on the datagrid itself, to have access to the
currently selected item. Note that by setting this value yourself, you can dynamically select an element if you need
to.
In the following example, we simply display the name of the selected user, but since we have access to the full objects, we could perform any operation we want on it.
Selected user: No user selected. {{singleSelected.name}}
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.
We also offer an [clrDgRowSelection]
input to allow users to click anywhere on a row to
select it. We however recommend against using this feature unless you have a very specific use case that requires it,
due to the various accessibility concerns it raises (table rows cannot be actionable elements at the same time). We
are considering deprecating this feature in the future if it continues to hinder accessibility.
[clrDgRowSelection]
if your row contains any type of clickable elements
(buttons, links, inputs, expand caret, single-row actions, etc.). Doing so would produce invalid HTML in the form
of nested buttons, which will break in various unpredictable ways depending on the browser.
Selected user: No user selected. {{rowSelected.name}}
If you need to listen to when the selection changes, you can use Angular's
two way binding to listen to the
(clrDgSingleSelectedChange)
event:
In order to conditionally disable selection on a row, use the clrDgSelectable
input to disable selection state changes. This has to be done on each row you wish to disable, and works with single
and multi selection.