The ListView supports checkbox in default and group-lists which is used to select multiple items.
The checkbox can be enabled by the showCheckBox
property.
The Checkbox will be useful in the scenario where we need to select multiple options. For Example, In Shipping cart we can be able to select or unselect the desired items before checkout and also it will be useful in selecting multiple items that belongs to same category using the group list.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component<{}, {}> {
//define the array of JSON
private data: { [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'},
];
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent id='list' dataSource={this.data} showCheckBox = {true} headerTitle='TO DO LIst' showHeader={true}></ListViewComponent>
);
}
}
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;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
constructor() {
super(...arguments);
//define the array of JSON
this.data = [
{ 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' },
];
}
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent id='list' dataSource={this.data} showCheckBox={true} headerTitle='TO DO LIst' showHeader={true}></ListViewComponent>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));
In ListView the checkbox can be positioned into either Left
or Right
side of the list-item text.
This can be achieved by checkBoxPositon
property. By default, checkbox will be positioned to Left
of list-item text.
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component<{}, {}> {
//define the array of JSON
private settings: { [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" }
];
private fields = { text: "text", id: "id" };
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent
id="list"
dataSource={this.settings}
fields={this.fields}
showCheckBox={true}
checkBoxPosition="Right"
/>
);
}
}
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;
}
import * as React from 'react';
import * as ReactDOM from "react-dom";
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
export default class App extends React.Component {
constructor() {
super(...arguments);
//define the array of JSON
this.settings = [
{ 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" }
];
this.fields = { text: "text", id: "id" };
}
render() {
return (
// specifies the tag to render the ListView component
<ListViewComponent id="list" dataSource={this.settings} fields={this.fields} showCheckBox={true} checkBoxPosition="Right"/>);
}
}
ReactDOM.render(<App />, document.getElementById('element'));