Hide checkbox in ListView in Angular ListView component
12 Sep 202524 minutes to read
The checkbox of specific list items can be hidden by configuring the htmlAttributes property within the fields object. Using htmlAttributes, a custom CSS class can be added to individual list items to control checkbox visibility.
In this example, checkboxes are hidden for leaf nodes in a nested list structure. The e-checkbox-hidden CSS class is applied through the data source to items where checkboxes should be hidden. Here’s a sample data structure:
{
'text': 'New York',
'id': '3002',
'category': 'USA',
'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' }
}When hiding checkboxes, the list item’s selection behavior remains active and affects the getSelectedItems method results. To handle this, implement custom logic in the select event. This logic removes the e-active class from previously selected hidden-checkbox items while maintaining it only on the currently selected item.
Note: This implementation specifically targets list items with hidden checkboxes while preserving normal behavior for items with visible checkboxes.
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'
import { Component, ViewChild } from "@angular/core";
import { ListViewComponent } from "@syncfusion/ej2-angular-lists";
@Component({
imports: [
ListViewModule
],
standalone: true,
selector: 'my-app',
template: `
<div id="sample">
<ejs-listview #list id='folderCheckbox' [dataSource]='dataSource' [fields]='fields' [sortOrder]='Ascending' headerTitle='Mixed Leaf Checkbox Hidden List' [showHeader]=true [showCheckBox]=true (select)="onSelect($event)"></ejs-listview>
</div>
`,
})
export class AppComponent {
public dataSource: 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' },
}]
}]
}
];
public fields = { tooltip: 'text' };
@ViewChild('list') listViewInstance?: ListViewComponent;
Ascending: any;
onSelect(args: any) {
if (this.listViewInstance && this.listViewInstance.element) {
const normalElements =
this.listViewInstance.element.querySelectorAll('.e-checkbox-hidden');
// Remove 'e-active' class from all elements with 'e-checkbox-hidden' class
normalElements.forEach((element: Element) => {
(element as HTMLElement).classList.remove('e-active');
});
// Add 'e-active' class to the currently selected item if it has 'e-checkbox-hidden' class
if (args.item.classList.contains('e-checkbox-hidden')) {
args.item.classList.add('e-active');
}
}
}
}@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
#folderCheckbox {
border: 1px solid #dddddd;
border-radius: 3px;
margin: 5px;
width: 400px;
}
#folderCheckbox .e-checkbox-hidden .e-checkbox-wrapper {
visibility: hidden;
}import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));