Thursday, May 28, 2009

AjaxControlToolkit ComboBox not appearing in ModalPopup

Most of us is enjoying ComboBox presenting, except it is inside ModalPopup.
When we use ComboBox in ModalPopup, it throws the client error and only thing in our sight is a bald TextBox instead of entire ComboBox in ModalPopup Panel. After debugging, we can find the error message is pointing to this line b.width=c+"px".
Actually, the ModalPopup behavior mix it up. So the only thing we need to do is
1. Put the ModalPopupExtender behind the Panel which contains ComboBox.
2. Set style "display" to "block"(default value if you don't set the value of it).

Check the sample as below:


<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:Panel ID="panel" runat="server" >
<cc1:ComboBox ID="ComboBox1" runat="server" AutoPostBack="true" DropDownStyle="DropDown">
<asp:ListItem Value="0" Text="1" >Text 1</asp:ListItem>
<asp:ListItem Value="1" Text="2">Text 2</asp:ListItem>
<asp:ListItem Value="2" Text="3">Text 3</asp:ListItem>
</cc1:ComboBox>
</asp:Panel>
<cc1:ModalPopupExtender ID="MPE" runat="server" PopupControlID="panel" TargetControlID="LB"> ---Put ModalPopupExtender behind Panel "panel".---
</cc1:ModalPopupExtender>
<asp:LinkButton ID="LB" runat="server" Text="clickme">click</asp:LinkButton>


Actually we have the second way to resolve this problem. The issue will be encountered as soon as the parent element of combobox is invisible(style display=none or visibility=hidden). So the simplest approach is we can set it visible after rending and set it back in pageLoad.



Input your modalpopup panel clientID and put the above script after document body and form content.
The same problem in this link: http://vincexu.blogspot.com/2009/07/ajaxcontroltoolkit-combobox-not-showing.html

14 comments:

Anonymous said...

I tried your code, but it isn't working. First of al there is an error.
' style="display:none"; should be style="display:none;"
The display:none is hidding part of the button on the combobox as well. If you leave out this style-element, the buttons shows correctly. However the dropdownlist still isn't working. I tried it via copy and paste??

Vince Xu said...

Oh, thank you. I've made a mistake in my article, and I modified it now.

Anonymous said...

hi
does the problem solve ?
i have try this code but the drop time still can't been shown

Dharmendra said...

please give the correct code.
your code is not working properly.

Derick said...

Thanks, worked for me.

Vince Xu said...

The code is fine after my testing.

S. Muhilan said...

Hi
I am facing the same problem in tab container.
When I placed ajaxtoolkit combobox in a tabpane of tabcontainer, the drodownbutton and drop down list display are display. Here is my code.

How to resolve it?

Vince Xu said...

http://vincexu.blogspot.com/2009/07/ajaxcontroltoolkit-combobox-not-showing.html

Anonymous said...

I tried your code, but it isn't working.
___________________

Vince

Your movies on demand

Vince Xu said...

If it doesn't work, I guess it is all because the Panel is not invisible like the Combobox in TabContainer. As soon as the parent element of combobox is invisible(display=none or visibility=hidden), the combobox will pop out this kind of error. In this way, we can set the parent element to visble and set it back in pageLoad, which's like http://vincexu.blogspot.com/2009/07/ajaxcontroltoolkit-combobox-not-showing.html said.

Unknown said...

hi.
i tried this solutions but the combobox's items appear behind the panel(modalpopupextender),
i need your help.
thank you.

Anonymous said...

Hi Vince, Why is the dropdownextender panel(the panel to be shown) goes to the back of the modalpopupextender panel(the modal panel)?

is it just me whos having this problem? Because I googled it but cannot find info to help me.
I want the dropdownextender panel infront of the modal popup.

please help.
thanks

Sowmya said...

I want to load database values into ajax toolkit combo box which is placed in Tab container's first tab pane based on the other dropdown list selectin value which is also placed in the same tab pane. Instead of using SQLDataSource, i want to load through code. It is working fine when it is placed in the outside of the tabpane but not working when it is place inside it. Can anyone help me please.

Sowmya.K

Sowmya said...

I want to load database values into ajax toolkit combo box which is placed in Tab container's first tab pane based on the other dropdown list selectin value which is also placed in the same tab pane. Instead of using SQLDataSource, i want to load through code. It is working fine when it is placed in the outside of the tabpane but not working when it is place inside it. Can anyone help me please.

Sowmya.K