Having trouble getting help?
Contact Support
Contact Support
Hiding checkboxes in React ListView component
23 Jan 202524 minutes to read
The checkbox of any list item can be hidden by using htmlAttributes of the fields object. With the help of htmlAttributes, we can add a unique class to each list item that will be rendered from the data source. Using this CSS class, we can hide the checkbox of the list item.
In this sample, we have hidden multiple leaf nodes of a nested list. The e-checkbox-hidden class has been added in the data source where the checkbox needs to be hidden. Refer to the snippet below for a simple data source example:
{
'text': 'New York',
'id': '3002',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' }
}Even though we have hidden the checkbox, the functionality will remain the same for the list item, which might affect the getSelectedItems method’s result. To counteract that, we will follow a certain logic in the select event. The logic here is to remove the e-active class from the other checkbox hidden list items which will be added when we select an item, and retain e-active on the currently selected item.
In this process, we will exclude the list items with visible checkboxes and only consider the items with hidden checkboxes.
import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
import './index.css';
function App() {
//Define an array of JSON data
let dataSource = [
{
'text': 'Asia',
'id': '01',
'category': 'Continent',
'child': [{
'text': 'India',
'id': '1',
'category': 'Asia',
'child': [{
'text': 'Delhi',
'id': '1001',
'category': 'India',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Kashmir',
'id': '1002',
'category': 'India',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Goa',
'id': '1003',
'category': 'India',
'htmlAttributes': { 'class': 'e-file' },
},
]
},
{
'text': 'China',
'id': '2',
'category': 'Asia',
'child': [{
'text': 'Zhejiang',
'id': '2001',
'category': 'China',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Hunan',
'id': '2002',
'category': 'China',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Shandong',
'id': '2003',
'category': 'China',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
},
{
'text': 'North America',
'id': '02',
'category': 'Continent',
'child': [{
'text': 'USA',
'id': '3',
'category': 'North America',
'child': [{
'text': 'California',
'id': '3001',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'New York',
'id': '3002',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Florida',
'id': '3003',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file' },
}]
},
{
'text': 'Canada',
'id': '4',
'category': 'North America',
'child': [{
'text': 'Ontario',
'id': '4001',
'category': 'Canada',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Alberta',
'id': '4002',
'category': 'Canada',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Manitoba',
'id': '4003',
'category': 'Canada',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
},
{
'text': 'Europe',
'id': '03',
'category': 'Continent',
'child': [{
'text': 'Germany',
'id': '5',
'category': 'Europe',
'child': [{
'text': 'Berlin',
'id': '5001',
'category': 'Germany',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Bavaria',
'id': '5002',
'category': 'Germany',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Hesse',
'id': '5003',
'category': 'Germany',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
}]
}, {
'text': 'France',
'id': '6',
'category': 'Europe',
'child': [{
'text': 'Paris',
'id': '6001',
'category': 'France',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Lyon',
'id': '6002',
'category': 'France',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Marseille',
'id': '6003',
'category': 'France',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
},
{
'text': 'Australia',
'id': '04',
'category': 'Continent',
'child': [{
'text': 'Australia',
'id': '7',
'category': 'Australia',
'child': [{
'text': 'Sydney',
'id': '7001',
'category': 'Australia',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Melbourne',
'id': '7002',
'category': 'Australia',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Brisbane',
'id': '7003',
'category': 'Australia',
'htmlAttributes': { 'class': 'e-file' },
}]
}, {
'text': 'New Zealand',
'id': '8',
'category': 'Australia',
'child': [{
'text': 'Milford Sound',
'id': '8001',
'category': 'New Zealand',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Tongariro National Park',
'id': '8002',
'category': 'New Zealand',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Fiordland National Park',
'id': '8003',
'category': 'New Zealand',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
}]
}]
},
{
'text': 'Africa',
'id': '05',
'category': 'Continent',
'child': [{
'text': 'Morocco',
'id': '9',
'category': 'Africa',
'child': [{
'text': 'Rabat',
'id': '9001',
'category': 'Morocco',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Toubkal',
'id': '9002',
'category': 'Morocco',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Todgha Gorge',
'id': '9003',
'category': 'Morocco',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
}]
}, {
'text': 'South Africa',
'id': '10',
'category': 'Africa',
'child': [{
'text': 'Cape Town',
'id': '10001',
'category': 'South Africa',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Pretoria',
'id': '10002',
'category': 'South Africa',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Bloemfontein',
'id': '10003',
'category': 'South Africa',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
}
];
let fields = { tooltip: 'text' };
let listviewInstance;
function onSelect(args) {
// Selecting all the e-active elements from the list.
let normalElements = Array.prototype.slice.call(listviewInstance.curUL.getElementsByClassName('e-checkbox-hidden'));
// Looping through all the selected element and removing e-active class
// to avoid behaviour interference with getSelectedItems method
normalElements.forEach((element) => {
element.classList.remove('e-active');
});
// Finally adding e-active class to currently selected item except checkbox item.
// because if it is checkbox item their actions will taken care from the source side itself.
if (args.item.classList.contains('e-checkbox-hidden')) {
args.item.classList.add('e-active');
}
}
return (<div id="sample">
<ListViewComponent id='folderCheckbox' dataSource={dataSource} fields={fields} headerTitle='Mixed Leaf Checkbox Hidden List' showHeader="true" showCheckBox="true" select={onSelect.bind(this)} ref={(scope) => { listviewInstance = scope; }}></ListViewComponent>
</div>);
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));import * as ReactDOM from 'react-dom';
import * as React from 'react';
import { ListViewComponent } from '@syncfusion/ej2-react-lists';
function App() {
//Define an array of JSON data
let dataSource: { [key: string]: Object }[] = [
{
'text': 'Asia',
'id': '01',
'category': 'Continent',
'child': [{
'text': 'India',
'id': '1',
'category': 'Asia',
'child': [{
'text': 'Delhi',
'id': '1001',
'category': 'India',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Kashmir',
'id': '1002',
'category': 'India',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Goa',
'id': '1003',
'category': 'India',
'htmlAttributes': { 'class': 'e-file' },
},
]
},
{
'text': 'China',
'id': '2',
'category': 'Asia',
'child': [{
'text': 'Zhejiang',
'id': '2001',
'category': 'China',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Hunan',
'id': '2002',
'category': 'China',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Shandong',
'id': '2003',
'category': 'China',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
},
{
'text': 'North America',
'id': '02',
'category': 'Continent',
'child': [{
'text': 'USA',
'id': '3',
'category': 'North America',
'child': [{
'text': 'California',
'id': '3001',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'New York',
'id': '3002',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Florida',
'id': '3003',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file' },
}]
},
{
'text': 'Canada',
'id': '4',
'category': 'North America',
'child': [{
'text': 'Ontario',
'id': '4001',
'category': 'Canada',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Alberta',
'id': '4002',
'category': 'Canada',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Manitoba',
'id': '4003',
'category': 'Canada',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
},
{
'text': 'Europe',
'id': '03',
'category': 'Continent',
'child': [{
'text': 'Germany',
'id': '5',
'category': 'Europe',
'child': [{
'text': 'Berlin',
'id': '5001',
'category': 'Germany',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Bavaria',
'id': '5002',
'category': 'Germany',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Hesse',
'id': '5003',
'category': 'Germany',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
}]
}, {
'text': 'France',
'id': '6',
'category': 'Europe',
'child': [{
'text': 'Paris',
'id': '6001',
'category': 'France',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Lyon',
'id': '6002',
'category': 'France',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Marseille',
'id': '6003',
'category': 'France',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
},
{
'text': 'Australia',
'id': '04',
'category': 'Continent',
'child': [{
'text': 'Australia',
'id': '7',
'category': 'Australia',
'child': [{
'text': 'Sydney',
'id': '7001',
'category': 'Australia',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Melbourne',
'id': '7002',
'category': 'Australia',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Brisbane',
'id': '7003',
'category': 'Australia',
'htmlAttributes': { 'class': 'e-file' },
}]
}, {
'text': 'New Zealand',
'id': '8',
'category': 'Australia',
'child': [{
'text': 'Milford Sound',
'id': '8001',
'category': 'New Zealand',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Tongariro National Park',
'id': '8002',
'category': 'New Zealand',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Fiordland National Park',
'id': '8003',
'category': 'New Zealand',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
}]
}]
},
{
'text': 'Africa',
'id': '05',
'category': 'Continent',
'child': [{
'text': 'Morocco',
'id': '9',
'category': 'Africa',
'child': [{
'text': 'Rabat',
'id': '9001',
'category': 'Morocco',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Toubkal',
'id': '9002',
'category': 'Morocco',
'htmlAttributes': { 'class': 'e-file' },
},
{
'text': 'Todgha Gorge',
'id': '9003',
'category': 'Morocco',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
}]
}, {
'text': 'South Africa',
'id': '10',
'category': 'Africa',
'child': [{
'text': 'Cape Town',
'id': '10001',
'category': 'South Africa',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Pretoria',
'id': '10002',
'category': 'South Africa',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' },
},
{
'text': 'Bloemfontein',
'id': '10003',
'category': 'South Africa',
'htmlAttributes': { 'class': 'e-file' },
}]
}]
}
];
let fields: object = { tooltip: 'text' };
let listviewInstance: ListViewComponent;
function onSelect(args: SelectEventArgs) {
// Selecting all the e-active elements from the list.
let normalElements: HTMLElement[] = Array.prototype.slice.call((listviewInstance as any).curUL.getElementsByClassName('e-checkbox-hidden'));
// Looping through all the selected element and removing e-active class
// to avoid behaviour interference with getSelectedItems method
normalElements.forEach((element) => {
element.classList.remove('e-active');
});
// Finally adding e-active class to currently selected item except checkbox item.
// because if it is checkbox item their actions will taken care from the source side itself.
if (args.item.classList.contains('e-checkbox-hidden')) {
args.item.classList.add('e-active');
}
}
return (
<div id="sample">
<ListViewComponent id='folderCheckbox' dataSource={dataSource} fields={fields} headerTitle='Mixed Leaf Checkbox Hidden List' showHeader="true" showCheckBox="true" select={onSelect.bind(this)} ref={(scope) => { listviewInstance = scope; }} ></ListViewComponent>
</div>
)
}
export default App;
ReactDOM.render(<App />, document.getElementById('element'));#loader {
color: #008cff;
height: 40px;
width: 30%;
position: absolute;
font-family: 'Helvetica Neue', 'calibiri';
font-size: 14px;
top: 45%;
left: 45%;
}
#folderCheckbox {
border: 1px solid #dddddd;
border-radius: 3px;
margin: 5px;
width: 400px;
}
#folderCheckbox .e-checkbox-hidden .e-checkbox-wrapper {
visibility: hidden;
}<!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-react-lists/styles/material.css" rel="stylesheet" />
<link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-react-buttons/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>