<asp:Content ID="Content1" ContentPlaceHolderID="PlaceHolderHeader" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="PlaceHolderForTitleAndIntro" Runat="Server">
<table width="100%" cellpadding="2" cellspacing="0">
<tr valign="top" class="ArticleTitle">
<td style="padding-left:10px;" valign="middle">
asp:CheckBoxList control</td>
</tr>
<tr>
<td class="ArticleContents">
CheckBoxList control is a single control that groups a collection of checkable list items, all are rendered through an individual <input type=checkbox></input>.
</td>
</tr>
<tr>
<td colspan="2"> </td>
</tr>
</table>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="PlaceHolderForContents" Runat="Server">
<asp:Label ID="lblError" runat="server" SkinID="ErrorLabel" EnableViewState="False"></asp:Label>
<div class="ArticleContents">
CheckBoxList control is a single control that groups a collection of checkable list items, all are rendered through an individual <input type=checkbox></input>.
Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
are implemented through style properites of <input>.
<p> </p>
Following are some important properties that are very useful.
<table width="100%" class="TutoPropPlaceHolder" border="1" cellpadding="2" cellspacing="1">
<tr>
<td class="DemoCP">SelectedValue</td>
<td>
Gets the value of first selected item.
</td>
</tr>
<tr>
<td class="DemoCP">SelectedIndex</td>
<td>
Gets or Sets the index of the first selected item.
</td>
</tr>
<tr>
<td class="DemoCP">SelectedItem</td>
<td>
Gets the first selected item
</td>
</tr>
<tr>
<td class="DemoCP">TextAlign</td>
<td>
Gets or Sets the alignment of the checkbox text.
</td>
</tr>
<tr>
<td class="DemoCP">DataTextField</td>
<td>
Name of the data source field to supply the text of the items. (No need to set when you are adding items directly into .aspx page.)
</td>
</tr>
<tr>
<td class="DemoCP">DataValueField</td>
<td>
Name of the data source field to supply the value of the items. (No need to set when you are adding items directly into .aspx page.)
</td>
</tr>
<tr>
<td class="DemoCP">DataSourceID</td>
<td>
ID of the datasource component to provide data. (Only used when you have any DataSource component on the page, like SqlDataSource, AccessDataSource etc.)
</td>
</tr>
<tr>
<td class="DemoCP">DataSource</td>
<td>
The datasource that populates the items in the checkboxlist box. (Generally used when you are dynamically generating the items from Database.)
</td>
</tr>
<tr>
<td class="DemoCP">AutoPostBack</td>
<td>
true/false. If true, the form is automatically posted back to the server when user click any of the checkbox. It will also fire <span class="DemoCP">OnSelectedIndexChanged</span> method.
</td>
</tr>
<tr>
<td class="DemoCP">AppendDataBoundItems</td>
<td>
true/false. If true, the statically added item (added from .aspx page) is maintained when adding items dynamically (from code behind file) or items are cleared.
</td>
</tr>
<tr>
<td class="DemoCP">OnSelectedIndexChanged</td>
<td>
Method name that fires when user click any of the checkbox in the list. (Fires only when AutoPostBack=true.)
</td>
</tr>
<tr>
<td class="DemoCP">Items</td>
<td>
Gets the colleciton of the items from the list.
</td>
</tr>
<tr>
<td class="DemoCP">RepeatLayout</td>
<td>
table/flow. Gets or Sets the layout of the chekboxes when rendered to the page.
</td>
</tr>
<tr>
<td class="DemoCP">RepeatColumns</td>
<td>
Gets or Sets the no. of columns to display when the control is rendered.
</td>
</tr>
<tr>
<td class="DemoCP">RepeatDirection</td>
<td>
Horizontal/Vertical. Gets or Sets the the value to indicate whether the control will be rendered horizontally or vertically.
</td>
</tr>
</table>
<!-- START - Demo Section -->
<table class="DemoPlaceHolder" border="1" cellpadding="2" cellspacing="4">
<tr>
<td class="DemoTitle">
DEMO : CheckBoxList
</td>
<td align="right">
<a class="DemoShowSource" href="../../misc/codeviewer/default.aspx?pagename=~/tutorials/controls/checkboxlist.aspx" target="_blank">Show Source Code</a>
</td>
</tr>
<tr valign="Top">
<td>
<table width="100%">
<tr valign="Top">
<td>
1st CheckBox List<br />
<asp:CheckBoxList ID="CheckBox1" runat="Server">
<asp:ListItem Text="Red" Value="red"></asp:ListItem>
<asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
<asp:ListItem Text="Green" Value="green"></asp:ListItem>
</asp:CheckBoxList>
<hr />
4th CheckBox List, This will fire OnSelectedIndexChanged event<br />
<asp:CheckBoxList ID="CheckBoxBoundFire" runat="Server" DataTextField="Name" DataValueField="ID" OnSelectedIndexChanged="FireOnSelectedIndexChangd" AutoPostBack="true" RepeatColumns="2" RepeatLayout="table"></asp:CheckBoxList>
</td>
<td>
2nd CheckBox List<br />
<asp:CheckBoxList ID="CheckBoxRunTime" runat="server"></asp:CheckBoxList>
</td>
<td>
3rd CheckBox List<br />
<asp:CheckBoxList ID="CheckBoxBind" runat="Server" DataTextField="Name" DataValueField="ID" RepeatColumns="2" RepeatLayout="Flow"></asp:CheckBoxList>
</td>
</tr>
</table>
</td>
<td>
<asp:Label ID="lblLabel" runat="server" EnableViewState="False"></asp:Label>
</td>
</tr>
<tr>
<td colspan="2">
<!-- START - Server Side Code -->
<pre>
// 1st CheckBox List
<asp:CheckBoxList ID="CheckBoxList1" runat="Server">
<asp:ListItem Text="Red" Value="red"></asp:ListItem>
<asp:ListItem Text="Blue" Value="blue"></asp:ListItem>
<asp:ListItem Text="Green" Value="green"></asp:ListItem>
</asp:CheckBoxList>
// 2nd CheckBox List
<asp:CheckBoxList ID="CheckBoxRunTime" runat="server"></asp:CheckBoxList>
// 3rd CheckBox List
<asp:CheckBoxList ID="CheckBoxBind" runat="Server" DataTextField="Name" DataValueField="ID" RepeatColumns="2" RepeatLayout="Flow"></asp:CheckBoxList>
// 4th CheckBox List
<asp:CheckBoxList ID="CheckBoxBoundFire" runat="Server" DataTextField="Name" DataValueField="ID" OnSelectedIndexChanged="FireOnSelectedIndexChangd" AutoPostBack="true" RepeatColumns="2" RepeatLayout="Table"></asp:CheckBoxList>
// CODE BEHIND ///////////////////////////////////
// Generate the DataTable, its a kind of DataSource for the dropdown box
// :) Hey, Learn how to generate DataTable at runtime. Interesting ?
DataSet dSet = new DataSet();
DataTable dTable = new DataTable();
DataColumn colId = new DataColumn("ID");
try
{
dTable.Columns.Add(colId);
DataColumn colName = new DataColumn("Name");
dTable.Columns.Add(colName);
for (int i = 0; i < 10; i++)
{
object[] obj = { i.ToString(), "Name " + i.ToString() };
dTable.Rows.Add(obj);
}
// Add the generated table into dataset, so it will look like DataSet is populated through database
dSet.Tables.Add(dTable);
// Bind 3rd checkboxlist
// Now try to bind the checkboxlist
CheckBoxBind.DataSource = dSet.Tables[0].DefaultView;
CheckBoxBind.DataBind();
// Lets bind the 4th checkboxlist too
CheckBoxBoundFire.DataSource = dSet.Tables[0]; // you can specify only Table too, but it is suggested to user DefualtView property
CheckBoxBoundFire.DataBind();
}
catch (Exception ee)
{
lblError.Text = ee.ToString();
}
finally
{
dSet.Dispose();
dTable.Dispose();
}
}
/// <summary>
/// Fires when Checkbox is checked or unchecked
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void FireOnSelectedIndexChangd(object sender, EventArgs e)
{
try
{
lblLabel.Text = "Value of 1st CheckBoxList box is: <b>" + CheckBox1.SelectedValue.ToString() + "</b>"
+ "<hr />" +
"Text of 2nd CheckBoxList is: <b>" + CheckBoxRunTime.SelectedItem.Text + "</b> and its Value is: <b/>" + CheckBoxRunTime.SelectedItem.Value + "</b><hr />";
// get all Selected item from the 3rd box.
string strSelectedItems = "Following items are selected from 3rd CheckBoxList.<br />";
foreach (ListItem lst in CheckBoxBind.Items)
{
if (lst.Selected)
strSelectedItems += lst.Text + " > Value: " + lst.Value + "<br />";
}
strSelectedItems += "<hr />";
lblLabel.Text += strSelectedItems;
strSelectedItems = "<hr />Following items are selected from 4th CheckBoxList.<br />";
foreach (ListItem lst in CheckBoxBoundFire.Items)
{
if (lst.Selected)
strSelectedItems += lst.Text + " > Value: " + lst.Value + "<br />";
}
lblLabel.Text += strSelectedItems;
// Set the background color of the lable to the color that is selected in the 1st droddown box.
lblLabel.ForeColor = System.Drawing.ColorTranslator.FromHtml(CheckBox1.SelectedValue);
}
catch (Exception ee)
{
lblLabel.Text = "Please check at least one checkbox from 1st & 2nd CheckboxList.<br />Error occured: " + ee.Message.ToString();
lblLabel.ForeColor = System.Drawing.ColorTranslator.FromHtml("brown");
}
}
</pre>
<!-- END - Server Side Code -->
</td>
</tr>
</table>
<!-- END - Demo Section -->
</div>
<br />
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="PlaceHolderFooter" Runat="Server">
</asp:Content>
Go Top