Search code examples
asp.netnested-checkboxes

asp.net list of grouped (nested) checkboxes


I want to create List of Grouped Checkboxes as follows:

[]Group1
  [] Item1
  [] Item2
[]Group2
  []Item1
  []Item2
  []Item3

Here Group# and item# are checkboxes. Does anyone know how to do this in asp.net. I am getting data from DataSet. One limitation is that I am not allowed to use third party tool/controls or jQuery.

Many thanks,


Solution

  • Use repeater (or nested repeaters) to generate layout and java-script for beahavior. For example, lets say your dataset has two tables - Groups and Items and there foreign key relation among tables named "FK_Groups_Items". Then you can repeater such as

    <ol>
    <asp:Repeater ID="Groups" runat="server">
    <itemtemplate>
       <ul>
       <asp:CheckBox runat="server" ID="Group" Text="'<%# Eval("Name") %>'" Value='<%# Eval("Value") %>' onclick="OnGroupClick">
       <p class="nested">
         <asp:CheckBoxList runat="server" ID="Items" DataSource='<%# ((DataRowView)Container.DataItem).CreateChildView("FK_Groups_Items") %>'> DataValueField="Value" DataTextField="Name" />
       </p>
       </ul>
    </itemtemplate>
    </asp:Repeater>
    </ol>
    

    and following js function

    function OnGroupClick(group) {
      for(item in group.getElementsByTagName('input')) {
         item.checked = group.checked;
      }
    }
    

    Disclaimer: untested code just to give an hint/idea of approach