Issue with Autocomplete

[Vlad]

Hello!

I am evaluating RadControls for ASP.NET AJAX Q3 2013 and found an issue with the RadComboBox control.
It seems that the autocomplete feature selects the first matched item regardless of its visibility.

In the following example, if we press "2" the item "2 Hidden" is selected though it is not shown:

<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="1 Shown" />
        <telerik:RadComboBoxItem runat="server" Text="2 Hidden" style="display:none" />
        <telerik:RadComboBoxItem runat="server" Text="2 Shown" />
    </Items>
</telerik:RadComboBox>

Please the the attached screenshot.

What am I doing wrong? Is there a simple way to work around this issue?

Thank you!

[Princy]

Hi Vlad,

Please try to set the Visible property of RadComboBoxItem to false to achieve your scenario.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="1 Shown" />
        <telerik:RadComboBoxItem runat="server" Text="2 Hidden" Visible="false" />
        <telerik:RadComboBoxItem runat="server" Text="2 Shown" />
    </Items>
</telerik:RadComboBox>

Thanks,
Princy.

[Vlad]

Hi Princy,

Unfortunately this won't work for me. In my scenario I am going to change the combo box items visibility at the client side (with javascript) dynamically depending on selection in another combo box. As I understand, the items with Visible=false won't be rendered at all.

Thank you!

[Princy]

Hi Vlad,

You can hide the RadComboBoxItem from the ClientSide so it will not show the hidden values. Please have a look into the following code snippet to achieve your scenario.

ASPX:

<telerik:RadComboBox ID="RadComboBox1" runat="server">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="1 Shown" />
        <telerik:RadComboBoxItem runat="server" Text="2 Hidden" />
        <telerik:RadComboBoxItem runat="server" Text="2 Shown" />
    </Items>
</telerik:RadComboBox>

JavaScript:

<script type="text/javascript">
    function pageLoad() {
        var combo = $find("<%=RadComboBox1.ClientID %>");
        combo.findItemByText("2 Hidden").hide();
    }
</script>

Thanks,
Princy,

[Vlad]

Hi Princy,

Unfortunately this does not work when the hidden and visible items have the same text but different values.

For example:

<script type="text/javascript">
    function pageLoad()
    {
        var combo = $find("<%=RadComboBox1.ClientID%>");
        combo.get_items().getItem(1).hide();
    }

    function onComboChanged(sender, args)
    {
        var combo = $find("<%=RadComboBox1.ClientID%>");
        var label = $get("<%=lbl.ClientID%>");
        label.innerText = 'Selected = ' + combo.get_selectedItem().get_value();
    }
</script>

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="onComboChanged">
<Items>
    <telerik:RadComboBoxItem runat="server" Text="1 Shown" Value="1 Shown" />
    <telerik:RadComboBoxItem runat="server" Text="2 Shown" Value="2 Hidden" />
    <telerik:RadComboBoxItem runat="server" Text="2 Shown" Value="2 Shown" />
</Items>
</telerik:RadComboBox>
<asp:Label ID="lbl" runat="server" />

Pressing "2" key selects item with Value= "2 Hidden".

Also, I found that if I first select "1 Shown" with a mouse and then press "2" key, it works as expected selecting item with Value = "2 Shown". But if I first select "1 Shown" pressing "1" key and then press "2" key, it selects item with Value = "2 Hidden".

Thank you!

[Princy]

Hi Vlad,

Please try the following JavaScript which works fine at my end.

JavaScript:

function pageLoad() {
    var combo = $find("<%=RadComboBox1.ClientID%>");
    var item = combo.get_items().getItem(1);
    //or
    var item = combo.findItemByValue("2 Hidden");
    item.hide();
}

Thanks,
Princy.

[Vlad]

Hi Princy,

it behaves exactly as the code in my previous message.

BUT, right now I found that the issue occurs in the Internet Explorer (IE 10 and IE 11) only. The other browsers (I tried Chrome v.32.0, Opera v.12.15, Firefox v.26.0) work well.

Did you try it with IE?
Also, it seems important to focus the combo box and select the item with keyboard only.

Thank you!

[Princy]

Hi Vlad,

Here is the sample project please download it and check, which works fine in IE10 and IE11 at my side.

Thanks,
Princy.

[Vlad]

Hi Princy,

unfortunatelly I get the same issue (for IE10) with your sample project.

