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

RadComboBox does not display Properly after Hide/Show

3 Answers 539 Views

ComboBox

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

Brad asked on 17 Apr 2020, 03:50 PM

radcomboboxdec972937db941b3a484a35f917d9b7e.png

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

</ContentTemplate>

</asp:UpdatePanel>

</div>

3 Answers, 1 is accepted

answered on 22 Apr 2020, 01:58 PM

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:

Regards,
Peter Milchev
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.

answered on 19 May 2020, 07:44 PM

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?