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
23 Answers, 1 is accepted
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
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
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
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.
Thanks.
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.
- 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" />
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.
Thanks!
I put the Zindex property to a value greater than 100000 and now works.
Regards.
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
This might help you:
http://www.telerik.com/support/kb/aspnet-ajax/combobox/radcombobox-in-modalpopupextender-wrong-dropdown-position-under-firefox-safari.aspx
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
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.
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
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.
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.
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!
version 2010.2.713.35
And I will open a ticket shortly.
Mark
-Mark
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.