ASP.NET AJAX DropDownExtender - Tips and Tricks

Posted by: Suprotim Agarwal , on 6/29/2008, in Category ASP.NET AJAX
Views: 142385
Abstract: The DropDownExtender is an ASP.NET AJAX control that can be attached to almost any ASP.NET control to provide a drop-down menu. In this article, we will see some tips and tricks that can be applied to a DropDownExtender control.
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
Drop Down Extender
 
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.
DropDownExtenderLeft
 
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:
DropDownExtender
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>
DropDownExtenderWidth
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.
If you liked the article,  Subscribe to my RSS Feed. 
 
 
Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles
Suprotim Agarwal, ASP.NET Architecture MVP, MCSD, MCAD, MCDBA, MCSE, is the CEO of A2Z Knowledge Visuals Pvt. He primarily works as an Architect Consultant and provides consultancy on how to design and develop .NET centric database solutions.

Suprotim is the founder and primary contributor to DotNetCurry, DNC .NET Magazine, SQLServerCurry and DevCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls. and is authoring another one at The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Sofie Marti on Tuesday, August 19, 2008 9:37 PM
Brilliant!! You solved 2 main problems my team was facing..
Comment posted by vipul on Wednesday, August 20, 2008 1:33 AM
It is gr8
Comment posted by Tanner on Wednesday, August 20, 2008 10:27 AM
Good article.  However some of the javascript does not work for me even after modifying control names.
Comment posted by Suprotim Agarwal on Wednesday, August 20, 2008 12:13 PM
Sofie, Vipul: Thanks for the comments

Tanner: All the tips shown below have been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008). Make sure you read the introduction portion of this article to download the correct version.
Comment posted by amrelgarhy on Thursday, August 21, 2008 7:03 AM
Tip 3: How to keep the DropDown expanded and show the Panel when first loaded
function pageLoad()
    {
          var d = $get('TextBox1');
          d.click();
    }
-----------------------
"d.click()" will work just in the IE browser and will not fire in the firefox, so take care from that.
Comment posted by amrelgarhy on Thursday, August 21, 2008 7:05 AM
But for me, this is the best post about the dropdownextender, advanced and simple in the same time, thanks
Comment posted by Michelle on Thursday, September 25, 2008 6:27 PM
I'm using a gridview in the panel to show multiColumn dropdown. Do you know how to show the row is selected when there is text in the textbox?
Comment posted by omel on Sunday, September 28, 2008 11:10 PM
i'm using textbox call gridview to call data for my dropdownlist extender but cannot pass the value.  The textbox name is correct name. Why?. Anyone can help me.  TQ
Comment posted by Suprotim Agarwal on Monday, September 29, 2008 3:07 AM
amrelgarhy: Thanks!!

Michelle: You could handle the Row_Created event. Check this article of mine to borrow some ideas:
http://www.dotnetcurry.com/ShowArticle.aspx?ID=123

Omel: Kindly explain the issue in detail. It's not very clear from what you have posted.

Comment posted by Morteza on Friday, October 31, 2008 10:33 AM
Great Article!
but this line did not work in Firefox and Chrome:
   $get('panelItems').style.width = $get('TextBox1').clientWidth;

for fixing it, you should add "px" after "clientWidth":
   $get('panelItems').style.width = $get('TextBox1').clientWidth+"px";
Comment posted by Suprotim Agarwal on Sunday, November 2, 2008 1:42 AM
Thanks Morteza for the handy tip!
Comment posted by siva on Tuesday, December 30, 2008 9:12 AM
I have used dropdown extender in one of the application that i worked on...Its pretty cool..however, it  does not emulate a real dropdown, like highlighing the text with blue color, using up and down arrows to make a selection, etc.,,anyone else had gone through this ?any ideas on how to make all this happen
Comment posted by Dropdown Scrolls away from the textbox on Tuesday, February 3, 2009 5:31 AM
Suprotim,
Thanks for a vey useful article. I am trying to use DropDown Extender as you have shown. the only difference being my textbox and panel is inside a div that has scrollbars. So, my code looks something like below. The problem is that the Dropdown panel leaves the textbox behind and scrolls along with the scrollbar. Any idea what I might be doing wrong. Any help is appreciated.
<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div style="float: left; width: 350px; height: 300px; border: solid 1px black; overflow: auto;">
                <div id="divInner" style="float: left; width: 325px; height: 500px;">
                    <asp:TextBox ID="TextBox1" runat="server" Style="float: left; margin-top: 50px;"></asp:TextBox>
                    <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>
                </div>
            </div>
            <cc1:DropDownExtender ID="TextBox1_DropDownExtender" runat="server" DynamicServicePath=""
                Enabled="True" DropDownControlID="panelItems" TargetControlID="TextBox1">
            </cc1:DropDownExtender>
        </div>
    </form>
