RadComboBox does not display Properly after Hide/Show

[Brad]

I have a radcombobox in a modal.  The combobox is hidden when the modal first opens.  After the user clicks a button to display the modal, then makes a selection in an asp:DropdownList, the div containing the combobox displays and works properly.  After a "save" button click, modal closes and the div containing the Radcombobox is set to Visible=false again from codebehind.  However, if the user attempts to repeat the aforementioned process, then Visible is set to "true" on the div containing the RadComboBox, the ComboBox no longer displays correctly.  I have attached a screenshot of the issue.

 

Here is the modal code:

   <div id="modalFindAndReplace" class="md-modal colored-header custom-width md-effect-9 primary">
       <div class="md-content">
           <div class="modal-header">
               <button type="button" data-dismiss="modal" aria-hidden="true" class="close md-close"><i class="icon s7-close"></i></button>
               <h3 class="modal-title">Find and Replace</h3>
           </div>
           <div class="panel panel-alt3 panel-transparent">
               <div class="panel-heading panel-heading-cg">
                   <button runat="server" id="btnSearchandReplace" data-dismiss="modal" type="button" class="btn btn-alt3" onserverclick="btnSearchandReplace_ServerClick" ><i class="icon s7-search"></i> Find and Replace</button>
                   <button type="button" id="btnCancelTargetField" data-dismiss="modal" class="btn btn-alt3 md-close" runat="server"><i class="icon s7-close"></i> Cancel</button>
               </div>
           </div>
           <div class="modal-body form">
               <div class="panel-body" style="margin: 0 auto;">
                   <div>
                       <asp:UpdatePanel runat="server" >
                           <ContentTemplate>
                               <div class="form-group">
                                   <span> <label for="ddlSearchColumn" class="control-label text-danger">Search Column</label>
                                   <asp:DropDownList runat="server" ID="ddlSearchColumn" AutoPostBack="true"  OnSelectedIndexChanged="ddlSearchColumn_SelectedIndexChanged"></asp:DropDownList></span>
                                  <span class="pull-right">
                                      <asp:CheckBox ID="CheckBox1" runat="server" Text="Include Headers" /></span>
                               </div>
                               <div class="form-group" id="divSearchText" runat="server">
                                   <label for="txtSearchText" class="control-label">Find Text:</label>
                                   <asp:TextBox ID="txtSearchText" runat="server" CssClass="form-control" ></asp:TextBox>
                               </div>
                               <div class="form-group" id="divSearchList" runat="server" visible="false">
                                   <label for="ddlSearchList" class="control-label">Find Text:</label>
                                   <asp:DropDownList runat="server" ID="ddlSearchList"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="replaceWithTextBox" runat="server">
                                   <label for="txtReplaceText" class="control-label">Replace With:</label>
                                   <asp:TextBox ID="txtReplaceText" runat="server" CssClass="form-control" ></asp:TextBox>
                               </div>
                               <div class="form-group" id="divAssetType" runat="server" visible="false">
                                   <label for="ddlReplaceAssetType" class="control-label">Replace Asset Type Name With:</label>
                                   <asp:DropDownList runat="server" ID="ddlReplaceAssetType"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divAssetStatus" runat="server" visible="false">
                                   <label for="ddlReplaceStatus" class="control-label">Replace Status With:</label>
                                   <asp:DropDownList runat="server" ID="ddlReplaceStatus"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divAssetUsage" runat="server" visible="false">
                                   <label for="ddlReplaceUsage" class="control-label">Replace Usage Type  With:</label>
                                   <asp:DropDownList runat="server" ID="ddlReplaceUsage"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divChargeType" runat="server" visible="false">
                                   <label for="ddlReplaceChargeType" class="control-label">Replace Charge Type  With:</label>
                                   <asp:DropDownList runat="server" ID="ddlReplaceChargeType"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divPositionList" runat="server" visible="false">
                                   <label for="ddlPositionList" class="control-label">Replace Position List Name  With:</label>
                                   <asp:DropDownList runat="server" ID="ddlPositionList"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divAssets" runat="server" visible="false">
                                   <label for="ddlAssets" class="control-label">Replace Asset Name  With:</label>
                                   <asp:DropDownList runat="server" ID="ddlAssets"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divPayrollTime" runat="server" visible="false">
                                   <label for="ddlPayrollTime" class="control-label">Replace Generates Payroll Time With:</label>
                                   <asp:DropDownList runat="server" ID="ddlPayrollTime"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divPayrollTimeFor" runat="server" visible="false">
                                   <label for="ddlPayrollTimeFor" class="control-label">Replace Generates Payroll Time For With:</label>
                                   <asp:DropDownList runat="server" ID="ddlPayrollTimeFor"></asp:DropDownList>
                               </div>
                               <div class="form-group" id="divUOM" runat="server" visible="false">
                                   <label for="ddlUOM" class="control-label">Replace Charge Item Unit of Measure Name With:</label>
                                   <asp:DropDownList runat="server" ID="ddlUOM"></asp:DropDownList>
                               </div>
                           <div class="form-group" id="divCompany" runat="server" visible="false">
                                   <label for="cmbCompany">Replace Company Name With:</label>
                                   <div class="input-group">
                                       <telerik:RadComboBox DropDownAutoWidth="Enabled" RenderMode="Lightweight" ID="cmbCompany" EmptyMessage="Type to Select..." runat="server" Width="100%" EnableLoadOnDemand="true" AllowCustomText="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true" >
                                           <WebServiceSettings Method="GetCompanies" Path="~/Portal/Ajax/COGS.asmx" />
                                       </telerik:RadComboBox>
                                       <span class="input-group-btn">
                                           <button runat="server" id="btnClearCompany" type="button" class="btn btn-default" onclick="javascript:ClearCompany();" title="Clear Selected Customer"><span class="s7-close" style="font-size: 20px;"></span></button>
                                       </span>
                                   </div>
                                   <asp:TextBox ID="hidCompany" runat="server" Style="display: none;"></asp:TextBox>
                               </div>
                           </div>
                           </ContentTemplate>
                       </asp:UpdatePanel>
               </div>
           </div>
       </div>
   </div>
