In the UI

In the List widget, selection is disabled by default. To enable it, choose one of selection modes using the selectionMode option.

JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        selectionMode: "single" // or "multiple" | "all" | "none" (disables selection)
    });
});

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

JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        showSelectionControls: true
    });
});

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

JavaScript
$(function() {
    $("#listContainer").dxList({
        // ...
        selectAllMode: "allPages" // or "page"
    });
});

View Demo

See Also