Use 'Tab' Key to Select Item

5 posts, 1 answers
  1. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 19 Jun 2009 Link to this post

    When using the RadComboBox, I can begin typing and watch the list pear down.  It's very pretty. :-)  However, I have to use the "enter" key instead of the "tab" key to select the item.

    It seems more intuitive to use the "tab" key to select the item and move to the next field in my form.  Is there a way to do this?  Can I attach to the OnClientKeyPressing JavaScript method to accomplish this?
  2. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 19 Jun 2009 Link to this post

    Don't you love documentation?

    http://www.telerik.com/help/aspnet/combobox/onclientkeypressing.html

    So that leads to my next question:  How do I set the highlighted item as selected...like pressing enter?



  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 19 Jun 2009 Link to this post

    JavaScript debugging stinks.  Nevertheless, here is how I got it working.  JavaScript function:

            function radComboKeyPress(comboBox, eventArgs) { 
                var keyCode = eventArgs.get_domEvent().keyCode; 
                if (keyCode == 9) { 
                    var items = comboBox.get_items(); 
                    var i; 
                    for (i = 0; i < items.get_count(); i++) { 
                        if (items.getItem(i).get_highlighted() == true) { 
                            items.getItem(i).select(); 
                            return
                        } 
                    } 
                } 
            } 

    RadComboBox:

    <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientKeyPressing="radComboKeyPress"  
    MarkFirstMatch="true" EmptyMessage="Select something..." Filter="Contains" AllowCustomText="false"></telerik:RadComboBox> 

  5. Answer
    Veselin Vasilev
    Admin
    Veselin Vasilev avatar
    2992 posts

    Posted 22 Jun 2009 Link to this post

    Hi MJ,

    We are glad that you have managed to find a way by yourself.

    I can only suggest to use the get_highlightedItem() method of RadComboBox client-object instead of looping through all combo items.

    I have just noticed that this method is not documented so I added it.

    All the best,
    Veselin Vasilev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
  6. Mark
    Mark avatar
    79 posts
    Member since:
    Apr 2007

    Posted 22 Jun 2009 Link to this post

    Great, thanks Veselin!  Here's the new solution:

    function radComboKeyPress(comboBox, eventArgs) { 
        var keyCode = eventArgs.get_domEvent().keyCode; 
        if (keyCode == 9) { 
            try { 
                comboBox.get_highlightedItem().select(); 
            } 
            catch (err){ 
                return
            } 
        } 
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017