The CheckBoxList web control, which comes standard with Visual Studio .NET, can be used to quickly and
easily create multi-selection check box groups based on a number of data sources. Place a CheckBoxList
control on the form and bind the control to the appropriate data source (or add the necessary ListItems
either declaratively or in code if you want a static list) - that’s all there is to creating a list of
check box controls. You can even customize the appearance of the check box group by setting the format-
related properties as well as by specifying how items are ordered (horizontally or vertically) and the
number of columns to be used.
But sometimes we need more than a simple list of check box controls. What if we need to format each check
box item based on the underlying value, what if we want to add subitems underneath each check box control,
or what if we want to add some additional functionality that is implemented using JavaScript. Unfortunately,
we cannot hook into the creation of the various list items the same way we can handle the ItemCreated or
ItemDataBound events of the Repeater control or the DataGrid control (or any other control that inherits
from the BaseDataList control).
If we want to customize the look and feel of the CheckBoxList we need to create our own control to suit
our needs. In the following article we look at creating an enhanced CheckBoxList control that not only
allows us to easily create multi-selection check box groups but also provides additional functionality
that is not possible to implement with the standard CheckBoxList control alone.
The primary addition to the standard CheckBoxList control we have in mind is the ability to create
subitems underneath each check box list items (child check box list items). In addition, there are
a handful of minor and not so minor additions and the following list contains the key features for
the enhanced Checklist control we intend to create:
- Create multiple list levels: This means that each check box list item (parent) can have zero,
one or more subitems (children) In this example we create a Checklist with two levels (parent and
child) but we can easily build on this example and add more levels if needed.
- Expand and collapse child levels: A control with large number of subitems can become unwieldy
and difficult to work with. In those cases it helps if users can expand and collapse subitem groups
as needed so that users can focus on those items that are of interest.
- Check or uncheck multiple check box items (and subitems) with a single click: Checking or
unchecking all list items and the corresponding subitems can be time consuming if the Checklist
contains a many items and/or subitems and having a feature that allows users to check or uncheck
all check box items with a single click can be tremendously helpful and save a lot of time as well
as mouse clicks (Carpal Tunnel, anyone?).
We have one more requirement in addition to the ones listed above – we want the control to be XHTML
compliant and follow CSS best practices including avoiding the use of tables for layout purposes.
The utilization of CSS to handle the formatting of the control allows us to easily change the look
of the control without having to change and recompile the underlying code. Actually, this should
never be a requirement but be regarded as best practice for this or any other web-based project.