RadDropDownList won't close when selecting item

13 posts, 1 answers
  1. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 19 Apr 2013 Link to this post

    I have a number of RadDropDownLists on a page inside a RadAjaxPanel.  I populate them in the code-behind.

    However, when I select an item, the list won't close.  It stays open until I click somewhere outside of the RadDropDownList.

    Any ideas?  I'm running the latest install of the ASP.Net AJAX tools.

    Thanks!

  2. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 22 Apr 2013 Link to this post

    Hi Jason,

    I tested the described scenario but couldn't reproduce the issue you are specifying. I've attached the sample page I used. Can you confirm whether this page is working correctly on your end.
     

    All the best,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 22 Apr 2013 Link to this post

    It works fine all by itself, but when I put it into my master page it won't close when I select an item.

    Here is the test page.  
    <asp:Content ID="Content2" ContentPlaceHolderID="cphContent" runat="server">
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <telerik:RadDropDownList runat="server" ID="RadDropDownList1">
                </telerik:RadDropDownList>
            </telerik:RadAjaxPanel>
    </asp:Content>

    See the master page content below.  


    <div id="mainMenu">
        <asp:LoginView ID="ctlLoginViewMainMenu" runat="server">
            <AnonymousTemplate></AnonymousTemplate>
            <LoggedInTemplate>
                <telerik:RadTabStrip ID="ctlMainMenuTabs" runat="server">
                    <Tabs>
                        <telerik:RadTab Text="Home" runat="server" NavigateUrl="~/Default.aspx"></telerik:RadTab>
                        <telerik:RadTab Text="Queue" runat="server" NavigateUrl="~/Queue.aspx"></telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Sex Offenders" NavigateUrl="~/SexOffenders.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Terminated SO" NavigateUrl="~/TerminatedOffenders.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Offices" NavigateUrl="~/MaintainOffices.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Cities" NavigateUrl="~/MaintainCities.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Lat/Long" NavigateUrl="~/MaintainLatLong.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Offenses" NavigateUrl="~/MaintainOffenses.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Statutes" NavigateUrl="~/MaintainStatutes.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="DNA" NavigateUrl="~/CompleteDna.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Reports" NavigateUrl="~/Reports/Default.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Search" NavigateUrl="~/Search.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Users" NavigateUrl="~/Users/Default.aspx">
                        </telerik:RadTab>
                        <telerik:RadTab runat="server" Text="Public Users/Notifications" NavigateUrl="~/Public/Default.aspx">
                            <Tabs>
                                <telerik:RadTab runat="server" Text="Users" NavigateUrl="~/Public/Accounts.aspx" Visible="false"></telerik:RadTab>
                                <telerik:RadTab runat="server" Text="Notifications" NavigateUrl="~/Public/Notifications.aspx" Visible="false"></telerik:RadTab>
                            </Tabs>
                        </telerik:RadTab>
                    </Tabs>
                </telerik:RadTabStrip>
            </LoggedInTemplate>
        </asp:LoginView>
        <div class="clear"></div>
    </div>
    <div id="content">
     
        <form runat="server" id="frmContentMain">
            <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
     
            <asp:ContentPlaceHolder ID="cphContent" runat="server"></asp:ContentPlaceHolder>
        </form>
     
     
     
    </div>
  5. Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 23 Apr 2013 Link to this post

    Hello Jason,

    I moved the code to a content page, but I was still unable to reproduce the issue. I've attached the modified web site. Please take a look at it and see if it works correctly on your end. If I missed something, please make the necessary modifications to the page so that the issue reproduces and paste the code here, so that I can troubleshoot the issue locally. Also, can you specify if the problem occurs on all browsers or just a specific one. Can you also check for any javascript errors when you click on an item.
     

    Regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  6. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 26 Apr 2013 Link to this post

    I think it may have something to do with my style sheets.  I'm going to do some testing and will report back.

    Thanks!
  7. Ross Dunham
    Ross Dunham avatar
    11 posts
    Member since:
    Mar 2006

    Posted 06 May 2013 Link to this post

    Hey Jason,
    Any luck on this one?  I am experiencing the same behavior.
    The drop down list "drops down", but does not close when you select an item.
    You have to click somewhere else for the menu to close.

    Were you able to figure out how to resolve this?
    Thanks!!!
    Ross
  8. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 07 May 2013 Link to this post

    I'm finally able to work on it today.  

    Do you have style sheets on your page?  They seem to work fine without any other style on the page.

    I'll see what I can dig up today and report back.

  9. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 07 May 2013 Link to this post

    Ok this is very interesting.  It doesn't look to have anything to do with styles, but perhaps DIV tags?

    Using the code below for the body of the page, clicking an item in the RadDropDownList DOES NOT close the list.
    <div>
        <form runat="server" id="frmContentMain">
            <telerik:RadScriptManager ID="RadScriptManager2" runat="server"></telerik:RadScriptManager>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <telerik:RadDropDownList runat="server" ID="RadDropDownList1">
                    <Items>
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                    </Items>
                </telerik:RadDropDownList>
            </telerik:RadAjaxPanel>
        </form>
    </div>

    However, putting the DIV tags inside the FORM tag instead of surrounding the FORM tag the RadDropDownList DOES close when you click an item.
    <form runat="server" id="frmContentMain">
        <div>
            <telerik:RadScriptManager ID="RadScriptManager2" runat="server"></telerik:RadScriptManager>
            <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
                <telerik:RadDropDownList runat="server" ID="RadDropDownList1">
                    <Items>
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                        <telerik:DropDownListItem Text="1" Value="1" />
                    </Items>
                </telerik:RadDropDownList>
            </telerik:RadAjaxPanel>
        </div>
    </form>

    I'm happy to report it is working for me now, but I'm definitely curious about this behavior.
  10. Ross Dunham
    Ross Dunham avatar
    11 posts
    Member since:
    Mar 2006

    Posted 07 May 2013 Link to this post

    Hey Jason.
    Well it took me a bunch of trial and error to find out what was causing this for my page.
    I also thought it was style related, but I stripped all the styles from my project and it was still happening.

    So I rebuilt my master page one DIV at a time until I figured out what was causing it.

    I had placed my FORM tag inside a <DIV>. 

    Causes Issue
    <body>
        <
    div>  
    <
    form id="frmBody" runat="server">
        <
    telerik:RadScriptManager ID="rsmMaster" runat="server"></telerik:RadScriptManager>

    If I moved the FORM outside of the DIV, then the drop down list closes upon selecting an item.

    Works Properly
    <body>
        <form id="frmBody" runat="server">
    <div>
        <telerik:RadScriptManager ID="rsmMaster" runat="server"></telerik:RadScriptManager>

    Not sure if this is what is causing the issue for you, but this fixed it for me.
    Good luck!
    Ross
  11. Ross Dunham
    Ross Dunham avatar
    11 posts
    Member since:
    Mar 2006

    Posted 07 May 2013 Link to this post

    Damn, I didn't see your post until now.  That was the fix for me too...
  12. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 07 May 2013 Link to this post

    Hahaha excellent.  Great minds think alike!

    Wouldn't mind hearing back from Bozhidar on this one.
  13. Answer
    Bozhidar
    Admin
    Bozhidar avatar
    1101 posts

    Posted 08 May 2013 Link to this post

    Hi guys,

    You are absolutely correct.

    Placing an element between the body and the form breaks the initialization of the DropDown popup element, which in turns causes faulty behavior. 

    We have noticed this behavior a couple of weeks ago and we have since fixed it, so if you get our latest build things should be working fine.
     

    Kind regards,
    Bozhidar
    the Telerik team
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
  14. Kevin F
    Kevin F avatar
    46 posts
    Member since:
    Sep 2009

    Posted 14 May 2013 Link to this post

    Thanks Bozhidar!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017