Comment posted by Cristian on Monday, March 2, 2009 9:59 AM
Hi, I'm using MasterPage and the next line doesn't work:

var chngPosition = $find('TextBox1_DropDownExtender')._dropPopupPopupBehavior;

the error message is:

'_dropPopupPopupBehavior' is null or not an object

Help me please, thanks
Comment posted by Suprotim Agarwal on Monday, March 2, 2009 11:46 AM
Cristian: Try using the Control.ClientID when accessing controls in MasterPages
Comment posted by Simmi on Monday, March 9, 2009 4:29 AM
Good
Comment posted by Tom on Wednesday, March 18, 2009 2:28 PM
This is a great article.  Do you have any examples on how to fill the Dropdown from a database?
Comment posted by Suprotim Agarwal on Friday, March 20, 2009 4:59 AM
Tom: You mean connecting a DropDownExtender to a db. Take a look over here: http://forums.asp.net/t/1316153.aspx
Comment posted by Rahul on Monday, May 18, 2009 5:06 AM
Hi,
Do you know how to align the always visible drop down extender while the page is resized? I'm in deep trouble with this issue, because if the page is resized or user uses ctrl+/ctrl- the alignments will fail in Firefox.
If you have any possible solutions, please let me know....
Comment posted by Rahul on Monday, May 18, 2009 6:42 AM
Hi,
Do you know how to align the always visible drop down extender while the page is resized? I'm in deep trouble with this issue, because if the page is resized or user uses ctrl+/ctrl- the alignments will fail in Firefox.
If you have any possible solutions, please let me know....
Comment posted by Rahul on Monday, May 18, 2009 8:06 AM
Hi,
Do you know how to align the always visible drop down extender while the page is resized? I'm in deep trouble with this issue, because if the page is resized or user uses ctrl+/ctrl- the alignments will fail in Firefox.
If you have any possible solutions, please let me know....
Comment posted by sekhar on Monday, June 1, 2009 11:51 PM
Hi...pls give the solution for this post.......

Thanks for a vey useful article. I am trying to use DropDown Extender as you have shown. the only difference being my textbox and panel is inside a div that has scrollbars. So, my code looks something like below. The problem is that the Dropdown panel leaves the textbox behind and scrolls along with the scrollbar. Any idea what I might be doing wrong. Any help is appreciated.
<form id="form1" runat="server">
        <div>
            <asp:ScriptManager ID="ScriptManager1" runat="server">
            </asp:ScriptManager>
            <div style="float: left; width: 350px; height: 300px; border: solid 1px black; overflow: auto;">
                <div id="divInner" style="float: left; width: 325px; height: 500px;">
                    <asp:TextBox ID="TextBox1" runat="server" Style="float: left; margin-top: 50px;"></asp:TextBox>
                    <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>
                </div>
            </div>
            <cc1:DropDownExtender ID="TextBox1_DropDownExtender" runat="server" DynamicServicePath=""
                Enabled="True" DropDownControlID="panelItems" TargetControlID="TextBox1">
            </cc1:DropDownExtender>
        </div>
    </form>
Comment posted by Babu on Wednesday, June 3, 2009 7:02 AM
how to make unvisable the drow down arrow in the dropdownextedner?
Comment posted by Dominik on Thursday, June 11, 2009 11:01 AM
I have a little problem...

I want to show the DropDown on hover and hide it on unhover. I tried with the onmouseover event and it works fine, but i need to click anywhere on the page to hide the DropDown.  

Does anyone knows how to implement this issue??

Thanks in advance,

Dominik.
Comment posted by Dominik on Thursday, June 11, 2009 11:03 AM
Hi Babu,

