Get selected items from ListView in React ListView component

14 Apr 2021 / 2 minutes to read

Single or many items can be selected by users in the ListView component. 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

Source

Preview

index.tsx

index.html

index.css

index.jsx

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';

interface MyState {
  selectedItemsValue: any[];
}

export default class App extends React.Component<{}, MyState> {
  listobj: ListViewComponent | null = null;

  constructor(props: any) {
    super(props);
    this.state = {
      selectedItemsValue: []
    };
  }

  // define the array of Json
  private 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" }
  ];

  getSelectedItems(): void {
    if (this.listobj) {
      this.setState({
        selectedItemsValue: (this.listobj.getSelectedItems() as any).data
      });
    }
  }

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

              {this.state.selectedItemsValue.map((item: any, index: number) => {
                return (
                  <tr key={index}>
                    <td>{item.text}</td>
                    <td>{item.id}</td>
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('element'));

<!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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/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>
</head>

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

</html>

#list {
  display: block;
  max-width: 400px;
  margin: auto;
  border: 1px solid #dddddd;
  border-radius: 3px;
}
#btn, #val {
  margin-top:30px;
}

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';
export default class App extends React.Component {
    constructor(props) {
        super(props);
        this.listobj = null;
        // define the array of Json
        this.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" }
        ];
        this.state = {
            selectedItemsValue: []
        };
    }
    getSelectedItems() {
        if (this.listobj) {
            this.setState({
                selectedItemsValue: this.listobj.getSelectedItems().data
            });
        }
    }
    render() {
        return (<div>
        <ListViewComponent id="list" dataSource={this.data} showCheckBox={true} ref={scope => {
            this.listobj = scope;
        }}/>
        <ButtonComponent id="btn" onClick={this.getSelectedItems.bind(this)}>
          Get Selected Items
        </ButtonComponent>
        <div>
          <table>
            <tbody>
              <tr>
                <th>Text</th>
                <th>Id</th>
              </tr>

              {this.state.selectedItemsValue.map((item, index) => {
            return (<tr key={index}>
                    <td>{item.text}</td>
                    <td>{item.id}</td>
                  </tr>);
        })}
            </tbody>
          </table>
        </div>
      </div>);
    }
}
ReactDOM.render(<App />, document.getElementById('element'));

Please provide additional information

Thank you for your feedback and comments.We will rectify this as soon as possible!

Get selected items from ListView in React ListView component

getSelectedItems method

`getSelectedItems` method