CheckBoxList Control in ASP.NET

There are several list controls available to ASP.NET. They are the DropDownList, ListBox, CheckBoxList, RadioButtonList and BulletedList controls. The one I will go over in this post is the CheckBoxList control.

The ASP.NET CheckBoxList control is used to create a defined list of options in which a user can choose from. With this control, you can select one item or multiple items. Each selectable item in a CheckBoxList control is considered a ListItem element. This control can be loaded manually through ASP.NET code (like my example) as well as from a data source.

The CheckBoxList control is part of the System.Web.UI.WebControls namespace.

–

Most common properties

AutoPostBack
A Boolean value that specifies whether the form should be posted immediately after one of the items changes select status or not.

CellPadding
The space, in pixels, between the cell walls and the check box group

DataSource
The data source to use

DataTextField
A field in the data source to be displayed in the check box group

DataValueField
A field in the data source that specifies the value of each selectable item in the check box group

id — A unique id for the control

OnSelectedIndexChanged
The name of the function to be executed when one of the items changes select status

RepeatColumns
The number of columns to use when displaying the check box group.

RepeatDirection
Specifies whether the check box group should be repeated horizontally or vertically. Legal values are “Horizontal” and “Vertical”.

RepeatLayout
The layout of the check box group. Can be “Table” or “Flow”.

runat
Specifies that the control is a server control. Must be set to “server”

TextAlign
On which side of the check box the text should appear (right or left)

-

Simple Example of the CheckBoxList Control

This example fills the control and displays the Selected Item in a label control when the button is accessed.

ASP.NET SOURCE

<asp:CheckBoxList ID="cblPlanets" runat="server" Width="109px">
    <asp:ListItem Value="1">Mercury</asp:ListItem>
    <asp:ListItem Value="2">Venus</asp:ListItem>
    <asp:ListItem Value="3">Earth</asp:ListItem>
    <asp:ListItem Value="4">Mars</asp:ListItem>
    <asp:ListItem Value="5">Jupiter</asp:ListItem>
    <asp:ListItem Value="6">Saturn</asp:ListItem>
    <asp:ListItem Value="7">Uranus</asp:ListItem>
    <asp:ListItem Value="8">Neptune</asp:ListItem>
</asp:CheckBoxList>

C# SOURCE

protected void btnSubmit_Click(object sender, EventArgs e)
{
  lblText.Text = "You selected: ";

  foreach (ListItem li in cblPlanets.Items)
  {
     if (li.Selected == true)
     {
        lblText.Text = lblText.Text += "~" + li.Text;
     }
   }
}

You can also fill the CheckBoxList control dynamically using the Page load event instead of ASP.NET code.

protected void Page_Load(object sender, EventArgs e)
{
  if (!Page.IsPostBack)
  {
    cblPlanets.Items.Add("Mercury");
    cblPlanets.Items.Add("Venus");
    cblPlanets.Items.Add("Earth");
    cblPlanets.Items.Add("Mars");
    cblPlanets.Items.Add("Jupiter");
    cblPlanets.Items.Add("Saturn");
    cblPlanets.Items.Add("Uranus");
    cblPlanets.Items.Add("Neptune");
  }
}

protected void btnSubmit_Click(object sender, EventArgs e)
{
  lblText.Text = "You selected: ";

  foreach (ListItem li in cblPlanets.Items)
  {
    if (li.Selected == true)
    {
      lblText.Text = lblText.Text += "~" + li.Text;
    }
  }
}

RESULT

-

As I mentioned at the beginning of this post, there are several list controls in ASP.NET. I plan on touching on the other list controls in future posts.

–

Related Content