DevExtreme Vue - Selection

User Interaction

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

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.

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.

View Demo

See Also

API

You can select an item or cancel its selection in the following ways.

See Also

Events

The List widget fires the selectionChanged event when an item is selected or when the selection is cancelled. The widget 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 widget, assign them to the corresponding onEventName options when you configure the widget.

View Demo

If you are going to change the event handlers at runtime, or if you need to attach several handlers to a single event, subscribe to this event using the on(eventName, eventHandler) method. This approach is more typical of jQuery.

JavaScript
  • var selectionChangedEventHandler1 = function(e) {
  • // First handler of the "selectionChanged" event
  • };
  •  
  • var selectionChangedEventHandler2 = function(e) {
  • // Second handler of the "selectionChanged" event
  • };
  •  
  • $("#listContainer").dxList("instance")
  • .on("selectionChanged", selectionChangedEventHandler1)
  • .on("selectionChanged", selectionChangedEventHandler2);
See Also