Having trouble getting help?
Contact Support
Contact Support
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%;
}