Having trouble getting help?
Contact Support
Contact Support
Get selected items from EJ2 JavaScript ListView control
1 Mar 20258 minutes to read
In the ListView control, users can select one or more items. The getSelectedItems
API method can be used to retrieve details of the currently selected items from the ListView control.
This method is used to retrieve details of the currently selected item(s) from the list. It returns an object of type SelectedItem
for single selection or SelectedCollection
for multiple selections.
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 control
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 valElement = document.getElementById('val');
if (!valElement) return;
valElement.innerHTML = '';
// Create table rows in a fragment to minimize reflow
var fragment = document.createDocumentFragment();
// Create header row
var headerRow = document.createElement('tr');
['Text', 'Id'].forEach(function (text) {
var th = document.createElement('th');
th.textContent = text;
headerRow.appendChild(th);
});
fragment.appendChild(headerRow);
// Populate table rows
selectedItem.data.forEach(function (item, index) {
var row = document.createElement('tr');
row.id = index.toString();
row.innerHTML = `<td>${selectedItem.text[index]}</td><td>${item.id}</td>`;
fragment.appendChild(row);
});
// Append all elements at once
valElement.appendChild(fragment);
});
<!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/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet">
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
<script src="https://cdn.syncfusion.com/ej2/29.1.33/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>
<style>
#container {
display: flex;
}
#text {
margin-left: 10px;
margin-top: 20px;
}
body {
margin: 0;
}
#container {
width: 100%;
margin: 0 auto;
}
#element {
max-width: 350px;
margin: auto;
margin-top: 10px;
display: block;
border: 1px solid #dddddd;
border-radius: 3px;
}
</style>
</body>
</html>
#container {
visibility: hidden;
}
#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue','calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}