Selection

The ListBox allows the user to select single or multiple items.

Basic Configuration

By default, the single selection option of the ListBox is enabled. To configure the multiple selection mode, add selectable: "multiple" to its settings. When selected, multiple items move together so that the selected items are transferred to another Kendo UI ListBox together or reordered as a set among other items.

<div id="vueapp" class="vue-app">
    <kendo-listbox :data-source=dataSourceArray
                   :data-text-field="'country'"
                   :data-value-field="'id'"
                   :selectable="'multiple'"                  
                   :toolbar-tools="['moveUp', 'moveDown', 'remove']">
    </<kendo-listbox>
</div>
Vue.use(ListBoxInstaller);

new Vue({
    el: "#vueapp",
    data: function() {
        return {
            dataSourceArray: [
                { country: "Germany", id: 1 },
                { country: "France", id: 2 },
                { country: "Italy", id: 3 },
                { country: "Spain", id: 4 },
                { country: "Hungary", id: 5 }
            ]
        }
    }
})

Reordering of Selected Items

You can reorder selected items by using any of the following approaches:

  • The moveUp and moveDown command buttons of the toolbar.
  • The drag-and-drop functionality if the widget is draggable.
  • The Ctrl & Shift with , or the Ctrl & Shift with keyboard combination.

Currently, multiple selected items cannot be dragged and dropped.

<div id="vueapp" class="vue-app">
    <kendo-datasource ref="datasource"
                      :type="'odata'"
                      :transport-read="'https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers'">
    </kendo-datasource>
    <kendo-listbox :data-source-ref="'datasource'"
                        :data-text-field="'ContactName'"
                        :data-value-field="'CustomerID'"
                        :selectable="'multiple'"   
                        :toolbar-tools="['moveUp', 'moveDown', 'remove']">
    </kendo-listbox>
</div>
Vue.use(ListBoxInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp"
})

In this article