Angular List - Selection

User Interaction

In the List UI component, selection is disabled by default. To enable it, choose one of selection modes using the selectionMode property.

HTML
TypeScript
  • <dx-list ...
  • selectionMode="single"> <!-- or "multiple" | "all" | "none" (disables selection) -->
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

To select a List item, an end user simply clicks or taps it. Selected items become shaded. If you want to indicate selected items more manifestly, set the showSelectionControls property to true. This setting adds a check box to each item on the List. Also, make this setting if you use the "all" selectionMode. Otherwise, the "Select All" check box will be missing.

HTML
TypeScript
  • <dx-list ...
  • [showSelectionControls]="true">
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

When data in the List is paginated, you can choose whether the "Select All" check box will select all items on all pages or items on the currently rendered pages only. To make this choice, specify the selectAllMode property.

HTML
TypeScript
  • <dx-list ...
  • selectAllMode="allPages"> <!-- or "page" -->
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

View Demo

See Also

API

Add or remove an item's key from the selectedItemKeys collection to select the item or cancel its selection:

app.component.html
app.component.ts
app.module.ts
  • <dx-list ...
  • [(selectedItemKeys)]="selectedKeys">
  • </dx-list>
  • import { Component } from '@angular/core';
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • selectedKeys: Array<number> = [6, 2, 5];
  • selectItem(key) {
  • if(!this.selectedKeys.includes(key)) {
  • this.selectedKeys.push(key);
  • }
  • }
  • deselectItem(key) {
  • this.selectedKeys = this.selectedKeys.filter((data) => {
  • return data !== key;
  • });
  • }
  • }
  • import { BrowserModule } from '@angular/platform-browser';
  • import { NgModule } from '@angular/core';
  • import { AppComponent } from './app.component';
  •  
  • import { DxListModule } from 'devextreme-angular';
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxListModule
  • ],
  • providers: [ ],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
NOTE
To specify the key field, use the keyExpr property of the List or the key property of the Store.
See Also

Events

The List UI component fires the selectionChanged event when an item is selected or when the selection is cancelled. The UI component also fires the selectAllValueChanged event when the "Select All" check box has changed its value. If the functions that handle these events are not going to be changed during the lifetime of the UI component, assign them to the corresponding onEventName properties when you configure the UI component.

HTML
TypeScript
  • <dx-list ...
  • (onSelectionChanged)="onSelectionChanged($event)"
  • (onSelectAllValueChanged)="onSelectAllValueChanged($event)">
  • </dx-list>
  • import { DxListModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • onSelectionChanged (e) {
  • const addedItems = e.addedItems;
  • const removedItems = e.removedItems;
  • // Handler of the "selectionChanged" event
  • }
  • onSelectAllValueChanged (e) {
  • const newCheckBoxValue = e.value;
  • // Handler of the "selectAllValueChanged" event
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxListModule
  • ],
  • // ...
  • })

View Demo

See Also