RadComboBox inside an AjaxToolKit ModalPopupExtender

24 posts, 0 answers
  1. Martin
    Martin avatar
    22 posts
    Member since:
    Aug 2007

    Posted 15 Jan 2008 Link to this post

    I am using a RadComboBox inside a Microsoft AjaxToolKit ModalPopupExtender.

    Unfortunately the dropdown section of the combobox appears behind the modal popup, and always at a fixed position on the page (if you scroll the page, the popup stays in the centre - with the textbox part of the combobox, while the drop down scrolls up and down with the background).

    At the moment my combo box is pretty unusable inside the modal popup because I can't select anything from the drop down by clicking on it.

    As the Prometheus tools are build on Microsoft AJAX, I was wondering if this was a problem you were aware of and able to help me with.

    Thanks,
    Martin

  2. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 16 Jan 2008 Link to this post

    Hi Martin,

    As for the first problem - you can set the ZIndex property of the RadComboBox to a big number, e.g.

    <telerik:RadComboBox  
    ID="RadComboBox1"  
    runat="server"  
    RadComboBoxImagePosition="Right" 
    ZIndex="10000000"

    For the scrolling issue you can use the following approach:

    • Hook on the onscroll event of the container, where the combobox resides
    • Hide the dropdown like:
        var combo = $find("<%= RadComboBox1.ClientID %>"); 
        combo.hideDropDown(); 


    Hope this helps.


    Kind regards,
    Veskoni
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Martin
    Martin avatar
    22 posts
    Member since:
    Aug 2007

    Posted 16 Jan 2008 Link to this post

    Hi Veskoni,

    Thanks for the reply. The first part worked, and the drop down bit is now onto the the modal popup's background and is clickable.

    However for the second part, hooking to the onscroll event doesn't really solve my problem. The button that triggers the popup is at the bottom of the page, and you have to scroll up just to see the drop down section. A user wouldn't even realise it was there unless they scrolled the page back to the top.

    I'll keep working on it. If you have any other ideas though, I'd be really grateful.

    Thanks,
    Martin
  5. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 16 Jan 2008 Link to this post

    Hi Martin,

    I tried to reproduce the problem, but to no avail.

    Could you please open a formal support ticket and attach a small project demonstrating the problem?
    Thus, we will test it locally and try to find a working solution for you.

    Thanks.

    Regards,
    Veskoni
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  6. Martin
    Martin avatar
    22 posts
    Member since:
    Aug 2007

    Posted 18 Jan 2008 Link to this post

    Thanks for looking into this for me. If I get time I will try and put this into a project for you as you asked. I am on a tight deadline to get an application delivered, so it might be a little while.

    In the meantime I have just decided not to use the modal popup and have used an asp:Panel to hide/unhide the control instead.
  7. Feizal Amlani
    Feizal Amlani avatar
    91 posts
    Member since:
    Feb 2007

    Posted 05 May 2009 Link to this post

    I have the same issue regarding the dropdown appearing behind the window.  My dropdown appears in the RadTooltip.  The Z-Index worked and clicking on the the drop image shows the items correctly.  However, the dropdown itself cannot be seen (it is not have a background of white).  It is blended with the tooltip's background color. 

    Thanks.
  8. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 07 May 2009 Link to this post

    Hello Feizal Amlani,

    I could not reproduce that problem too. Can you paste here the code and describe the problem in more detail please?

    Kind regards,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  9. Jesse Houston
    Jesse Houston avatar
    1 posts
    Member since:
    Nov 2008

    Posted 18 May 2009 Link to this post

    I also experience this problem - but only when the control is in the control collection on the pages FIRST load. (e.g. it is not added on a postback)

     - In this scenario, if the control is added to the page in the designer, when it renders on the first load the relative z-index is set and when the modal popup extender is "shown", the radcombobox slide will appear behind the popup. Note that this does not happen when the postback causes the RadComboBox to be added to the form (i.e. datagrid binding within a modal popup extended)

    ContentWizard.ascx (simplified)

    <

     

    cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="Panel1"

     

     

     

    CancelControlID="LinkButton1" PopupDragHandleControlID="pnlHeader" BackgroundCssClass="BackgroundCssClass">

     

     

     </

     

    cc1:ModalPopupExtender>

     

     

     <

     

    asp:Panel runat="server" ID="Panel1" CssClass="subContentBody" style="display:none;">

     

     

     

    <telerik:RadComboBox ID="RadComboBox1" runat="server" EnableEmbeddedSkins="false"

     

     

     

    AutoPostBack="true" ShowDropDownOnTextboxClick="true" EnableViewState="true" ZIndex="100000">

     

     

     

    </telerik:RadComboBox>

     

     

     </

     

    asp:Panel>

     

     

     

     

     

    SomePage.aspx:

    <

     

    asp:LinkButton ID="lbAddSidebarContent" ToolTip="Add Sidebar Content" runat="server"

     

     

     

    CssClass="commandButton insertButtonSA"> </asp:LinkButton>

     

     

     

    <uc1:ContentWizard ID="ContentWizard2" runat="server" PlaceHolderID="2" PopupControlID="lbAddSidebarContent"

     

     

     

    Width="400px" Title="Add Page Sidebar Content" PageID="1" OnItemCreated="SideBarItemCreated" />

     

     

     

     

     

  10. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 20 May 2009 Link to this post

    Hi Jesse Houston,

    Here is my simple page where the dropdown is visible:
        <asp:ScriptManager ID="ScriptManager1" runat="server"
        </asp:ScriptManager> 
    <asp:Panel Width="200" Height="200" BackColor="gray" runat="server" ID="panel1" style="display:none;"
        <telerik:RadComboBox ID="RadComboBox1" runat="server" ZIndex="12000" > 
            <Items> 
                <telerik:RadComboBoxItem Text="item 1" /> 
                <telerik:RadComboBoxItem Text="item 1" /> 
                <telerik:RadComboBoxItem Text="item 1" /> 
            </Items> 
        </telerik:RadComboBox> 
    </asp:Panel> 
        <cc1:ModalPopupExtender ID="ModalPopupExtender1" runat="server" PopupControlID="panel1"  
            TargetControlID="LinkButton1"
        </cc1:ModalPopupExtender> 
         
        <asp:LinkButton ID="LinkButton1" runat="server">LinkButton</asp:LinkButton> 


    Please send us a sample running project where we can reproduce the problem locally.

    Sincerely yours,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  11. Bobby Godwin
    Bobby Godwin avatar
    3 posts
    Member since:
    Jul 2007

    Posted 01 Jul 2009 Link to this post

    Hi Veselin, I have the same issue and copy & paste your code and the dropdown doesnt show in Firefox 3. I'm using the 2008.1.619.20 version. May be was solved in other release?

    Thanks!

  12. Bobby Godwin
    Bobby Godwin avatar
    3 posts
    Member since:
    Jul 2007

    Posted 01 Jul 2009 Link to this post

    Hi Veselin, the issue is related to the modalpopupextender
    I put the Zindex property to a value greater than 100000 and now works.

    Regards.
  13. Patrice Pare
    Patrice Pare avatar
    3 posts
    Member since:
    Oct 2009

    Posted 07 Oct 2009 Link to this post

    Hi,

    I am experiencing problems with a radcombo box inside a radtabstrip which is displayed through a modalpopupextender. Everything works fine safe when the combobox displays the dropdownlist and then I start scrolling up and down. The modalpopup remains centered so are the controls within it but the dropdownlist will move up or down.

    How can I solve this ?

    Thanks !

    Patrice

     
  14. Patrice Pare
    Patrice Pare avatar
    3 posts
    Member since:
    Oct 2009

    Posted 09 Oct 2009 Link to this post

    Hi Sean,

    thanks for your quick reply. I looked at your suggested solution and, unfortunately, I don't think it applies to my problem since I am experiencing it with Internet Explorer 7 (and is present with FireFox 3.5 and Safari 3 as well).

    Here are a summary of the taken actions:
    1. Page is loaded
    2. Click on a button that opens up a modal popup which contains the combobox
    3. Click on the arrow to open the dropdownlist from the combobox
    4. With the mouse wheel, scroll down
    5. The whole page moves down. The modal popup remains centered. The dropdownlist moves with the page causing an incoherent displays.
    However, if I use the mouse and move up and down the vertical scroll bar, the dropdownlist disappear.

    I believe when a scroll event happens, the dropdownlist should disappear.

    I tried the code mentinoned by Veskoni on Jan 16 2008 but it did not turn out as being effective :
     

     

    <script type="text/javascript" language="javascript">  
        window.onscroll = HideDropDownList;  
     
        function HideDropDownList() {  
     
            var combo = $find('<%= MyRadComboBoxID.ClientID %>');  
            combo.hideDropDown();  
        }  
    </script> 




    Do you have any suggestion ?  In the meantime, I will work on a small solution and try to isolate the problem if you request it.

    Thanks again.
    Patrice

  15. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 12 Oct 2009 Link to this post

    Hi Patrice Pare,

    The simple project would help us definitely, so please send it if it is ready.

    Best wishes,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  16. Patrice Pare
    Patrice Pare avatar
    3 posts
    Member since:
    Oct 2009

    Posted 19 Oct 2009 Link to this post

    Hey guys !

    I sent last week at the following address my Visual Studio demo solution isolating the problem with the RadComboBox : support@telerik.com.

    Could you please confirm you got it ? If you didn't, could you please send me the proper email address so I can ship the demo again ?

    The zipped Visual Studio solution is around 1,6Mo. Thanks again!

    Patrice
  17. Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 21 Oct 2009 Link to this post

    Hello Patrice Pare,

    I could not find such an email from you.
    It is advisable to open a support ticket and attach the zip file there.

    Thanks

    Greetings,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  18. Harry Yuen
    Harry Yuen avatar
    4 posts
    Member since:
    Aug 2009

    Posted 08 Jul 2011 Link to this post

    Hi,

    I'm having the same issue with scrolling that Patrice was having.  Is there a solution to this problem.

    If I expand a drop down on a modal popup and then scroll the page with my mouse the drop down scrolls with the page, while the rest of the modal popup stays centered.
  19. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 12 Jul 2011 Link to this post

    Hi Harry,

    Since this thread is rather old could you clarify which version of the controls you are using?

    In order to help you troubleshoot this issue, my suggestion is to open a support ticket so we could continue the discussion there.

    Best wishes,
    Dimitar Terziev
    the Telerik team

    Register for the Q2 2011 What's New Webinar Week. Mark your calendar for the week starting July 18th and book your seat for a walk through of all the exciting stuff we will ship with the new release!

  20. Harry Yuen
    Harry Yuen avatar
    4 posts
    Member since:
    Aug 2009

    Posted 12 Jul 2011 Link to this post

    Telerik.Web.UI.Dll
    version 2010.2.713.35

    And I will open a ticket shortly.
  21. DEMOSTENES
    DEMOSTENES avatar
    1 posts
    Member since:
    Sep 2012

    Posted 04 Nov 2012 Link to this post

    saludos de peru.. es la solucion que buscaba.. saludos
  22. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 19 Mar 2013 Link to this post

    Hah!  I just ran into this same issue with the combo box drop down disappearing behind a ModalPopupExtender.  Funny thing was that i was specifying a zindex in the control, and the same code in another almost identical page worked fine.  But it just seems like my arbitrarily high zindex of 100000 wasn't arbitrarily high enough.  Increasing to 10000000 worked! 

    Mark
  23. Mark Kucera
    Mark Kucera avatar
    84 posts
    Member since:
    Sep 2009

    Posted 19 Mar 2013 Link to this post

    Oh, and while i don't think any of my users will notice this problem, i can reproduce the exact same scrolling issue that is described by the other posters.  And this is in version: 2012.3.1308.40.

    -Mark
  24. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 20 Mar 2013 Link to this post

    Hi,

    Anyone who find it difficult to display a RadComboBox inside the Ajax ModalPopupExtender may please have a look into the following sample code.

    ASPX:
    <asp:LinkButton ID="LinkButton1" runat="server" Text="Click To Show PopUp"></asp:LinkButton>
            <ajax:ModalPopupExtender ID="ModalPopupExtender" runat="server" PopupControlID="popUpPanel"
                BackgroundCssClass="BackGround" TargetControlID="LinkButton1" CancelControlID="RadButton1">
            </ajax:ModalPopupExtender>
            <asp:Panel ID="popUpPanel" runat="server" CssClass="Pop">
                <div>
                    <telerik:RadButton ID="RadButton1" runat="server" Width="44px" Height="45px" CssClass="RadButtonStyle">
                        <Image ImageUrl="Images/Close.jpg" />
                    </telerik:RadButton>
                    <telerik:RadComboBox ID="RadComboBox1" runat="server" DataSourceID="SqlDataSource2"
                        CssClass="RadComboBoxStyle" MaxHeight="200px" EmptyMessage="Enter Name" DataTextField="ContactName">
                    </telerik:RadComboBox>
                    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
                        SelectCommand="select ContactName from [Customers]"></asp:SqlDataSource>
                </div>
            </asp:Panel>

    CSS:
    <style type="text/css">
        .BackGround
        {
            background-color: Gray;
            filter: alpha(opacity=70);
            opacity: 0.7;
            z-index: 100 !important;
        }
        .Pop
        {
            z-index: 1001 !important;
            background-color: White;
            width: 400px;
            height: 300px;
            border: 1px solid black;
            border-radius: 10px;
        }
        .RadComboBoxStyle
        {
            margin-left: 20px !important;
            margin-top:-20px !important;
        }
        .RadButtonStyle
        {
            margin-left: 352px !important;
            margin-top:2px !important;
        }
    </style>

    Thanks,
    Princy.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017