Get selected items from ListView in Vue ListView component

19 Feb 20257 minutes to read

Single or many items can be selected by users in the ListView component. An API method is available to get selected items from the list items. This is called the getSelectedItems method.

Method Usage
getSelectedItems This is used to get the details of the currently selected item from the list items. It returns either a SelectedItem or a SelectedCollection depending on the selection mode.

The getSelectedItems method returns the following items from the selected list items.

Return type Purpose
text Returns the text of selected item lists
data Returns the complete data of selected list items, i.e., returns the fields data of selected li elements
item Returns the collections of list items 
<template>
  <div class="control-section">
    <ejs-listview ref='listview' id='sample-list' :dataSource='data' showCheckBox=true :fields='fields'></ejs-listview>
    <br />
    <ejs-button id="btn" v-on:click="onClick">Get Selected Items</ejs-button>
    <div ref='valEle' id="val"> </div>
  </div>
</template>

<script setup>

import { ListViewComponent as EjsListview } from "@syncfusion/ej2-vue-lists";
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { createApp, ref } from "vue";


const listview = ref(null);
const valEle = ref(null);

createApp().component("demo", {
  template: `<div class='text-content'>  <span class = 'delete-icon'></span> </div>`,
  data() {
    return {
      data: {}
    };
  }
});

const data = [
  { text: 'Hennessey Venom', id: 'list-01' },
  { text: 'Bugatti Chiron', id: 'list-02', isChecked: true },
  { text: 'Bugatti Veyron Super Sport', id: 'list-03' },
  { text: 'SSC Ultimate Aero', id: 'list-04', isChecked: true },
  { text: 'Koenigsegg CCR', id: 'list-05' },
  { text: 'McLaren F1', id: 'list-06' },
  { text: 'Aston Martin One- 77', id: 'list-07', isChecked: true },
  { text: 'Jaguar XJ220', id: 'list-08' }];
const fields = { id: 'id', isChecked: 'isChecked' };

const onClick = () => {
  let selecteditem = listview.value.getSelectedItems();
  valEle.value.innerHTML = "";
  for (let i = 0; i < selecteditem["data"].length; i++) {
    let listData = document.createElement('p');
    listData.innerHTML = "text : " + selecteditem["text"][i] + " , " + "id : " + selecteditem["data"][i].id;
    valEle.value.append(listData);
  }
}

</script>
<style>
#sample-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
</style>
<template>
  <div class="control-section">
    <ejs-listview ref='listview' id='sample-list' :dataSource='data' showCheckBox=true :fields='fields'></ejs-listview>
    <br/>
    <ejs-button id="btn"  v-on:click.native="onClick" >Get Selected Items</ejs-button>
    <div ref='valEle' id="val"> </div>
  </div>
</template>
<style>
#sample-list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
</style>
<script>

import { ListViewComponent } from "@syncfusion/ej2-vue-lists";
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
import { createApp } from "vue";

createApp().component("demo", {
  template: `<div class='text-content'>  <span class = 'delete-icon'></span> </div>`,
  data() {
    return {
      data: {}
    };
  }
});

export default {
name: "App",
components: {
"ejs-listview":ListViewComponent,
"ejs-button":ButtonComponent
},
  data: function() {
    return {
      data: [
    { text: 'Hennessey Venom', id: 'list-01' },
    { text: 'Bugatti Chiron', id: 'list-02', isChecked: true },
    { text: 'Bugatti Veyron Super Sport', id: 'list-03'},
    { text: 'SSC Ultimate Aero', id: 'list-04', isChecked: true  },
    { text: 'Koenigsegg CCR', id: 'list-05' },
    { text: 'McLaren F1', id: 'list-06' },
    { text: 'Aston Martin One- 77', id: 'list-07', isChecked: true },
    { text: 'Jaguar XJ220', id: 'list-08' }],
    fields: { id: 'id', isChecked:'isChecked' },
    };
  },
  methods: {
    onClick: function(){
      let selecteditem =this.$refs.listview.getSelectedItems();
      this.$refs.valEle.innerHTML="";
      for(let i=0; i< selecteditem["data"].length; i++) {
      let listData = document.createElement('p');
      listData.innerHTML = "text : "+ selecteditem["text"][i]+" , "+"id : "+selecteditem["data"][i].id;
      this.$refs.valEle.append(listData);
      }
    }
  }
}
</script>