DevExtreme v24.2 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React List - List Selection

There are three List item selection modes: "single", "multiple", and "all". To enable item selection, pass the mode name to the selectionMode property. If you set this property to "none" (default setting), item selection is disabled. In this demo, you can try out all the selection modes. Use the drop-down Selection Mode menu to switch between modes.

To give you the ability to edit code on the fly, the demo uses SystemJS. For this reason, launching the demo takes some time. We strongly recommend that you do not use this approach in real projects.
Backend API

List items can display checkboxes or radio buttons. To show these controls, enable the showSelectionControls property. Otherwise, users can click or tap list items to select them. The showSelectionControls property should also be enabled when you use the "all" selectionMode to show the Select All checkbox.

When the List data is paginated, you can choose whether the Select All checkbox selects all items on all pages or only the items on the current page. To configure this functionality, set the selectAllMode property to "allPages" or "page". In this demo, you can use the drop-down Select All Mode menu to change the selectAllMode property at runtime.

To configure the initial selection or access the keys of selected items, use the selectedItemKeys array. This example shows the contents of this array in the Selected IDs section below the List.

You can also implement the onSelectionChanged event handler to perform an action when users select items.