Home > Articles > ASP.NET Ajax Articles > Checkbox list in Dropdown using Asp.net Ajax PopupControlExtender control

Checkbox list in Dropdown using Asp.net Ajax PopupControlExtender control

by Thamil   on Oct 04, 2013   Category: ASP.NET Ajax  | Level: Intermediate  |  Views: 39327    |  Points: 100   
Like this article? Bookmark and Share:
In this article I will explain how to display checkbox list on dropdown control using asp.net ajax PopupControlExtender control.

Introduction


Sometime we may have a requirement to select more then one value from dropdown list but we can’t select/choose the more then one value from asp.net dropdown list control. Here I’m explaining how to do that with ajax popupcontrolextender control.

Popupcontrolextender: 


It’s a asp.net ajax control which is used to attach any control to display with popup window and we can add server or html controls to display in popup window. This Popupcontrolextender control needs to be placed inside the update panel as shown below in sample code. In this control there are three important properties we need to use to achieve this functionality such as TargetControlID, PopupControlID and Position

Design the page as like below

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Checkboxlst_In_Dropdown._Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        .PnlDesign
        {
            border: solid 1px #000000;
            height: 150px;
            width: 330px;
            overflow-y:scroll;
            background-color: #EAEAEA;
            font-size: 15px;
            font-family: Arial;
        }
        .txtbox
        {
            background-image: url(../images/drpdwn.png);
            background-position: right top;
            background-repeat: no-repeat;
            cursor: pointer;
            cursor: hand;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <div>
        <asp:UpdatePanel ID="UpdatePanel1" runat="server">
            <ContentTemplate>
                <asp:TextBox ID="txtCustomer" Text="Select Customers" runat="server" CssClass="txtbox"
                    Height="20px" Width="322px"></asp:TextBox>
                <asp:Panel ID="PnlCust" runat="server" CssClass="PnlDesign">
                    <asp:CheckBoxList ID="cblCustomerList" runat="server">
                        <asp:ListItem>Customer One</asp:ListItem>
                        <asp:ListItem>Customer Two</asp:ListItem>
                        <asp:ListItem>Customer Three</asp:ListItem>
                        <asp:ListItem>Customer Four</asp:ListItem>
                        <asp:ListItem>Customer Five</asp:ListItem>
                        <asp:ListItem>Customer Six</asp:ListItem>
                        <asp:ListItem>Customer Seven</asp:ListItem>
                    </asp:CheckBoxList>
                </asp:Panel>
                 <asp:Button ID="Button1" runat="server" Text="Submit" onclick="Button1_Click" />
                <br />
                <cc1:PopupControlExtender ID="PceSelectCustomer" runat="server" TargetControlID="txtCustomer"
                    PopupControlID="PnlCust" Position="Bottom">
                </cc1:PopupControlExtender>
                <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </div>
    </form>
</body>
</html>


In the above design page we have used scriptmanager and updatd panel and inside update panel we have placed the textbox, panel and checkbox list then PopupControlExtender control.  So inside panel control we placed the checkbox with values here the main goal is when we click on textbox control panel, it needs to be displayed as a popup with values as like dropdown with check boxes for each values.

So set the PopupControlID as a PnlCust and TargetControlID as a txtCustomer in PopupControlExtender properties and set the position as bottom. Also display the dropdown image at right side corner of textbox so that it would display as like dropdown control.

protected void Button1_Click(object sender, EventArgs e)
        {
            for (int i = 0; i < cblCustomerList.Items.Count; i++)
            {
                if (cblCustomerList.Items[i].Selected == true)
                {
                    Label1.Text += cblCustomerList.Items[i].Text.ToString() + "</br>";
                }
            }
}

Above code will used to get the selected values from checkbox list.

Thanks for reading this article, I hope you enjoyed this article, provide your suggestions and comments.

 



Like this article? Bookmark and Share:

Most viewed Articles

User Comments


No response found, be the first to review this article.

Submit feedback about this article

Please sign in to post feedback

Latest Posts