you can set the DropArrowImageUrl property to an empty gif image.
Comment posted by Ramani Sandeep on Saturday, August 1, 2009 2:08 AM
<div>
        <asp:Panel ID="panelItems" runat="server" BorderColor="Aqua" BorderWidth="1">
             <asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox>
            <asp:Button ID="Button1" runat="server" Text="Search" />
            <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>
        <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>

i want that when i click on textbox2 the dropdown disapear .
what i want is i want that let the user type text in textbox2 & click on search button & i want to search the records from BulletedList & shows to user..

can u help me..
Comment posted by krishna on Monday, February 1, 2010 2:16 AM
How to get intellisense for " ._dropWrapperHoverBehavior_onhover()"
Comment posted by Rob on Wednesday, August 25, 2010 3:52 PM
Hi

I have a sidebar menu. There's not a lot of room, I'd like to use the Ajax DropDown so that only items at the top level hierarchy are displayed until the user clicks.

I currently have one DropDown stacked on top of another (ultimately there will be approx 10).
I've got the drop down working with an OnShow/FadeIn animation. The problem is, the text that appears in the drop down is displayed over the Drop Down below it.

The behaviour I'd like can be seen at the page: http://www.asp.net/ajax/ajaxcontroltoolkit/samples/dropdown/dropdown.aspx On this page you can see that "Drop Down Properties" moved down the screen to make way for "Drop Down Description"

I have pasted my code below. Could anyone tell me what I've done wrong?

Thanks

Rob.


    <%@ Master Language="C#" AutoEventWireup="true" CodeFile="Main.master.cs" Inherits="RDM.Main" %>
    <%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
    <!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>Untitled Page</title>
        <asp:ContentPlaceHolder ID="head" runat="server">
        </asp:ContentPlaceHolder>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <div id="wrapper">
            <div id="header">
                <span id="websiteName">Reference Data Load Manager</span><br />
            </div>
            <span id="topbar">
                <asp:Label ID="lblPageName" runat="server" Text="Page Name Goes Here"></asp:Label>
            </span>
            <div id="toolbar">
                <asp:Button ID="btnDataLoad" runat="server" Text="Execute Data Load" OnClick="btnDataLoad_Click"
                    CssClass="Button" Enabled="false" />
                <asp:Image ID="Image1" runat="server" CssClass="Rubbish" />
                <br />
                <asp:Label ID="lblBODIJobStatus" runat="server" Text="" BackColor="#9999FF" Font-Italic="True"
                    ForeColor="White"></asp:Label>
                <asp:Timer ID="timLoadJob" runat="server" Enabled="False" Interval="2000" OnTick="timerTick">
                </asp:Timer>
            </div>
            <div id="sidebar">
                <asp:Label ID="lblBTF" runat="server" Text="(BTF) Bache Trade Load" />
                <asp:DropDownExtender ID="ddeBTF" runat="server" TargetControlID="lblBTF" DropDownControlID="pnlBTF">
                    <Animations>
                    <OnShow>
                        <Sequence>                    
                            <HideAction Visible="true" />                                          
                            <FadeIn  Duration=".5" Fps="10" />          
                        </Sequence>
                    </OnShow>
                    <OnHide>
                        <Sequence>                        
                            <FadeOut Duration=".5" Fps="10" />
                            <HideAction Visible="false" />
                            <StyleAction Attribute="display" Value="none"/>
                        </Sequence>
                    </OnHide>
                </Animations>
                </asp:DropDownExtender>
                <asp:Panel ID="pnlBTF" runat="server">
                    <a href="BacheAccountSettings.aspx">Bache Account Mappings</a><br />
                    <a href="BacheAccountSettingsDetail.aspx">Create New Record</a><br />
                    <a href="TradeMapping.aspx">Bache to TC Mappings</a><br />
                    <a href="TradeMappingDetail.aspx">Create New Record</a><br />
                    <a href="AjaxBODI.aspx?btf">Run DI Job</a>
                </asp:Panel>
                <br />
                <asp:Label ID="lblBIM" runat="server" Text="(BIM) Bache Initial Margin" />
                <asp:DropDownExtender ID="DropDownExtender1" runat="server" TargetControlID="lblBIM" DropDownControlID="pnlBIM">
                    <Animations>
                    <OnShow>
                        <Sequence>                    
                            <HideAction Visible="true" />                                          
                            <FadeIn  Duration=".5" Fps="10" />          
                        </Sequence>
                    </OnShow>
                    <OnHide>
                        <Sequence>                        
                            <FadeOut Duration=".5" Fps="10" />
                            <HideAction Visible="false" />
                            <StyleAction Attribute="display" Value="none"/>
                        </Sequence>
                    </OnHide>
                </Animations>
                </asp:DropDownExtender>
                <asp:Panel ID="pnlBIM" runat="server">
                    <a href="BacheProductMappings.aspx">Bache Product Mappings</a><br />
                    <a href="BacheProductMappingsDetail.aspx">Create New Record</a><br />
                    <a href="BacheProductLimitMappings.aspx">Bache Product Limit Mappings</a><br />
                    <a href="BacheProductLimitMappingsDetail.aspx">Create New Record</a><br />
                    <a href="AjaxBODI.aspx?btf">Run DI Job</a>
                </asp:Panel>
                <br />
            </div>
            <div id="mainContent">
                <asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
                </asp:ContentPlaceHolder>
                <asp:SqlDataSource ID="dsArcReference" runat="server" ConnectionString="<%$ ConnectionStrings:ARC_REFERENCEConnectionString %>"
                    SelectCommand="select ACCOUNT_SOURCE_ID as 'SourceID',
       [ACCOUNT_BTF_GROUP_COMPANY] as 'GroupCompany',
       [ACCOUNT_BTF_PORTFOLIO] as 'Portfolio',
       [ACCOUNT_BTF_ON_BEHALF_COMPANY] as 'OnBehalfComp',
       [ACCOUNT_BTF_ASSIGNED_TRADER] as 'AssignedTrader'
       from dbo.REF_BACHE_ACCOUNT" UpdateCommand="update dbo.REF_BACHE_ACCOUNT
    set [ACCOUNT_BTF_GROUP_COMPANY] = @GroupCompany,
    [ACCOUNT_BTF_PORTFOLIO] = @Portfolio,
    [ACCOUNT_BTF_ON_BEHALF_COMPANY] = @OnBehalfComp,
    [ACCOUNT_BTF_ASSIGNED_TRADER] = @AssignedTrader
    where [ACCOUNT_SOURCE_ID]=@SourceID">
                    <UpdateParameters>
                        <asp:Parameter />
                        <asp:Parameter Name="ACCOUNT_SOURCE_ID" />
                    </UpdateParameters>
                </asp:SqlDataSource>
            </div>
            <asp:Label ID="lblError" runat="server" CssClass="ErrorText"> </asp:Label>
            <div id="footerBar">
                <asp:Label ID="Label1" runat="server" Text="Arcadia Petrolium"></asp:Label>
            </div>
        </div>
        </form>
    </body>
    </html>
    
