I recently upgraded from ASP.NET AJAX 2014 to 2022 and ran into an issue with a RadComboBox. It can be reproduced with this code:
Test.aspx
<telerik:RadScriptManager ID="scriptManager" runat="server" />
<telerik:RadComboBox ID="rcb" runat="server" Label="Medication:" AutoPostBack="true"
Width="250" OnSelectedIndexChanged="rcb_SelectedIndexChanged">
<Items>
<telerik:RadComboBoxItem Text="-- select --" Value="" />
<telerik:RadComboBoxItem Text="Benztropine 0.5 mg " />
<telerik:RadComboBoxItem Text="Buspirone 10 MG" />
<telerik:RadComboBoxItem Text="Haloperidol 100mg/ml" />
<telerik:RadComboBoxItem Text="Metaprolol 25 mg" />
<telerik:RadComboBoxItem Text="Quetiapin/Seroquel 400 mg" />
<telerik:RadComboBoxItem Text="Trazadone 150 mg" />
<telerik:RadComboBoxItem Text="Vitamin D2 50,000 units" />
</Items>
</telerik:RadComboBox>
<label>SelectedIndex</label> <asp:Label ID="Label1" runat="server" Text=""></asp:Label>
Test.aspx.cs
protected void rcb_SelectedIndexChanged(object sender, RadComboBoxSelectedIndexChangedEventArgs e)
{
Label1.Text = rcb.SelectedIndex.ToString();
rcb.SelectedIndex = 0;
}
When "Benztropine 0.5 mg " is selected, the SelectedIndex in the selected index changed method is incorrectly set to 0, instead of 1. Selecting any other item in the list results in the correct SelectedIndex. I spent a lot of time debugging the code until I noticed that "Benztropine 0.5 mg " has a space at the end.
I found two workarounds:
1. Trim the trailing space from text.
2. Add values for each item.
This was not an issue with the old 2014 version. Is this a bug or am I missing something?
RadComboBox Bootstrap Lightweight skin is not loading in version 2022.3.913
Workarounds provided by Admin:
Use RadStyleSheetManager to load the correct stylesheet from Telerik.Web.UI.Skins assembly, as per the instructions in Skin registration with RadStyleSheetManager:
<telerik:RadStyleSheetManager runat="server" ID="RadStyleSheetManager">
<StyleSheets>
<telerik:StyleSheetReference Name="Telerik.Web.UI.Skins.BootstrapLite.ComboBOx.Bootstrap.css" Assembly="Telerik.Web.UI.Skins" />
</StyleSheets>
</telerik:RadStyleSheetManager>
Link the correct stylesheet manually on the page in one of the following ways:
It gonna be cool if ComboBox display his picture with text, like the pic shows.
Currently, the behavior on selection is to highlight the selected item, so modifying the appearance of a selected item would affect the appearance of hovered items as well.
In the meantime, a custom CSS class can be added/removed to the selected item as in the snippet below:
<script>
function OnClientLoad(sender, args) {
var selectedItem = sender.get_selectedItem();
if (selectedItem) {
$telerik.$(selectedItem.get_element()).addClass("rcbSelected");
}
}
function OnClientSelectedIndexChanged(sender, args) {
$telerik.$(sender.get_dropDownElement()).find(".rcbSelected").removeClass("rcbSelected");
var selectedItem = sender.get_selectedItem();
if (selectedItem) {
$telerik.$(selectedItem.get_element()).addClass("rcbSelected");
}
}
</script>
<style>
div.RadComboBoxDropDown .rcbSelected {
color: red;
background-color: lightgreen;
}
</style>
<telerik:RadComboBox ID="RadComboBox1" runat="server" RenderMode="Lightweight" OnClientSelectedIndexChanged="OnClientSelectedIndexChanged" OnClientLoad="OnClientLoad" MaxHeight="150">
<Items>
<telerik:RadComboBoxItem Text="Item 1" />
<telerik:RadComboBoxItem Text="Item 2" />
<telerik:RadComboBoxItem Text="Item 3" Selected="true" />
<telerik:RadComboBoxItem Text="Item 4" />
</Items>
</telerik:RadComboBox>
Based on customer feedback: The RadFormDecorator decorates most native input controls, but does miss some, namely in ComboBox and ListBox. As this [the lack of decoration] is something advertently done, due to various issues in different browsers, we should thread carefully.
I have instances of using OnClientBlur on multiple RadComboBox controls, and if you tab quickly enough the event does not fire. I've created an example which replicates what I see in the project I'm working on - two RadComboBoxes with the Blur event where I get the second to fire but not the first when tabbing from first to second to third (just another control w/o event). This is causing issues where some validation is bypassed. Screencast: http://screencast.com/t/VTQrN9uOVrI9 A couple observations: - It will fire correctly if I wait long enough before tabbing out. - If I pause on the second control after tabbing, then click somewhere, it sometimes then fires the Blur from the first control. - I am using LoadOnDemand. From my general observation it looks like it's potentially a race condition with the loading.
"Loading..." text in Combobox with Virtual Scrolling is visible on first set of items loading. It shows first time "Loading..." text. on scrolling it loads items from PageMethods/WebService but "Loading..." text it not visible i.e. because it is first <LI> item so it is not visible. Instead of first <LI> item, it should be at position where it always display while loading more items. same issue is also in telerik demo website : http://demos.telerik.com/aspnet-ajax/combobox/examples/populatingwithdata/autocompletesql/defaultcs.aspx
<telerik:RadComboBox runat="server" ID="CB" AllowCustomText="true" HighlightTemplatedItems="true" EnableViewState="false" CheckBoxes="true" EnableLoadOnDemand="true" OnItemsRequested="CB_ItemsRequested" ></telerik:RadComboBox>
Specifically, note that CheckBoxes is true.