</div>

[Peter Milchev]

Hello Brad,

It seems that the styles for the ComboBox are not loaded. The following Skins troubleshooting article shows common problems with controls that are loaded via AJAX:

• https://docs.telerik.com/devtools/aspnet-ajax/general-information/troubleshooting/skins-troubleshooting#appearance-issues-when-control-is-added-during-ajax-request

Here are some other resources you can also check on the topic:

• https://stackoverflow.com/questions/1911457/telerik-radtabstrip-doesnt-render-correctly-when-loaded-via-ajax;
• https://demos.telerik.com/aspnet-ajax/ajaxmanager/application-scenarios/show-hide-webcontrols/defaultcs.aspx

Regards,
Peter Milchev
Progress Telerik

[Brad]

Thanks for the response.  I tried the following:

<div class="form-group" id="divCompany" runat="server">
                            <label for="cmbCompany">Replace Company Name With:</label>
                            <div class="input-group">
                                <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server">
                                   <StyleSheets>
                                        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.ComboBox.css" />
                                        <telerik:StyleSheetReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Skins.Default.ComboBox.Default.css" />
                                   </StyleSheets>
                                </telerik:RadStyleSheetManager>
                                <telerik:RadComboBox DropDownAutoWidth="Enabled" RenderMode="Lightweight" ID="cmbCompany" EmptyMessage="Type to Select..." runat="server" Width="100%" EnableLoadOnDemand="true" AllowCustomText="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true" EnableAjaxSkinRendering="true" EnableEmbeddedBaseStylesheet="false" EnableEmbeddedSkins="false" >
                                    <WebServiceSettings Method="GetCompanies" Path="~/Portal/Ajax/COGS.asmx" />
                                </telerik:RadComboBox>
                                <span class="input-group-btn">
                                    <button runat="server" id="btnClearCompany" type="button" class="btn btn-default" onclick="javascript:ClearCompany();" title="Clear Selected Customer"><span class="s7-close" style="font-size: 20px;"></span></button>
                                </span>
                            </div>
                            <asp:TextBox ID="hidCompany" runat="server" Style="display: none;"></asp:TextBox>
                        </div>

Unfortunately, the issue remains when showing and hiding divCompany.  Is the stylesheet in the correct place?  Do you have any other suggestions?

[Peter Milchev]

Hello Brad,

You can add the StyleSheetManager under the ScriptManager and see if that would have any effect.

Regards,
Peter Milchev
Progress Telerik