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:

Option 1

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>

Option 2

Link the correct stylesheet manually on the page in one of the following ways:

• By using the attached stylesheet file.
• Via the Telerik CDN link: https://d35islomi5rx1v.cloudfront.net/ajaxz/2022.3.913/BootstrapLite/ComboBOx.Bootstrap.css

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>

Hi,

This is a follow on request from a ticket raised where it was stated this feature isn't available and there is no work around.

When you hook a RadCombobox to a RadClientDataSource, which returns a paginated set of results along with a count of total number of records, the RadCombobox should display the "Show More Results" box along with the text stating "Items 1 - x of y" as all that information should be able to be calculated from the data returned.

At the first time requesting data, RadClientDataSource sends multiple requests to the server. All subsequent requests for Paging, Sorting work as expected.

Hi Telerik Support,

How do I move loading box to bottom of the combo box list when using load on demand feature. the case is we're using ShowMoreResultsBox=true and EnableVirtualScrolling=true and trying to get next batch of data on a heavy query, the loading box not showing on the list see image (2020-12-03 14_31_40-Agent - Verint Express.png).

can we show the loading box on the bottom of the dropdownlist, so user is aware that the data still being loaded.

Thank you

The OnClientTextChange event is triggered inconsistently in RadComboBox.

Typing custom text in the following RadComboBox and pressing enter does not fire the event:

        <script lang="javascript" type="text/javascript">
            function OnClientTextChange(sender, eventArgs) {
                alert("You typed " + sender.get_text());
            }
        </script>

        <telerik:RadComboBox
            ID="RadComboBox1"
            runat="server"
            AllowCustomText="true"
            OnClientTextChange="OnClientTextChange">
            <Items>
                <telerik:RadComboBoxItem Text="item1" Value="item1" />
                <telerik:RadComboBoxItem Text="item12" Value="item12" />
                <telerik:RadComboBoxItem Text="aaaa" Value="aaa" />
                <telerik:RadComboBoxItem Text="bbbb" Value="bbb" />
                <telerik:RadComboBoxItem Text="AAAA1" Value="AAAA1" />
                <telerik:RadComboBoxItem Text="bbbb1" Value="bbb1" />
                <telerik:RadComboBoxItem Text="item11" Value="item11" />
            </Items>
        </telerik:RadComboBox>

Example demo: https://demos.telerik.com/aspnet-ajax/combobox/examples/overview/defaultcs.aspx

And here's what JAWS sees:

Note the extra unlabeled "Button" following every combo box. This is confusing to the reader. They have no way to know that it is associated with the preceding field.

Additionally, I've noted that when aria-support is turned on, this button becomes focusable. Tabindex="0" is added to the span inside the text box. We prefer the older functionality where the button was not a tab stop. Which is the same behavior you have when aria support is turned off. For reference, see your own aria demo:

• https://demos.telerik.com/aspnet-ajax/combobox/examples/wai-aria-support/defaultvb.aspx?show-source=true

Note that the tab key stops on the drop down arrow. (You can check the previously linked demo and see that the arrows in those boxes are not tab stops.)

If right-click the arrow and inspect, you'll find the following: 

<span id="ctl00_ContentPlaceholder1_RadComboBox2_Arrow" class="p-icon p-i-arrow-60-down" role="button" aria-controls="ctl00_ContentPlaceholder1_RadComboBox2_listbox" tabindex="0"></span>

Adding aria support should not change behavior, so we'd prefer the tab stop was removed.

In our own application, we have additional problems when the button is focused and activated with either the "space" or "enter" keys, it refocuses the field, but it does not actually open the drop down. I do not see that problem in your demo. However, if the arrow button was removed as a tab stop and from the INS+F5 dialog, this would not be a problem.

Please note that all of the above is in Chrome. 

Workaround: 

Using the following code in the OnClientLoad event of the ComboBox:

  var _DropDown_OnClientLoad = function (sender, args) {
    var input = sender.get_inputDomElement();

    //Remove tabindex from down-arrow button. We never want to focus this button.
    $telerik.$(input).siblings("button").find("[role=button]").attr("tabindex", null);

    //hide the down-arrow button from screen readers. The entire combo box
    //should be considered a single control.
    $telerik.$(input).siblings("button").attr("aria-hidden", "true");
}

Browser:

Microsoft Edge 44.18362.449.0

Telerik Control:

RadCombobox

Teleri Version:  Version=2017.3.913.45,

Issue:

When a item is selected and a postback is occured, the SelectedValue returns an empty string.

Expected behavior:

The correct SelectedValue should be return.

Thing that have been tried so far:

1: upgrade the telerik to the latest version (2020.114) ---> issue persists

2: set autopostback to "true" problem solved

3: use other browsers (chrome, FireFox, new Version 79.0.309.68 ) issue disappears

Sample code: 

1: aspx

2: code behind

Reproduction: https://demos.telerik.com/aspnet-ajax/combobox/examples/wai-aria-support/defaultcs.aspx

1) focus the ComboBox

2) press C 

Expected: 

- Camembert Pierrot is selected

- JAWS pronounces "c" and "Camembert Pierrot"

Actual: 

- Camembert Pierrot is selected

- JAWS pronounces "c"

Reference for expected behavior: https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html

In WebService binding scenario, the text of the items is not encoded and HTML code might get executed. 

In Server-side Load on Demand binding this is not observed. 

The following code can be used as a temporary workaround for WebService binding scenario: 

<script type="text/javascript">
    Telerik.Web.UI.RadComboBoxItem.prototype._renderItemContent = function (d) {
        if (this.get_imageUrl()) {
            this._renderImage(d);
        }

        //https://stackoverflow.com/questions/6234773/can-i-escape-html-special-chars-in-javascript
        function escapeHtml(unsafe) {
            return unsafe
                    .replace(/&/g, "&amp;")
                    .replace(/</g, "&lt;")
                    .replace(/>/g, "&gt;")
                    .replace(/"/g, "&quot;")
                    .replace(/'/g, "&#039;");
        }

        d[d.length] = escapeHtml(this.get_text());
    }
</script>

RadCombobox WAI-ARIA improvements 

1. When we have a selection but do not have filtering and custom text:

aria-autocomplete: list ---> Combobox list item
2. When we have selection and filtering: ---> Combobox inline completion list item
aria-autocomplete: both
3. disabled: aria-autocomplete: none 

https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.0pattern/combobox-autocomplete-both.html

In combo box once a value is selected there is no option to clear the selection. We can have an additional button outside the combo box to achieve the same.

This will require some additional coding.

Since this is a regular scenario why can't there be a property within the RadCombo Box that makes clear selection button visible next to the combo box drop-down button and does the task of clearing the selection?

<telerik:RadComboBox runat="server" ID="CB" AllowCustomText="true" HighlightTemplatedItems="true" EnableViewState="false" CheckBoxes="true" EnableLoadOnDemand="true" OnItemsRequested="CB_ItemsRequested" ></telerik:RadComboBox>