How to use DropDownExtender in asp.net ajax

DropDownExtender in asp.net ajax
DropDownExtender is an asp.net ajax control toolkit's extender control. DropDownExtender can be attached to almost any asp.net web server control such as TextBox, Label, Panel etc. DropDownExtender control provide users a SharePoint style drop down menu. DropDownExtender displayed drop down menu merely a panel control or other container control.

The following example code uses a panel server control to display as DropDownExtender drop down menu. panel container contains a bulletedlist server control which display mode is LinkButton. so when user hover over the TextBox and click the TextBox control, they can select (click) an item from bulletedlist. mouse both left and right click on attached control display the DropDownExtender drop down menu.

DropDownExtender control have the following main properties those are TargetControlID, DropDownControlID and Animation. TragetControlID property value specify the ID of the server control which needs a drop down. DropDownControlID property value set the ID of the control which will be displayed as the drop down menu. Animation property allow the generic animations for the DropDownExtender control.

DropDownExtender OnShow animation will be played each time drop down menu is displayed and OnHide animation will be played each time the dropdown menu is hidden. ajax animation framework allow us to add awesome visual effects on DropDownExtender control.
UsingDropDownExtender.aspx

<%@ Page Language="C#" AutoEventWireup="true" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html>

<script runat="server">
    protected void BulletedList1_Click(object sender, BulletedListEventArgs e)
    {
        Label1.Text = "You clicked: " + BulletedList1.Items[e.Index].Text;
    }
</script>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>How to use DropDownExtender in asp.net ajax</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <h2 style="color:Green; font-style:italic;">Ajax Control Toolkit Example: How To Use DropDownExtender</h2>
        <hr width="575" align="left" color="LawnGreen" />
        <asp:ScriptManager 
            ID="ScriptManager1"
            runat="server"
            >
        </asp:ScriptManager>
        <cc1:DropDownExtender 
            ID="DropDownExtender1"
            runat="server"
            TargetControlID="TextBox1"
            DropDownControlID="Panel1"
            >
        </cc1:DropDownExtender>
        <asp:Label 
            ID="Label1" 
            runat="server"
            ForeColor="OrangeRed"
            Font-Bold="true"
            Font-Names="Courier New"
            Font-Size="Large"
            >
        </asp:Label>
        <br /><br />
        <asp:TextBox 
            ID="TextBox1"
            runat="server"
            Text="select a color"
            >
        </asp:TextBox>
        <asp:Panel 
            ID="Panel1"
            runat="server"
            BorderColor="Pink"
            BorderWidth="2"
            >
            <asp:BulletedList 
                ID="BulletedList1"
                runat="server"
                DisplayMode="LinkButton"
                OnClick="BulletedList1_Click"
                >
                <asp:ListItem>Crimson</asp:ListItem>
                <asp:ListItem>SeaGreen</asp:ListItem>
                <asp:ListItem>HotPink</asp:ListItem>
                <asp:ListItem>Olive</asp:ListItem>
            </asp:BulletedList>
        </asp:Panel>
    </div>
    </form>
</body>
</html>
Related asp.net ajax example