Comment posted by Martin on Friday, September 17, 2010 11:14 AM
Hi there thanks for these tips, I've added Tip 2: 'How to keep the DropDownExtender always visible' but the dropdown box and down arrow don't always layer correctly over the textbox, when pressing F11 to toggle full screen, pressing F5 to refresh fixes the misalignmnet, any ideas why this would happen and how to fix it?

Here's a code snippet, but I don't think there's anything unusal with the containing table and I havn't specified any syle position or z-index.
                            <tr>
                                <td style="width:300px" valign="top" align="left" class="ContentHomeNarrative">
                                <asp:label ID="lblLandSales" runat="server" Width="290px" Height="20px" CssClass="LandSales"></asp:label>
                                <ajax:DropDownExtender runat="server" ID="ddeLandSales" TargetControlID="lblLandSales" DropDownControlID="pnlLandSales"  Enabled="true" HighlightBackColor="White" HighlightBorderColor="black"  BehaviorID="ddeLandSales"></ajax:DropDownExtender>
                                <asp:Panel ID="pnlLandSales" runat="server" BorderColor="black" BorderWidth="1" BackColor="white" width="290px">
                                    <div style="vertical-align:top; height: 152px; overflow:auto;width:290px; background-color:#E5E5E5">
                                    <asp:datagrid width="290px" ID="grdLandSales" runat="server"  AutoGenerateColumns="false" BorderWidth="0" ShowHeader="false" ShowFooter="false"  ItemStyle-VerticalAlign="Top" ItemStyle-Horizontalalign="left" cellpadding="1" CellSpacing="0" EnableViewState="true" style="background-image: url(images/landsales_bg.gif);  background-repeat: repeat-x;" GridLines="None">
                                        <Columns>
                                        <asp:TemplateColumn HeaderText="" ItemStyle-Wrap="false" ItemStyle-HorizontalAlign="left" ItemStyle-Width="290px">
                                           <ItemTemplate>
                                                <asp:Label ID="lblLandSales" Text='<%# LandSales(NVL(DataBinder.eval(Container.DataItem, "Title")),NVL(DataBinder.eval(Container.DataItem, "ReadMorePageId")),NVL(DataBinder.eval(Container.DataItem, "DocumentPath")),NVL(DataBinder.eval(Container.DataItem, "DocumentFileName")),NVL(DataBinder.eval(Container.DataItem, "URL")),NVL(DataBinder.eval(Container.DataItem, "CSSClass")),NVL(DataBinder.eval(Container.DataItem, "UserLog")),NVL(DataBinder.eval(Container.DataItem, "ControlId")),NVL(DataBinder.eval(Container.DataItem, "PageControlId")),NVL(DataBinder.eval(Container.DataItem, "ContentId")))%>' runat="server"/>
                                            </ItemTemplate>
                                        </asp:TemplateColumn>
                                        </Columns>
                                   </asp:datagrid></div></asp:Panel></td></tr>
                            <tr><td><div style="width:50px; height:10px"></div></td></tr>
  
