The ListBox provides support to select an item or a group of item by mouse or keyboard action. There are two selection modes available in list box,
On selection of each list box item,
select
event is triggered.
To enable single selection in the list box, mode
should be set as Single
in selectionSettings
property.
<template>
<div id="app">
<div id='container' style="margin:10px auto 0; width:250px;">
<ejs-listbox :dataSource='data' :selectionSettings="selectionSettings" ></ejs-listbox>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { ListBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(ListBoxPlugin);
export default {
data (){
return {
data: [
{ text: 'Hennessey Venom', id: 'list-01' },
{ text: 'Bugatti Chiron', id: 'list-02' },
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
{ text: 'SSC Ultimate Aero', id: 'list-04' },
{ text: 'Koenigsegg CCR', id: 'list-05' },
{ text: 'McLaren F1', id: 'list-06' },
{ text: 'Aston Martin One- 77', id: 'list-07' },
{ text: 'Jaguar XJ220', id: 'list-08' },
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' },
];
selectionSettings: { mode: "Single" }
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>
To enable multiple selection in the list box, mode
should be set as Multiple
in selectionSettings
property.
To select multiple items, use the SHIFT, CTRL, and arrow keys to make selections.
By default, the selection mode is set as
Multiple
.
<template>
<div id="app">
<div id='container' style="margin:10px auto 0; width:250px;">
<ejs-listbox :dataSource='data' :selectionSettings="selectionSettings" ></ejs-listbox>
</div>
</div>
</template>
<script>
import Vue from 'vue';
import { ListBoxPlugin } from "@syncfusion/ej2-vue-dropdowns";
Vue.use(ListBoxPlugin);
export default {
data (){
return {
data: [
{ text: 'Hennessey Venom', id: 'list-01' },
{ text: 'Bugatti Chiron', id: 'list-02' },
{ text: 'Bugatti Veyron Super Sport', id: 'list-03' },
{ text: 'SSC Ultimate Aero', id: 'list-04' },
{ text: 'Koenigsegg CCR', id: 'list-05' },
{ text: 'McLaren F1', id: 'list-06' },
{ text: 'Aston Martin One- 77', id: 'list-07' },
{ text: 'Jaguar XJ220', id: 'list-08' },
{ text: 'McLaren P1', id: 'list-09' },
{ text: 'Ferrari LaFerrari', id: 'list-10' },
];
selectionSettings: { mode: "Multiple" }
}
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
@import "../../node_modules/@syncfusion/ej2-vue-dropdowns/styles/material.css";
</style>