RadComboBox does not display Properly after Hide/Show

4 posts, 0 answers
  1. Brad
    Brad avatar
    6 posts
    Member since:
    Sep 2011

    Posted 17 Apr Link to this post

    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>
  2. Peter Milchev
    Admin
    Peter Milchev avatar
    857 posts

    Posted 22 Apr Link to this post

    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:

    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.
  3. Brad
    Brad avatar
    6 posts
    Member since:
    Sep 2011

    Posted 19 May in reply to Peter Milchev Link to this post

    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?

  4. Peter Milchev
    Admin
    Peter Milchev avatar
    857 posts

    Posted 22 May Link to this post

    Hello Brad,

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

    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.
Back to Top