Hide checkbox in EJ2 JavaScript ListView control

1 Mar 202524 minutes to read

The checkbox of any list item can be hidden by using the htmlAttributes of the fields object. With the help of htmlAttributes, a unique class can be added to each list item that is rendered from the data source, allowing you to hide the checkbox of the list item via that CSS class.

In this sample, multiple leaf nodes of a nested list have been hidden. 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.

    {
        'text': 'New York',
        'id': '3002',
        'category': 'USA',
        'htmlAttributes': { 'class': 'e-file e-checkbox-hidden' }
    }

Even though we have hidden the checkbox, the functionality remains the same for the list item, which might affect the getSelectedItems method. To counter this, we implement certain logic in the select event. The logic here is to remove the e-active class from other checkbox-hidden list items that get added when selecting that item, and retain e-active on the currently selected item.

This process excludes the visible checkbox list items and only considers the hidden checkbox items.

var 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'
            },
        }
        ]
    }]
}
];

//Initialize ListView control
var listviewInstance = new ej.lists.ListView({
    //set the data to datasource property
    dataSource: dataSource,

    // map the groupBy field with category column
    fields: {
        tooltip: 'text'
    },

    headerTitle: 'Mixed Leaf Checkbox Hidden List ',
    showHeader: true,
    showCheckBox: true,
    select: onSelect
});
listviewInstance.appendTo('#folderCheckbox');

function onSelect(args) {
    // Selecting all the e-active elements from the list.
    var 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');
    }
}
export var 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'
            },
        }
        ]
    }]
}
];
<!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/30.1.37/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/30.1.37/ej2-popups/styles/material.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/30.1.37/dist/ej2.min.js" type="text/javascript"></script>
    <script src="es5-datasource.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    <div id="container">
        <div id="sample">
            <!-- ListView element -->
            <div id="folderCheckbox" tabindex="1"></div>
        </div>
    </div>

    <script>
        var ele = document.getElementById('container');
        if (ele) {
            ele.style.visibility = "visible";
        }   
    </script>
    <script src="index.js" type="text/javascript"></script>
    <style>
        #folderCheckbox {
            border: 1px solid #dddddd;
            border-radius: 3px;
            width: 350px;
            margin: auto;
        }

        #folderCheckbox .e-checkbox-hidden .e-checkbox-wrapper {
            visibility: hidden;
        }
    </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%;
}