Check list in Vue ListView component

19 Feb 20258 minutes to read

The ListView supports checkbox in default and group lists which is used to select multiple items. The checkbox can be enabled by the showCheckBox property.

The checkbox is useful in scenarios where we need to select multiple options. For example, in a shopping cart, we can select or unselect the desired items before checkout. It is useful for selecting multiple items that belong to the same category using the group list.

<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='data' showCheckBox='true' headerTitle='To Do List'
        showHeader='true'></ejs-listview>
    </div>
  </div>
</template>
<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";

const data = [
  { text: 'Do Meditation', id: '1' },
  { text: 'Go Jogging', id: '2' },
  { text: 'Buy Groceries', id: '3' },
  { text: 'Pay Phone bill', id: '4' },
  { text: 'Play Football with your friends', id: '5' },
];

</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  max-width: 350px;
  padding: 10px;
  margin: auto;
}
</style>
<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='data' showCheckBox='true' headerTitle='To Do List'
        showHeader='true'></ejs-listview>
    </div>
  </div>
</template>
<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";

export default {
  name: "App",
  components: {
    "ejs-listview": ListViewComponent
  },

  data: function () {
    return {
      data: [
        { text: 'Do Meditation', id: '1' },
        { text: 'Go Jogging', id: '2' },
        { text: 'Buy Groceries', id: '3' },
        { text: 'Pay Phone bill', id: '4' },
        { text: 'Play Football with your friends', id: '5' },
      ],
    };
  }
}
</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  max-width: 350px;
  padding: 10px;
  margin: auto;
}
</style>

Checkbox Position

In ListView, the Checkbox can be positioned to either the Left or Right side of the list-item text. This can be achieved by checkBoxPosition property. By default, checkbox will be positioned to Left of list-item text.

<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='data' showCheckBox='true'
        checkBoxPosition='Right'></ejs-listview>
    </div>
  </div>
</template>
<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";

const 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' },
];

</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>
<template>
  <div class="control-section">
    <div id='flat-list'>
      <!-- ListView element -->
      <ejs-listview id='sample-list-flat' :dataSource='data' showCheckBox='true'
        checkBoxPosition='Right'></ejs-listview>
    </div>
  </div>
</template>

<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";

export default {
  name: "App",
  components: {
    "ejs-listview": ListViewComponent
  },
  data: function () {
    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' },
      ],
    };
  }
}
</script>
<style>
#sample-list-flat {
  border: 1px solid #dddddd;
  border-radius: 3px;
  margin: auto;
}

#flat-list {
  width: 50%;
  padding: 10px;
  margin: auto;
}
</style>