This is a migrated thread and some comments may be shown as answers.

RadComboBox inside an AjaxToolKit ModalPopupExtender

23 Answers 676 Views

ComboBox

This is a migrated thread and some comments may be shown as answers.

23 Answers, 1 is accepted

answered on 16 Jan 2008, 02:42 PM

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

answered on 18 May 2009, 01:47 PM

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" />

answered on 20 May 2009, 08:54 AM

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.

answered on 07 Oct 2009, 09:09 PM

radcombo-issue.JPG

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

answered on 09 Oct 2009, 03:55 PM

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

answered on 19 Mar 2013, 09:55 PM

scroll-issue.png

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

answered on 20 Mar 2013, 06:57 AM

ModalPopUp.JPG

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.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadComboBox inside an AjaxToolKit ModalPopupExtender

23 Answers, 1 is accepted