Issue with Autocomplete

12 posts, 0 answers
  1. Vlad
    Vlad avatar
    7 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    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!
  2. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 21 Jan 2014 Link to this post

    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.

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Vlad
    Vlad avatar
    7 posts
    Member since:
    Jan 2014

    Posted 21 Jan 2014 Link to this post

    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!
  5. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 22 Jan 2014 Link to this post

    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,
  6. Vlad
    Vlad avatar
    7 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 in reply to Princy Link to this post

    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!
  7. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Jan 2014 in reply to Vlad Link to this post

    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.
  8. Vlad
    Vlad avatar
    7 posts
    Member since:
    Jan 2014

    Posted 29 Jan 2014 in reply to Princy Link to this post

    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!
  9. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 29 Jan 2014 in reply to Vlad Link to this post

    Hi Vlad,

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

    Thanks,
    Princy.
  10. Vlad
    Vlad avatar
    7 posts
    Member since:
    Jan 2014

    Posted 30 Jan 2014 Link to this post

    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!
  11. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 04 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
  12. Vlad
    Vlad avatar
    7 posts
    Member since:
    Jan 2014

    Posted 04 Feb 2014 Link to this post

    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!

  13. Nencho
    Admin
    Nencho avatar
    1458 posts

    Posted 07 Feb 2014 Link to this post

    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
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017