Get selected items from ListView in React ListView component

23 Jan 202511 minutes to read

The ListView component allows users to select single or multiple items. It provides an API to retrieve the selected items from the list. This API is called the getSelectedItems method.

getSelectedItems method

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 information about the selected list items:

Return type Purpose
text Returns the text content of selected list items
data Returns the complete data of selected list items, including all fields of the selected <li> elements
item Returns the collection of selected DOM list item elements

The following example demonstrates how to use the getSelectedItems method to retrieve and display information about selected items:

import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';
function App() {
  let listobj = null;
  // define the array of Json
  let 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 [state, SetState] = React.useState({
    selectedItemsValue: []
  });
  function getSelectedItems() {
    if (listobj) {
      SetState({
        selectedItemsValue: listobj.getSelectedItems().data
      });
    }
  }
  return (<div>
    <ListViewComponent id="list" dataSource={data} showCheckBox={true} ref={scope => {
      listobj = scope;
    }} />
    <ButtonComponent id="btn" onClick={getSelectedItems.bind(this)}>
      Get Selected Items
    </ButtonComponent>
    <div>
      <table>
        <tbody>
          <tr>
            <th>Text</th>
            <th>Id</th>
          </tr>

          {state.selectedItemsValue.map((item, index) => {
            return (<tr key={index}>
              <td>{item.text}</td>
              <td>{item.id}</td>
            </tr>);
          })}
        </tbody>
      </table>
    </div>
  </div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import { ButtonComponent } from '@syncfusion/ej2-react-buttons';

function App() {
  let listobj: ListViewComponent | null = null;
  // define the array of Json
  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" }
  ];
  const [state, SetState] = React.useState({
    selectedItemsValue: []
  });
  function getSelectedItems(): void {
    if (listobj) {
      SetState({
        selectedItemsValue: (listobj.getSelectedItems() as any).data
      });
    }
  }

  return (
    <div>
      <ListViewComponent
        id="list"
        dataSource={data}
        showCheckBox={true}
        ref={scope => {
          listobj = scope;
        }}
      />
      <ButtonComponent id="btn" onClick={getSelectedItems.bind(this)}>
        Get Selected Items
      </ButtonComponent>
      <div>
        <table>
          <tbody>
            <tr>
              <th>Text</th>
              <th>Id</th>
            </tr>

            {state.selectedItemsValue.map((item: any, index: number) => {
              return (
                <tr key={index}>
                  <td>{item.text}</td>
                  <td>{item.id}</td>
                </tr>
              );
            })}
          </tbody>
        </table>
      </div>
    </div>
  );
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));
#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}

#btn,
#val {
  margin-top: 30px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <title>Syncfusion React 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 React Components" />
    <meta name="author" content="Syncfusion" />
    <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-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-lists/styles/material.css" rel="stylesheet" />
    <link href="index.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
    <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id='element' style="margin:0 auto; max-width:400px;">
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>