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.
Give me a +1 if you think it was a good article. Thanks!