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 |
import { ListView, SelectedCollection } from '@syncfusion/ej2-lists';
import { Button } from '@syncfusion/ej2-buttons';
//define the array of string
let data: { [key: string]: Object }[] = [
{ 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 the ListView control
let listviewInstance: ListView = new ListView({
//set the data to the dataSource property
dataSource: data,
//Enable check box
showCheckBox: true,
});
//Render the initialized ListView
listviewInstance.appendTo("#element");
let button: Button = new Button();
button.appendTo("#btn")
document.getElementById('btn').addEventListener('click', () => {
let selecteditem: SelectedCollection = listviewInstance.getSelectedItems() as SelectedCollection;
let data: HTMLElement = document.getElementById('val');
data.innerHTML = "";
let row1: HTMLTableRowElement = document.createElement('tr');
let header1: HTMLTableHeaderCellElement = document.createElement('th');
header1.innerHTML = 'Text';
row1.appendChild(header1);
let header2 = document.createElement('th');
header2.innerHTML = 'Id';
row1.appendChild(header2);
document.getElementById('val').appendChild(row1);
for (let i: number = 0; i < (selecteditem["data"] as { [key: string]: object }[]).length; i++) {
let row2: HTMLTableRowElement = document.createElement('tr');
row2.setAttribute("id", i.toString());
let data1: HTMLElement = document.createElement('td');
data1.innerHTML = selecteditem["text"][i];
row2.appendChild(data1);
let data2: HTMLElement = document.createElement('td');
data2.innerHTML = (selecteditem["data"] as { [key: string]: object }[])[i].id.toString();
row2.appendChild(data2);
document.getElementById('val').appendChild(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="//cdn.syncfusion.com/ej2/21.2.3/ej2-base/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
<link href="//cdn.syncfusion.com/ej2/21.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
<script src="systemjs.config.js"></script>
</head>
<body>
<div id='loader'>Loading....</div>
<div id='container'>
<div id='element'></div>
<div id="text">
<button id="btn">Get selected Items</button>
<table id="val">
</table>
</div>
</div>
</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%;
}
#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;
}