I loaded the page, pressed "TAB" to focus the combo box, pressed "2" to select the item, and pressed one more "TAB" to leave the combo box and display the label "Selected = 2 Hidden".

Thank you!

[Nencho]

Hello Vlad,

You could use the initial approach that you had decided to use with managing the Style="display: none". But in addition, I would suggest you to manage the Enabled state of the RadComboBoxItem, in order to restrict its selection, when the item is hidden. In addition, here is a video, demonstrating the behavior at my end when the aforementioned approach is used.

Regards,
Nencho
Telerik

[Vlad]

Hi Nencho,

I am sorry, but I still have to say "unfortunatelly".

Your suggestion solves one issue, but causes another one.

As I wrote earlier, In my scenario I am going to change the combo box items visibility at the client side (with javascript) dynamically depending on selection in another combo box.

Please consider the following snippet:

01.<script type="text/javascript">
02.    function pageLoad()
03.    {
04.        var item = $find("<%=RadComboBox1.ClientID%>").get_items().getItem(1);
05.        item.get_element().style.display = 'none';
06.        item.disable();
07.    }
08.
09.    function onComboChanged(sender, args)
10.    {
11.        alert('OnComboChanged, SelectedValue = ' + $find("<%=RadComboBox1.ClientID%>").get_selectedItem().get_value());
12.    }
13.
14.    function onBtnClicked(sender, args)
15.    {
16.        alert('SelectedValue = ' + $find("<%=RadComboBox1.ClientID%>").get_selectedItem().get_value());
17.    }
18.</script>
19.<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="onComboChanged">
20.<Items>
21.    <telerik:RadComboBoxItem runat="server" Text="1 Shown" Value="1 Shown" />
22.    <telerik:RadComboBoxItem runat="server" Text="2 Shown" Value="2 Hidden" />
23.    <telerik:RadComboBoxItem runat="server" Text="2 Shown" Value="2 Shown" />
24.</Items>
25.</telerik:RadComboBox>
26.<telerik:RadButton ID="RadTextButton1" runat="server" AutoPostBack="false" OnClientClicked="onBtnClicked" />

I load the page, press "TAB" to focus the combo box, press "2" to select the item, and press one more "TAB" to leave the combo box. The correct combobox item is selected in the combo box, but OnClientSelectedIndexChanged event is not raised. Moreover, if then I click the button next to the combo box, it displays "SelectedValue = 1 Shown" instead of expected "SelectedValue = 2 Shown".

The event is raised if I comment out line 06, but this causes the issue I am describing in this thread.

I checked this with IE10 using UI for ASP.NET AJAX Q3 2013 SP2.

Thank you!

[Nencho]

Hello Vlad,

I was able to replicate the described issue, which actually is only replicable under Internet Explorer. While I have already forwarded this issue to our developer team, I would suggest you to use the following workaround - at Blur event of the Input, you could find the item by value and set it as selected, in order to properly trigger the OnClientSelectedIndexChanged :

<telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientSelectedIndexChanged="onComboChanged" OnClientLoad="OnClientLoad">
           <Items>

               <telerik:RadComboBoxItem runat="server" Text="1 Shown" Value="1 Shown" />
               <telerik:RadComboBoxItem runat="server" Text="2 Shown" Value="2 Hidden" />
               <telerik:RadComboBoxItem runat="server" Text="2 Shown" Value="2 Shown" />
           </Items>
       </telerik:RadComboBox>
       <telerik:RadButton ID="RadTextButton1" runat="server" AutoPostBack="false" OnClientClicked="onBtnClicked" />

js:

<script type="text/javascript">

    function pageLoad() {

        $telerik.$("#RadComboBox1_Input").on("blur", function (e) {

            var combo = $find("<%=RadComboBox1.ClientID%>")
            var item = combo.findItemByValue(combo.get_text());
            if (item.get_text() != combo.get_selectedItem().get_text())
                item.select();
        })
        }


        function OnClientLoad(sender) {

            var item = $find("<%=RadComboBox1.ClientID%>").get_items().getItem(1);
            item.get_element().style.display = 'none';
            item.disable();
        }

        function onComboChanged(sender, args) {
            alert('OnComboChanged, SelectedValue = ' + $find("<%=RadComboBox1.ClientID%>").get_selectedItem().get_value());
        }

        function onBtnClicked(sender, args) {
            alert('SelectedValue = ' + $find("<%=RadComboBox1.ClientID%>").get_selectedItem().get_value());
        }
</script>

Regards,
Nencho
Telerik