Wednesday, May 27, 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