Test your technical skills online, appear in Virtual Interview and be ready for job!
Twitter Twitter LinkedIn YouTube Google
Be Interview ready ! | Search
Author
ASP.NET Tutorials
Author
Sheo Narayan
Advertisements


Winners

Win Prizes

Announcements
Like us on Facebook

Silverlight Tutorials | Report a Bug in the Tutorial
Found interesting? Add this to:


asp:CheckBoxList control
CheckBoxList control is a single control that groups a collection of checkable list items, all are rendered through an individual <input type=checkbox></input>.
 
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 BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. are implemented through style properites of <input>.

 

Following are some important properties that are very useful.
SelectedValue Gets the value of first selected item.
SelectedIndex Gets or Sets the index of the first selected item.
SelectedItem Gets the first selected item
TextAlign Gets or Sets the alignment of the checkbox text.
DataTextField 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.)
DataValueField 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.)
DataSourceID ID of the datasource component to provide data. (Only used when you have any DataSource component on the page, like SqlDataSource, AccessDataSource etc.)
DataSource The datasource that populates the items in the checkboxlist box. (Generally used when you are dynamically generating the items from Database.)
AutoPostBack true/false. If true, the form is automatically posted back to the server when user click any of the checkbox. It will also fire OnSelectedIndexChanged method.
AppendDataBoundItems 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.
OnSelectedIndexChanged Method name that fires when user click any of the checkbox in the list. (Fires only when AutoPostBack=true.)
Items Gets the colleciton of the items from the list.
RepeatLayout table/flow. Gets or Sets the layout of the chekboxes when rendered to the page.
RepeatColumns Gets or Sets the no. of columns to display when the control is rendered.
RepeatDirection Horizontal/Vertical. Gets or Sets the the value to indicate whether the control will be rendered horizontally or vertically.
DEMO : CheckBoxList Show Source Code
1st CheckBox List



4th CheckBox List, This will fire OnSelectedIndexChanged event




2nd CheckBox List



3rd CheckBox List




                        // 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");
                            }
                        }