Recently I've been expressing some weird behavior with the MultiSelect displaying and extra dropdown next to the control (see attached image). This is just standard markup, nothing fancy. Is there a property setting I'm missing?
Thanks for any help you can provide.
<telerik:RadMultiSelect ID="msLOB" runat="server" Width="100%" Filter="StartsWith" Placeholder="Select LOB" DataTextField="text" DataValueField="value" Skin="Silk" RenderMode="Lightweight">
<Items>
<telerik:MultiSelectItem Text="All" Value="All" Selected="false"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Commercial-Large" Value="Commercial-Large" Selected="false"</telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Commercial-Small" Value="Commercial-Small" Selected="false"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Commercial-Individual" Value="Commercial-Individual" Selected="false">
</telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Medicare-MAPD" Value="Medicare-MAPD" Selected="false"></telerik:MultiSelectItem>
</Items>
</telerik:RadMultiSelect>1 Answer, 1 is accepted
0
Hi Fred,
Thank you for the provided resources.
I conducted a test with the markup and on my end, it renders only the MultiSelect control without the additional dropdown:
The screenshot shows the MultiSelect is inside another control (maybe a panel).
Could you also check the markup for additional code that may render the dropdown? If that's not the case, I'd like to ask you to share all the markup code related to the MultiSelect control, for further investigation.
Kind regards,
Vasko
Progress Telerik
Stay tuned by visiting our public roadmap and feedback portal pages! Or perhaps, if you are new to our Telerik family, check out our getting started resources!
Fred
commented on 03 Jun 2024, 09:31 PM
Top achievements
Rank 2
Iron
Iron
Rank 2
Iron
Iron
Thank you for your response. The answer to your question is yes. The MultiSelect is withing a RadAjaxPanel. Full Markup below:
<asp:SqlDataSource ID="dsDepartments" runat="server" ConnectionString="<%$ ConnectionStrings:ComplianceDB %>" SelectCommand="Compliance.usp_List_CHP_Deparments " SelectCommandType="StoredProcedure"></asp:SqlDataSource>
<br />
<div class="w3-panel w3-light-grey">
<telerik:RadAjaxLoadingPanel ID="MainLoaginPanel1" runat="server"></telerik:RadAjaxLoadingPanel>
<telerik:RadAjaxPanel ID="MainPanel1" runat="server" LoadingPanelID="MainLoadingPanel1">
<header class="w3-container w3-flat-midnight-blue w3-round-large w3-margin-top">
<h4 class="w3-margin-top w3-center"><i class="fa-solid fa-building-columns"></i> Federal Register Document</h4>
</header>
<div class="w3-row-padding w3-margin-bottom w3-border-bottom">
<div class="w3-quarter">
<div class="w3-container w3-white w3-card-4 w3-round-large">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h5 class="w3-margin-top"><i class="fa-solid fa-info-circle"></i> Record Information</h5>
</header>
<div class="w3-bar-block" style="margin-top: 1rem;">
<span class="w3-bar-iem"><b>Record ID:</b>
<telerik:RadTextBox ID="txtRecordID" runat="server" EmptyMessage="NEW" Width="50%" ReadOnly="true" Font-Bold="true"></telerik:RadTextBox>
</span>
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h6><i class="fa-solid fa-file-alt"></i> Document Number</h6>
</header>
</div>
<div class="w3-bar-iem">
<telerik:RadTextBox ID="txtDocnumber" runat="server" Width="100%" Font-Bold="true"></telerik:RadTextBox>
</div>
</div>
<div class="w3-row-padding">
<div class="w3-half">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h6 title="Comment Close Date.."><i class="fa-solid fa-calendar-xmark"></i> Close Date:</h6>
</header>
</div>
<div class="w3-bar-iem">
<telerik:RadDatePicker ID="dtp_Close_Date" runat="server" DateInput-EmptyMessage="TBD" Width="100%">
<Calendar runat="server" ShowRowHeaders="false" DayNameFormat="Short">
<SpecialDays>
<telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="sd-gold"></telerik:RadCalendarDay>
</SpecialDays>
</Calendar>
</telerik:RadDatePicker>
</div>
</div>
</div>
<div class="w3-rest">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h6><i class="fa-solid fa-calendar"></i> Release/Issue Date:</h6>
</header>
</div>
<div class="w3-bar-iem">
<telerik:RadDatePicker ID="dtp_Issue_Date" runat="server" DateInput-EmptyMessage="TBD" Width="100%">
<Calendar runat="server" ShowRowHeaders="false" DayNameFormat="Short">
<SpecialDays>
<telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="sd-gold"></telerik:RadCalendarDay>
</SpecialDays>
</Calendar>
</telerik:RadDatePicker>
</div>
</div>
</div>
</div>
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h6><i class="fa-solid fa-file-medical"></i> Regulation Type & Source</h6>
</header>
</div>
<div class="w3-bar-iem">
<telerik:RadTextBox ID="txtTypeSource" runat="server" Width="100%"></telerik:RadTextBox>
</div>
<div class="w3-bar-iem" style="padding-top:.5em">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h6><i class="fa-solid fa-comment"></i> Comm. Period/Deadline </h6>
</header>
</div>
<div class="w3-bar-iem">
<textarea id="txtCommentPeriod" runat="server" style="width: 100%" class="textareapad" rows="3"></textarea>
</div>
</div>
</div>
</div>
<div class="w3-rest">
<div class="w3-container w3-white w3-card-4 w3-round-large" >
<div class="w3-row-padding">
<div class="w3-half">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h5><i class="fa-solid fa-circle-exclamation"></i> Description-Summary</h5>
</header>
</div>
<div class="w3-bar-iem">
<textarea id="txtSummary" runat="server" style="width: 100%; font-size: 10pt;font-weight: bold" rows="12" class="textareapad" title="Dbl-Click for Pop-out view.." ondblclick="popWinShow(); return false"></textarea>
</div>
</div>
</div>
<div class="w3-third">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h5><i class="fa-solid fa-gavel"></i> Regulation</h5>
</header>
</div>
<div class="w3-bar-iem">
<textarea id="txtRegualtions" runat="server" style="width: 100%; max-height: stretch; overflow: auto" class="w3-text"></textarea>
</div>
<div class="w3-bar-iem w3-margin-top">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h5><i class="fa-solid fa-landmark-dome"></i> Agency</h5>
</header>
</div>
<div class="w3-bar-iem">
<textarea id="txtAgency2" runat="server" style="width: 100%; max-height: stretch; overflow: auto" class="w3-text"></textarea>
</div>
<div class="w3-bar-iem w3-margin-top">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h5><i class="fa-solid fa-scale-unbalanced"></i> Docket Number</h5>
</header>
</div>
<div class="w3-bar-iem">
<textarea id="txtDocket" runat="server" style="width: 100%; max-height: stretch; overflow: auto" class="w3-text"></textarea>
</div>
</div>
<div class="w3-bar-item w3-margin-top">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h5><i class="fa-solid fa-calendar-check"></i> CHP Deadline</h5>
</header>
</div>
<div class="w3-bar-item">
<telerik:RadDatePicker ID="dtp_CHP_Deadline" runat="server" Width="100%" DateInput-EmptyMessage="TBD">
<Calendar runat="server" ShowRowHeaders="false" DayNameFormat="Short">
<SpecialDays>
<telerik:RadCalendarDay Repeatable="Today" ItemStyle-CssClass="sd-gold"></telerik:RadCalendarDay>
</SpecialDays>
</Calendar>
</telerik:RadDatePicker>
</div>
</div>
<div class="w3-rest">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-round w3-margin-top">
<h5><i class="fa-solid fa-bolt"></i> Actions</h5>
</header>
</div>
<div class="w3-bar-iem" style="padding-left:4em;margin-top:.5rem">
<button id="btnimport" class="w3-btn w3-flat-midnight-blue w3-round" onclick="btnimport_onclick(); return false"><i class="fa-solid fa-circle-arrow-down"></i> Import</button>
<telerik:RadToolTip ID="ttbntImport" runat="server" TargetControlID="btnimport" IsClientID="true" Text="Import Federal Registry Document..." RelativeTo="Element"></telerik:RadToolTip>
</div>
<div class="w3-bar-iem" style="padding-left:4em;margin-top:.5rem">
<button id="btnSave" class="w3-btn w3-flat-midnight-blue w3-round" onclick="btnSave_onClick(); return false"><i class="fa-solid fa-save"></i> Save</button>
<telerik:RadToolTip ID="ttbtnSave" TargetControlID="btnSave" runat="server" IsClientID="true" RelativeTo="Element" Text="Save record..."></telerik:RadToolTip>
</div>
<div class="w3-bar-iem" style="padding-left:4em;margin-top:.5rem">
<button id="btntask" class="w3-btn w3-flat-midnight-blue w3-round" onclick="btnTask_Onclick(); return false"><i class="fa-solid fa-list-check"></i> New Task</button>
<telerik:RadToolTip ID="ttbtntask" runat="server" TargetControlID="btntask" IsClientID="true" RelativeTo="Element" Text="Assign a new task"></telerik:RadToolTip>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="w3-container w3-card-4 w3-white w3-round-large w3-margin-bottom">
<div class="w3-container w3-margin-top">
<div class="w3-row-padding">
<div class="w3-quarter">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-margin-top w3-round">
<h6><i class="fa-solid fa-briefcase"></i> CHP Line of Business</h6>
</header>
</div>
<div class="w3-bar-iem" style="padding-bottom: 16px">
<telerik:RadMultiSelect ID="msLOB" runat="server" Width="100%" Filter="StartsWith" Placeholder="Select LOB" DataTextField="text" DataValueField="value" Skin="Silk" RenderMode="Lightweight">
<Items>
<telerik:MultiSelectItem Text="All" Value="All" Selected="false"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Commercial-Large" Value="Commercial-Large" Selected="false"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Commercial-Small" Value="Commercial-Small" Selected="false"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Commercial-Individual" Value="Commercial-Individual" Selected="false"></telerik:MultiSelectItem>
<telerik:MultiSelectItem Text="Medicare-MAPD" Value="Medicare-MAPD" Selected="false"></telerik:MultiSelectItem>
</Items>
</telerik:RadMultiSelect>
</div>
</div>
</div>
<div class="w3-quarter">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-margin-top w3-round">
<h6><i class="fa-solid fa-briefcase"></i> Department/Business Owner</h6>
</header>
</div>
<div class="w3-bar-iem" style="padding-bottom:16px">
<telerik:RadMultiSelect ID="msDept" runat="server" DataSourceID="dsDepartments" DataValueField="Department_Name" DataTextField="Department_Name" Placeholder="Select Department.." Filter="StartsWith" Width="100%" Skin="Silk" AutoClose="false" RenderMode="Lightweight">
<ClientEvents OnClose="msDept_OnClose" />
</telerik:RadMultiSelect>
</div>
</div>
</div>
<div class="w3-quarter">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-margin-top w3-round">
<h6><i class="fa-solid fa-people-group"></i> Responsible Persons</h6>
</header>
</div>
<div class="w3-bar-iem" style="padding-bottom: 16px">
<telerik:RadAjaxPanel ID="pnlPerson" runat="server">
<telerik:RadMultiSelect ID="msPerson" runat="server" TagMode="Multiple" Placeholder="Select Person(s).." Filter="StartsWith" Width="100%" ToolTip="Items will updated when departments are selected.." Skin="Silk">
<ClientEvents OnDeselect="Person_OnDeselect" />
</telerik:RadMultiSelect>
</telerik:RadAjaxPanel>
</div>
</div>
</div>
<div class="w3-rest">
<div class="w3-bar-block">
<div class="w3-bar-iem">
<header class="w3-container w3-flat-belize-hole w3-margin-top w3-round">
<h6><i class="fa-solid fa-square-arrow-up-right"></i> URL</h6>
</header>
</div>
<div class="w3-bar-iem w3-border">
<div id="urldiv" runat="server" style="width:100%;height:3em" title="double click to edit URL.." ondblclick="URL_blClick(); return false"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</telerik:RadAjaxPanel>
Vasko
commented on 04 Jun 2024, 07:33 AM
Telerik team
Hi Fred,
Thank you for the shared markup of the page, however, even with it, I wasn't able to get the outcome as shown in the screenshot:
Alternatively, you could try to inspect the element from the devtools console and adjust its display property.
Kind regards,
Vasko
Progress Telerik
Fred
commented on 04 Jun 2024, 04:08 PM
Top achievements
Rank 2
Iron
Iron
Rank 2
Iron
Iron
Hi Vasko,
Thank you for the suggestion. I was able to inspect the elements and found that MultiSelect was creating an addition <div> element with class of "btn-group". I was able to create a simple JavaScript to hide them all.
Still curious as to what caused this behavior. I'm guessing it could be my bootstrap CSS could be conflicting with Telerik's CSS.
Rouge Element:
<div class="btn-group">
<button type="button" class="multiselect dropdown-toggle custom-select" data-toggle="dropdown"
title="Medicare-MAPD">
<span class="multiselect-selected-text">Medicare-MAPD</span>
</button>
<div class="multiselect-container dropdown-menu">
<button class="multiselect-option dropdown-item" title="All">
<span class="form-check">
<input class="form-check-input" type="checkbox" value="All">
<label class="form-check-label">All</label>
</span>
</button>
<button class="multiselect-option dropdown-item" title="Commercial-Large">
<span class="form-check">
<input class="form-check-input" type="checkbox" value="Commercial-Large">
<label class="form-check-label">Commercial-Large</label>
</span>
</button>
<button class="multiselect-option dropdown-item" title="Commercial-Small">
<span class="form-check">
<input class="form-check-input" type="checkbox" value="Commercial-Small">
<label class="form-check-label">Commercial-Small</label>
</span>
</button>
<button class="multiselect-option dropdown-item" title="Commercial-Individual">
<span class="form-check">
<input class="form-check-input" type="checkbox" value="Commercial-Individual">
<label class="form-check-label">Commercial-Individual</label>
</span>
</button>
<button class="multiselect-option dropdown-item active" title="Medicare-MAPD">
<span class="form-check">
<input class="form-check-input" type="checkbox" value="Medicare-MAPD">
<label class="form-check-label">Medicare-MAPD</label>
</span>
</button>
</div>
</div>Cleanup Script:
<script type="text/javascript">
window.onload = (function () {
var rouge_element = document.getElementsByClassName("btn-group");
if (rouge_lement) {
for (var i = 0; i < rouge_element.length; i++) {
rouge_element[i].style.display = 'none';
}
}
});
</script>