Hide checkbox in ListView
21 Dec 202222 minutes to read
The checkbox of the any list item can be hidden by using htmlAttributes of fields object. With the help of htmlAttributes we can add unique class to each list item that will be rendered from the data source, from the CSS class we can hide the checkbox of the list item.
In this sample, we had hidden the multiple leaf node of nested list. The e-checkbox-hidden class has been added in the data source where the checkbox needs to be hidden. Refer the below snippet for 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 will be same for the list item which might affect the getSelectedItems method. So, to counteract that we will follow certain logic in the select event. The Logic here is to remove the e-active class from the other checkbox hidden list item which will be added when we select on that item and retain e-active on currently selected item.
NOTE
In this process we will exclude the visible checkbox list items and only consider the hidden checkbox items.
@using Syncfusion.EJ2
@using Syncfusion.EJ2.Lists;
<!-- ListView element -->
<ejs-listview id="folderCheckbox" dataSource="(IEnumerable<object>)ViewBag.dataSource" showHeader="true" headerTitle="Mized Leaf Checkbox Hidden" select="onSelect" showCheckBox="true">
<e-listview-fieldsettings tooltip="text" text="text"></e-listview-fieldsettings>
</ejs-listview>
<style>
#folderCheckbox {
border: 1px solid #dddddd;
border-radius: 3px;
width: 350px;
margin: auto;
}
#folderCheckbox .e-checkbox-hidden .e-checkbox-wrapper {
visibility: hidden;
}
</style>
<script>
function onSelect(args) {
var listviewInstance = document.getElementById("folderCheckbox").ej2_instances[0];
// Selecting all the e-active elements from the list.
var normalElements = Array.prototype.slice.call(listviewInstance.element.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');
}
}
</script>using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
namespace WebApplication1.Controllers
{
public class ListViewController : Controller
{
public IActionResult list()
{
List<object> listdata = new List<object>();
listdata.Add(new
{
text = "Asia",
id = "01",
category = "Continent",
child = new List<object>() { new { text = "India", id = "1", category = "Asia",
child= new List<object>() {
new { id= "1001", text= "Delhi", category= "India",htmlAttributes= new { @class= "e-file e-checkbox-hidden" } },
new {text= "Kashmir", id= "1002", category= "India",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "Goa",id= "1003", category= "India",htmlAttributes= new { @class= "e-file" } }
}
},
new { text = "China",id = "2",category = "Asia",
child = new List<object>() {
new { text = "Zhejiang", id = "2001", category = "China",htmlAttributes= new { @class= "e-file" } },
new {text= "Hunan",id= "2002", category= "China",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "Shandong", id= "2003",category= "China",htmlAttributes= new { @class= "e-file" }}
}
}
}
});
listdata.Add(new
{
text = "North America",
id = "02",
category = "Continent",
child = new List<object>() { new { text = "USA", id = "3", category = "North America",
child= new List<object>() {
new {text= "California", id= "3001", category= "USA",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "New York",id= "3002", category= "USA",htmlAttributes= new { @class= "e-file e-checkbox-hidden" } },
new { text= "Florida",id= "3003", category= "USA" ,htmlAttributes= new { @class= "e-file" }}
}
},
new { text = "Canada",id = "4",category = "North America",
child = new List<object>() {
new { text = "Ontario", id = "4001", category = "Canada",htmlAttributes= new { @class= "e-file e-checkbox-hidden" } },
new {text= "Alberta",id= "4002", category= "Canada",htmlAttributes= new { @class= "e-file" }},
new { text= "Manitoba", id= "4003",category= "Canada",htmlAttributes= new { @class= "e-file" }}
}
}
}
});
listdata.Add(new
{
text = "Europe",
id = "03",
category = "Continent",
child = new List<object>() { new { text = "Germany", id = "5", category = "Europe",
child= new List<object>() {
new {text= "Berlin", id= "5001", category= "Germany",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "Bavaria",id= "5002", category= "Germany",htmlAttributes= new { @class= "e-file" } },
new { text= "Hesse",id= "5003", category= "Germany" ,htmlAttributes= new { @class= "e-file e-checkbox-hidden" }}
}
},
new { text = "France",id = "6",category = "Europe",
child = new List<object>() {
new { text = "Paris", id = "6001", category = "France" ,htmlAttributes= new { @class= "e-file" }},
new {text= "Lyon",id= "6002", category= "France",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "Marseille", id= "6003",category= "France",htmlAttributes= new { @class= "e-file" }}
}
}
}
});
listdata.Add(new
{
text = "Australia",
id = "04",
category = "Continent",
child = new List<object>() { new { text = "Australia", id = "7", category = "Australia",
child= new List<object>() {
new {text= "Sydney", id= "7001", category= "Australia",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "Melbourne",id= "7002", category= "Australia" ,htmlAttributes= new { @class= "e-file" }},
new { text= "Brisbane",id= "7003", category= "Australia" ,htmlAttributes= new { @class= "e-file" }}
}
},
new { text = "New Zealand",id = "8",category = "Australia",
child = new List<object>() {
new { text = "Milford Sound", id = "8001", category = "New Zealand",htmlAttributes= new { @class= "e-file" } },
new {text= "Tongariro National Park",id= "8002", category= "New Zealand",htmlAttributes= new { @class= "e-file" }},
new { text= "Fiordland National Park", id= "8003",category= "New Zealand",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }}
}
},
}
});
listdata.Add(new
{
text = "Africa",
id = "05",
category = "Continent",
child = new List<object>() { new { text = "Morocco", id = "9", category = "Africa",
child= new List<object>() {
new {text= "Rabat", id= "9001", category= "Morocco",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "Toubkal",id= "9002", category= "Morocco",htmlAttributes= new { @class= "e-file" } },
new { text= "Todgha Gorge",id= "9003", category= "Morocco" ,htmlAttributes= new { @class= "e-file e-checkbox-hidden" }}
}
},
new { text = "South Africa",id = "10",category = "Africa",
child = new List<object>() {
new { text = "Cape Town", id = "10001", category = "South Africa" ,htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new {text= "Pretoria",id= "10002", category= "South Africa",htmlAttributes= new { @class= "e-file e-checkbox-hidden" }},
new { text= "Bloemfontein", id= "10003",category= "South Africa",htmlAttributes= new { @class= "e-file" }}
}
},
}
});
ViewBag.dataSource = listdata;
return View();
}
}
}