Get selected items from EJ2 TypeScript 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 
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') as HTMLElement).addEventListener('click', () => {
    const selectedItem =
        listviewInstance.getSelectedItems() as SelectedCollection;
    const valElement = document.getElementById('val');

    if (!valElement) return;

    valElement.innerHTML = '';

    // Create table rows in a fragment to minimize reflow
    const fragment = document.createDocumentFragment();

    // Create header row
    const headerRow = document.createElement('tr');
    ['Text', 'Id'].forEach((text) => {
        const th = document.createElement('th');
        th.textContent = text;
        headerRow.appendChild(th);
    });
    fragment.appendChild(headerRow);

    // Populate table rows
    (selectedItem.data as { [key: string]: any }[]).forEach((item, index) => {
        const 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/31.1.17/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/31.1.17/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>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></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>
    <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%;
}