Dropdown with checkbox List Control in Asp.net

Dropdown with checkbox List Control in Asp.net

Step 1: Design Web form .aspx page

Css for Controls

<style type="text/css">

        .PnlDesign

        {

            background-color: #FFF;

            border: 1px solid #8D8D8D;

            min-height: 71px;

            color: #333333 !important;

            font-family: 'HelveticaNeueRegular' ,Arial,Helvetica,sans-serif !important;

            font-size: 12px !important;

            font-weight: normal !important;

            line-height: 20px !important;

            outline: medium none !important;

            padding-left: 4px !important;

            padding-top: 2px;

            text-decoration: none !important;

            text-indent: 0.01px;

            text-overflow: "";

            overflow: auto;

            width: 110px !important;

            float: left !important;

            text-align: left !important;

        }

        .PnlDesign table

        {

            float: left !important;

        }

        .txtbox

        {

            background-image: url("Images/downArrowGray20.fw.png") !important;

            background-position: 94px center !important;

            background-repeat: no-repeat !important;

            border-color: #8D8D8D #D9D9D9 #D9D9D9 #8D8D8D;

            border-style: solid;

            border-width: 1px;

            color: #333333 !important;

            font-family: 'HelveticaNeueRegular' ,Arial,Helvetica,sans-serif !important;

            font-size: 12px !important;

            font-weight: normal !important;

            height: 20px !important;

            line-height: 20px !important;

            outline: medium none !important;

            padding-left: 4px !important;

            padding-top: 2px;

            text-decoration: none !important;

            text-indent: 0.01px;

            text-overflow: "";

            width: 90px !important;

            padding-right: 20px !important;

        }

    </style>

    <div>

        <asp:ScriptManager ID="sm" runat="server">

        </asp:ScriptManager>

        <asp:TextBox ID="txtFO" Text="" runat="server" Style="cursor: Pointer;" ReadOnly="true"

            onkeypress="return false;" CssClass="txtbox" Height="20px"></asp:TextBox>

        <asp:Panel ID="PnlCust" runat="server" CssClass="PnlDesign">

            <asp:CheckBoxList ID="cblFOList" runat="server">

            </asp:CheckBoxList>

        </asp:Panel>

        <asp:PopupControlExtender ID="PceSelectCustomer" runat="server" TargetControlID="txtFO"

            PopupControlID="PnlCust" Position="Bottom">

        </asp:PopupControlExtender>

        <asp:Button ID="Btn" runat="server" Text="Fetch Values" OnClick="Btn_Click" />

    </div>

Step 2 : Logic on .Cs page

protected void Page_Load(object sender, EventArgs e)

    {

        if (!Page.IsPostBack)

        {

            bind_CHkLIst();

        }

    }

    public void bind_CHkLIst()

    {

        DataTable dt = new DataTable();

        dt.Columns.Add("Id", typeof(int));

        dt.Columns.Add("Name", typeof(string));

        dt.Rows.Add(1, "Kandy");

        dt.Rows.Add(2, "Sam");

        dt.Rows.Add(3, "Delhi");

        cblFOList.DataSource = dt;

        cblFOList.DataTextField = "Name";

        cblFOList.DataValueField = "Id";

        cblFOList.DataBind();

        txtFO.Text = "Select";

    }

    protected void Btn_Click(object sender, EventArgs e)

    {

        string Name = string.Empty;

        string Id = string.Empty;

        for (int i = 0; i < cblFOList.Items.Count; i++)

        {

            if (cblFOList.Items[i].Selected == true)

            {

                Name += cblFOList.Items[i].Text.ToString() + ",";

                Id += cblFOList.Items[i].Value.ToString() + ",";

            }

        }

        Response.Write(Name);

        Response.Write(Id);

    }

It Will look Like :-