Comment posted by darkpitt on Saturday, November 13, 2010 6:14 AM
Not sure if anyone posted a response on how to fix the dropdown alignment on left issue, but this was my fix

<body title="test master page" style="margin:0px">

    <form id="form1" name="form1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var infochngPosition = $find('<%= infolinks_DropDownExtender.ClientID %>')._dropPopupPopupBehavior;
            infochngPosition.set_positioningMode(2);
        }

    </script>
Comment posted by darkpitt on Saturday, November 13, 2010 6:47 AM
Not sure if anyone posted a response on how to fix the dropdown alignment on left issue, but this was my fix

<body title="test master page" style="margin:0px">

    <form id="form1" name="form1" runat="server">
    <script type="text/javascript">
        function pageLoad() {
            var infochngPosition = $find('<%= infolinks_DropDownExtender.ClientID %>')._dropPopupPopupBehavior;
            infochngPosition.set_positioningMode(2);
        }

    </script>
Comment posted by Keimer on Monday, November 15, 2010 1:49 AM
Thanks darkpitt for the fix. It was troubling me from a long time
Comment posted by MANIKANTA on Thursday, February 10, 2011 10:08 PM
ITS GREAT ARTICLE
Comment posted by ashishnh33 on Saturday, April 9, 2011 12:04 AM
function pageLoad()

    {

          var d = $get('TextBox1');

          d.click();

    }

   </script>

of Tip3  is not working in FireFox and Crome, Its working only in IE.
Any solutions?
Comment posted by asdasd on Wednesday, June 15, 2011 7:57 AM
sdfdsfdsf
Comment posted by Ashish Pandey on Monday, January 2, 2012 4:39 AM
Hi,

I was reading your article and I would like to appreciate you for making it very simple and understandable. This article gives me a basic idea of Ajax Toolkit DropDownExtender in ASP.Net and it will help me a lot. Thanks for sharing with us. Check out this link too its also having nice post with wonderful explanation on Ajax Toolkit DropDownExtender in ASP.Net.....

http://mindstick.com/Articles/d3b09793-a9a3-4661-9264-64bce5c8ba0b/?Ajax%20Toolkit%20DropDownExtender%20in%20ASP.Net

Thank you very much! Frown

Comment posted by yy on Tuesday, July 9, 2013 6:01 AM
how to use dropdownextender with listview control ??? listview has been binding with dataset... Thanks in advance.. plz help
Comment posted by manikanta on Monday, August 19, 2013 5:32 AM
it's easy for understanding,great articale
Comment posted by Je on Tuesday, April 8, 2014 8:23 PM
how to make the dropdown extender remain on the same position as the target control if i have a page that has scrollbar?

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel