Check list in EJ2 TypeScript ListView control

28 Jan 20258 minutes to read

The ListView control supports checkboxes in both default and group lists, allowing the selection of multiple items. The checkbox can be enabled using the showCheckBox property.

The checkbox feature is useful in scenarios where multiple options need to be selected. For example, in a shopping cart, users can select or deselect desired items before checkout. It is also useful for selecting multiple items that belong to the same category when using a group list.

import { ListView } from '@syncfusion/ej2-lists';

let listData: { [key: string]: Object }[] = [
    { text: 'Do Meditation', id: '1' },
    { text: 'Go Jogging', id: '2' },
    { text: 'Buy Groceries', id: '3' },
    { text: 'Pay Phone bill', id: '4' },
    { text: 'Play Football with your friends', id: '5' },
];

// Initialize the ListView control
let listObj: ListView = new ListView({

    //Set the defined data to the data source property
    dataSource: listData,

    headerTitle: 'To DO List',
    showHeader: true,

    //Set true to enable CheckBox
    showCheckBox: true
});

//Render the initialized ListView control
listObj.appendTo('#element');
<!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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.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>
<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>
    <style>
        #element {
            display: block;
            max-width: 350px;
            margin: auto;
            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%;
}

Checkbox Position

In ListView, the checkbox can be positioned on either the Left or Right side of the list-item text. This can be adjusted using the checkBoxPosition property. By default, the checkbox is positioned to the Left of the list-item text.

import { ListView } from '@syncfusion/ej2-lists';

//define the array of JSON
let data: { [key: string]: Object }[] = [
    { text: 'Hennessey Venom', id: 'list-01' },
    { text: 'Bugatti Chiron', id: 'list-02' },
    { text: 'Bugatti Veyron Super Sport', id: 'list-03' },
    { text: 'SSC Ultimate Aero', id: 'list-04' },
    { text: 'Koenigsegg CCR', id: 'list-05' },
    { text: 'McLaren F1', id: 'list-06' },
    { text: 'Aston Martin One- 77', id: 'list-07' },
    { text: 'Jaguar XJ220', id: 'list-08' },
    { text: 'McLaren P1', id: 'list-09' },
    { text: 'Ferrari LaFerrari', id: 'list-10' },
];

//Initialize ListView control
let listviewInstance: ListView = new ListView({
    //Set the data to datasource property
    dataSource: data,

    //Enable checkbox
    showCheckBox: true,

    //Set Checkbox position
    checkBoxPosition: 'Right'
});

//Render initialized ListView
listviewInstance.appendTo("#element");
<!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/28.2.3/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="https://cdn.syncfusion.com/ej2/28.2.3/ej2-lists/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>
    <style>
        #element {
            display: block;
            max-width: 400px;
            margin: auto;
            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%;
}