Checkbox List Grouping - How to Group the Checkbox List using JQuery

Why Do We Need Grouping in Checkbox List?


According to Wikipedia a checkbox may be defined as below
A checkbox (check box, tickbox, tick box) is a Graphical control element that permits the user to make a binary choice, i.e. a choice between one of two possible mutually exclusive options. For example, the user may have to answer 'yes' (checked) or 'no' (not checked) on a simple yes/no question.
And a checkbox list is used for enabling the users to select values from various options, i.e when the user has given a lot many options to select from then the checkbox list comes to picture.

Grouping in Checkbox list


The grouping concept comes here when we got a situation to show the options of a checkbox list in a parent and child manner. See the below image which has got a lot of options from those some are headings and some are descriptions.



So in this case when you bind the checkbox list from your code then you will get to see the first checkbox list i.e "Normal Checkbox List" but you may not want to show them as it is because its got of some hierarchy within it. So your ultimate aim is to represent the data like the second part "Grouped Checkbox List", from which it is clearly distinguishable that which is a parent and which is a child.
Grouping in checkbox list in very important because it gives the user a visual effect of the headings and contents, categories and sub categories.
Here in this article we will see how to create groups in checkbox list.

Download Source Code Here

How to Make Grouping in Checkbox List


Ok, let's see how to introduce a grouping in the checkbox list. First we will design the page where we will have the two checkbox lists as shown in the above image. Design, wow that's my favorite thing. Here I will be using the BootStrap concepts to make the page looks beautiful. By the way those designs will not be our main point of discussion here.

Create the Checkbox Lists in ASPX Page


<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Grouping Checkbox List - Demo Application on Checkbox Grouping using jQuery</title>
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link href="css/custom.css" rel="stylesheet" />
</head>
<body onload="foo()">
    <form id="form1" runat="server">
        <div class="container">
            <div class="row">
                <div class="col-md-12">
                    <div class="panel panel-default" style="margin-top: 10px;">
                        <div class="panel-heading">
                            <h3 class="panel-title">Grouping Checkbox List - Demo Application on Checkbox Grouping using jQuery</h3>
                        </div>
                        <div class="panel-body">
                            <div class="row" style="margin-left: 28px;">
                                <div class="col-md-4 col-md-offset-1">
                                    <div class="panel panel-default" style="margin-top: 10px;">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Normal Checkbox List</h3>
                                        </div>
                                        <div class="panel-body">
                                            <asp:CheckBoxList ID="cblDemoNormal" runat="server" />
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md-2 pull-left" style="margin-top: 140px; margin-left: -83px;">
                                    <button type="button" class="btn btn-default btn-lg pull-right">
                                        <span class="glyphicon glyphicon-hand-right"></span>
                                    </button>
                                </div>
                                <div class="col-md-4 col-md-offset-1 pull-left" style="margin-left: 20px;">
                                    <div class="panel panel-default" style="margin-top: 10px;">
                                        <div class="panel-heading">
                                            <h3 class="panel-title">Grouped Checkbox List</h3>
                                        </div>
                                        <div class="panel-body">
                                            <asp:CheckBoxList ID="cblDemo" runat="server" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="panel-footer">
                            <h3 class="panel-title">For more articles on ASP.NET, SQL Server, Jquery please do visit   &nbsp<a href="http://www.icodefor.net" class="fotterA"><span class="orange dontChangeToUpperCase">i<span style="color: #16A1E7">Code</span>For<span style="color: #16A1E7">.NET</span></span></a></h3>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="Scripts/checkBoxGrp.js"></script>
    <script type="text/javascript">
        function foo() {
            HideProductGroupCheckBox("cblDemo", "0,3,6", "Bold");
        }

    </script>
</body>
</html>
Here is the html content of the aspx page. Just copy all the contents and add those to your webpage.
The normal checkbox list is below with and id of cblDemoNormal
<asp:CheckBoxList ID="cblDemoNormal" runat="server" />
And the grouped checkbox list is here with an id of cblDemo
<asp:CheckBoxList ID="cblDemo" runat="server" />
Now our next task is to bind these two checkbox lists from code behind. Here I will bind those with some demo and static data.
protected void Page_Load(object sender, EventArgs e)
   {
       BindCheckBox();
   }

   private void BindCheckBox()
   {
       List<string> lstData = new List<string>() 
                               {"Heading 1",
                               "Description 1",
                               "Description 2",
                               "Heading 2",
                               "Description 3",
                               "Description 4",
                               "Heading 3",
                               "Description 5"};           

       cblDemoNormal.DataSource = lstData;
       cblDemoNormal.DataBind();

       cblDemo.DataSource = lstData;
       cblDemo.DataBind();
   }
Now we have imported some data to the above checkbox lists from code behind and our sole purpose now is to introduce grouping in the checkbox lists. Let the first one i.e the normal checkbox list as it is and we will introduce grouping in the second one.


For this I am calling a Javacsript function in the onload() function of the body like this
<body onload="foo()"><body>
And here is the function foo() which calls the HideProductGroupCheckBox().
function foo() {
            HideProductGroupCheckBox("cblDemo", "0,3,6", "Bold");
        }
In the HideProductGroupCheckBox() function I am getting the checkbox list id and a "," separated string of all the checkbox numbers those are the group headers and the css class that I am going to apply to those parent elements.
<script type="text/javascript">
        //Parameter Description
        //checkBoxGroupId : Id of the CheckBox group
        //checkBoxIdArray : index of the checkbox to hide
        //cssClassForLabel : Css class name to add to the label for the Checkbox
        function HideProductGroupCheckBox(checkBoxGroupId, checkBoxIdArray, cssClassForLabel) {
            if (checkBoxIdArray != '') {
                //Splits out the ids
                var checkBoxGroupIdArray = checkBoxIdArray.split(',');
                for (var i = 0; i < checkBoxGroupIdArray.length; i++) {
                    // Trim the excess whitespace.
                    checkBoxGroupIdArray[i] = checkBoxGroupIdArray[i].replace(/^\s*/, "").replace(/\s*$/, "");
                    // Hide the checkbox
                    $("input[id='" + checkBoxGroupId + "_" + checkBoxGroupIdArray[i] + "']").css('display', 'none');
                    // Add class to checkbox label
                    $("label[for='" + checkBoxGroupId + "_" + checkBoxGroupIdArray[i] + "']").addClass(cssClassForLabel);
                }
            }
        }
    
This is the Javascript which is doing the magic. This bunch of JQuery code iterates for all the elements and hide the checkboxes of those we want as parent and apply some css to those.
And finally our checkbox list will look like below. And we have successfully converted a conventional checkbox list into a hierarchical checkbox list.
Checkbox list Grouping


 Happy Coding...

1 comment: