Get selected items from listview in EJ2 JavaScript Listview control

8 Aug 20236 minutes to read

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

getSelectedItems method

This is used to get the details of the currently selected item from the list items. It returns the SelectedItem SelectedCollection

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 whole data of selected list items, i.e., returns the fields data of selected li.
item Returns the collections of list items 
//define the array of string
var 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' }
];

//Initialize ListView component
var listviewInstance = new ej.lists.ListView({
    //set the data to datasource property
    dataSource: data,

    //Enable checkbox
    showCheckBox: true,
});

//Render initialized ListView
listviewInstance.appendTo("#element");

var button = new ej.buttons.Button();
button.appendTo("#btn")

document.getElementById('btn').addEventListener('click', function() {
  var selecteditem =listviewInstance.getSelectedItems();
  var data = document.getElementById('val');
  data.innerHTML ="";
  var row1= document.createElement('tr');
  var header1= document.createElement('th');
  header1.innerHTML = 'Text';
  row1.append(header1);
  var header2= document.createElement('th');
  header2.innerHTML = 'Id';
  row1.append(header2);
  document.getElementById('val').append(row1);
 for(var i=0; i< selecteditem["data"].length; i++) { 
  var row2= document.createElement('tr');
  row2.setAttribute("id", i);
  var data1 = document.createElement('td');
  data1.innerHTML = selecteditem["text"][i];
  row2.append(data1);
  var data2 = document.createElement('td');
  data2.innerHTML = selecteditem["data"][i].id;
  row2.append(data2);
  document.getElementById('val').append(row2);
}

});
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 for ListView </title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Essential JS 2 for ListView UI Control">
    <meta name="author" content="Syncfusion">
    <link href="index.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/23.2.4/ej2-buttons/styles/material.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/23.2.4/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <div id="element"></div>
            <div id="text">
                <button id="btn">Get selected Items</button>
                <table id="val">
                </table>
        </div>
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>