Source view of CHECKBOXLIST.ASPX
DotNet Funda: Code Viewer
checkboxlist.aspx | checkboxlist.aspx.cs
Close Window  
<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 &lt;input type=checkbox&gt;&lt;/input&gt;.
            </td>
        </tr>
        <tr>
            <td colspan="2">&nbsp;</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 &lt;input type=checkbox&gt;&lt;/input&gt;.
        Its properties like <span class="DemoCP">BackColor, ForeColor, BorderColor, BorderStyle, BorderWidth, Height etc. </span>
        are implemented through style properites of &lt;input&gt;. 

        <p>&nbsp;</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
                        &lt;asp:CheckBoxList ID="CheckBoxList1" runat="Server"&gt;
                            &lt;asp:ListItem Text="Red" Value="red"&gt;&lt;/asp:ListItem&gt;
                            &lt;asp:ListItem Text="Blue" Value="blue"&gt;&lt;/asp:ListItem&gt;
                            &lt;asp:ListItem Text="Green" Value="green"&gt;&lt;/asp:ListItem&gt;
                        &lt;/asp:CheckBoxList&gt;
                        
                        // 2nd CheckBox List
                        &lt;asp:CheckBoxList ID="CheckBoxRunTime" runat="server"&gt;&lt;/asp:CheckBoxList&gt;
                        
                        // 3rd CheckBox List
                        &lt;asp:CheckBoxList ID="CheckBoxBind" runat="Server" DataTextField="Name" DataValueField="ID"  RepeatColumns="2" RepeatLayout="Flow"&gt;&lt;/asp:CheckBoxList&gt;
                        
                        // 4th CheckBox List
                        &lt;asp:CheckBoxList ID="CheckBoxBoundFire" runat="Server" DataTextField="Name" DataValueField="ID" OnSelectedIndexChanged="FireOnSelectedIndexChangd" AutoPostBack="true"  RepeatColumns="2" RepeatLayout="Table"&gt;&lt;/asp:CheckBoxList&gt;
                        
                        // 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();
                            }
                        }
                        
                        
                        /// &lt;summary&gt;
                        /// Fires when Checkbox is checked or unchecked
                        /// &lt;/summary&gt;
                        /// &lt;param name="sender"&gt;&lt;/param&gt;
                        /// &lt;param name="e"&gt;&lt;/param&gt;
                        protected void FireOnSelectedIndexChangd(object sender, EventArgs e)
                        {
                            try
                            {
                                lblLabel.Text = "Value of 1st CheckBoxList box is: &lt;b&gt;" + CheckBox1.SelectedValue.ToString() + "&lt;/b&gt;"
                                    + "&lt;hr /&gt;" +
                                    "Text of 2nd CheckBoxList is: &lt;b&gt;" + CheckBoxRunTime.SelectedItem.Text + "&lt;/b&gt; and its Value is: &lt;b/&gt;" + CheckBoxRunTime.SelectedItem.Value + "&lt;/b&gt;&lt;hr /&gt;";

                                // get all Selected item from the 3rd box.
                                string strSelectedItems = "Following items are selected from 3rd CheckBoxList.&lt;br /&gt;";
                                foreach (ListItem lst in CheckBoxBind.Items)
                                {
                                    if (lst.Selected)
                                        strSelectedItems += lst.Text + " > Value: " + lst.Value + "&lt;br /&gt;";
                                }
                                strSelectedItems += "&lt;hr /&gt;";

                                lblLabel.Text += strSelectedItems;

                                strSelectedItems = "&lt;hr /&gt;Following items are selected from 4th CheckBoxList.&lt;br /&gt;";
                                foreach (ListItem lst in CheckBoxBoundFire.Items)
                                {
                                    if (lst.Selected)
                                        strSelectedItems += lst.Text + " > Value: " + lst.Value + "&lt;br /&gt;";
                                }
                                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.&lt;br /&gt;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