ASP.NET AJAX DropDownExtender - Tips and Tricks
The DropDownExtender is an ASP.NET AJAX control that can be attached to almost any ASP.NET control to provide a drop-down menu. For example: If you have a TextBox and a Panel control (with a checkboxlist), and you want to give the TextBox a drop-down menu, then just apply the DropDownExtender to the TextBox and set the DropDownControlID to the Panel. In this article, we will see some tips and tricks that can be applied to a DropDownExtender control.
I assume you have some basic experience developing ASP.NET Ajax applications and have installed the ASP.NET Ajax Library and ASP.NET Control Toolkit. As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008).
All the tips shown below have been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008).
Tip 1: How to attach a DropDownExtender to a TextBox and show a Panel in the dropdown
Drag and drop a ScriptManager to the page. Then drag and drop a Panel (panelItems) to the page. Now add a BulletedList to it and add some ListItems.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="panelItems" runat="server" BorderColor="Aqua" BorderWidth="1">
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem Text="Item 1"/>
<asp:ListItem Text="Item 2"/>
<asp:ListItem Text="Item 3"/>
</asp:BulletedList>
</asp:Panel>
Now drag and drop a TextBox control outside the Panel. If you want to attach a DropDownExtender to the TextBox, then in the design mode, click on the smart tag of the TextBox > Add Extender > Choose the ‘DropDownExtender’ > OK.
If you go back to the ‘Source’ view, you will find the newly created DropDownExtender. Set the DropDownControlId to panelItems.
<cc1:DropDownExtender ID="TextBox1_DropDownExtender" runat="server"
DynamicServicePath="" Enabled="True" DropDownControlID="panelItems" TargetControlID="TextBox1">
</cc1:DropDownExtender>
The entire code will look similar to the following.
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="panelItems" runat="server" BorderColor="Aqua" BorderWidth="1">
<asp:BulletedList ID="BulletedList1" runat="server">
<asp:ListItem Text="Item 1"/>
<asp:ListItem Text="Item 2"/>
<asp:ListItem Text="Item 3"/>
</asp:BulletedList>
</asp:Panel>
<br />
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<cc1:DropDownExtender ID="TextBox1_DropDownExtender" runat="server"
DynamicServicePath="" Enabled="True" DropDownControlID="panelItems" TargetControlID="TextBox1">
</cc1:DropDownExtender>
</div>
</form>
</body>
</html>
Run the code. When you hover over the TextBox, you will see a dropdown. Click on it to view the Panel with the BulletedList as shown below
Tip 2: How to keep the DropDownExtender always visible
The dropdownlist as demonstrated above is visible only when the user hovers over the textbox. If you want to override this behavior and keep it always visible, then here is a trick I got from this post. Add the following script tag in the <body> element as shown below:
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function pageLoad()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
$find('TextBox1_DropDownExtender').unhover = VisibleMe;
}
function VisibleMe()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
}
</script>
... ScriptManager and other Controls come here
</body>
</html>
If you run the code, you will see that the dropdown is always visible.
Tip 3: How to keep the DropDown expanded and show the Panel when first loaded
The default behavior is that the panel is shown only once the user clicks on the textbox. If you want the Panel to be visible as a dropdown when the page is loaded, add the following script
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function pageLoad()
{
var d = $get('TextBox1');
d.click();
}
</script>
... ScriptManager and other Controls come here
</body>
</html>
Tip 4: How to align DropDownExtender panel to left instead of right
By default, the panel drops down to the right. However if you need to change this behavior, use the following script. The script uses the set_positioningMode() and sets it to 2 (left). The default value is 3 (right).
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function pageLoad()
{
var chngPosition = $find('TextBox1_DropDownExtender')._dropPopupPopupBehavior;
chngPosition.set_positioningMode(2);
}
</script>
... ScriptManager and other Controls come here
</body>
</html>
When you run this code, it produces the following result.
Tip 5: How can I make the width of the DropDownExtender (panel) the same as that of the TextBox
The width of the panel that is visible during the drop-down is not the same as that of the targetcontrol of the DropDownExtender. It is displayed to the right by default and adjusts its width according to the contents of the panel as shown below:
However, if you want to manually adjust the width of the drop down and make it the same as that of the textbox, use this code:
<body>
<form id="form1" runat="server">
<script type="text/javascript">
function pageLoad()
{
$get('panelItems').style.width = $get('TextBox1').clientWidth;
}
... ScriptManager and other Controls come here
</body>
</html>
Note: Make sure you set the ‘ScrollBars’ of the panelItems to ‘Both’ or else the content could flow out of the panel.
Well those were some tips associated with the DropDownExtender. As future versions of the toolkit are released, we should be hopeful that there will exist easier ways, of achieving the functionality discussed in this article. I hope this article was useful and I thank you for viewing it.
This article has been editorially reviewed by Suprotim Agarwal.
C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.
We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).
Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.
Click here to Explore the Table of Contents or Download Sample Chapters!
Was this article worth reading? Share it with fellow developers too. Thanks!
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of
DotNetCurry,
DNC Magazine for Developers,
SQLServerCurry and
DevCurry. He has also authored a couple of books
51 Recipes using jQuery with ASP.NET Controls and
The Absolutely Awesome jQuery CookBook.
Suprotim has received the prestigious Microsoft MVP award for Fifteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.
Get in touch with him on Twitter @suprotimagarwal or at LinkedIn