Enter Key - ComboBox

4 posts, 0 answers
  1. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 25 Jan 2012 Link to this post

    I am using RC Q2 2010 Net 4

    I am using a combobox as a lookup that automatically fills with data from a SQL Table so that when a user begins typing in the box the data filters. Everything works great as long as the user SELECTS the item from the dropdown list. However, if the user types the exact item in the box and the dropdown filters to the exact text and the user hits the enter key and does not select the item from the list, the box queries all items in the table and not just the item that was typed.

    For example, the CB we are using lists data from a user table with a field called LastName.

    When the user starts typing 'bro' the box filters the list and shows all users that have a last name that begins with 'bro'


    If the user selects browning from the list, the correct user data is queried and returned.

    However, if the user types the entire name browning and hits the enter key instead of selecting it from the dropdown list, all users are returned.

    Here is the ASPX code for my ComboBox:
    <telerik:RadComboBox ID="rcb_Users" Runat="server" AutoPostBack="True"
    DataSourceID="sds_UserList" DataTextField="UserName"
    DataValueField="UserName" EmptyMessage="Select User" Height="150px"
    Skin="WebBlue" EnableAutomaticLoadOnDemand="True" EnableVirtualScrolling="True"
    ItemsPerRequest="10" ShowMoreResultsBox="True">

    Is there a way to alow the use of the enter key?
  2. Kalina
    Kalina avatar
    918 posts

    Posted 31 Jan 2012 Link to this post


    I used the markup that you have pasted here and tried to reproduce issue - but without success.
    When I type the whole text of an item in RadComboBox input and hit Enter and then open the dropdown - only the selected item is listed there.
    Please take a look at this demonstration video. Maybe I miss something?

    This is the code I tested:
    <telerik:RadComboBox ID="rcb_Users" runat="server"
    AutoPostBack="True" DataTextField="CompanyName"
        DataValueField="CompanyName" EmptyMessage="Select User"
        Height="150px" DataSourceID="SqlDataSource1"
        Skin="WebBlue" EnableAutomaticLoadOnDemand="True"
        ItemsPerRequest="10" ShowMoreResultsBox="True">
    <asp:SqlDataSource runat="server" ID="SqlDataSource1"
            ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString2 %>"
            SelectCommand="SELECT [CompanyName] from [Customers] ORDER By [CompanyName]" />

    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. DevCraft R3 2016 release webinar banner
  4. Allan
    Allan avatar
    121 posts
    Member since:
    Jun 2008

    Posted 31 Jan 2012 Link to this post

    Perhaps I did not explain this well enough.

    You are correct in stating that if I type abowning, the dropdown list filters to only abrowning. If I then use my mouse and select abrowning, from the list, the page posts and the query returns abrowning to my radgrid correctly.

    However, if I hit the enter key rather than selecting abrowning from the list, the page posts but returns all items to the grid rather than just abrowning.
  5. RvdGrint
    RvdGrint avatar
    112 posts
    Member since:
    May 2011

    Posted 31 Jan 2012 Link to this post


    I did a similar thing with pressing the TAB key. I've defined a OnClientKeyPressing function and handled it with JavaScript on the client side.
    Maybe you can use my approach.

    function OnRadComboKeyPress(sender, eventArgs) {
        if (eventArgs.get_domEvent().keyCode == 9 /*TAB*/) {
            var itemHighLighted = sender.get_highlightedItem();
            var itemSelected = sender.get_selectedItem()
            if (itemHighLighted) {
                if (itemHighLighted != itemSelected) {
                    setTimeout(function () { itemHighLighted.select(); });
        else if (!sender.get_dropDownVisible()) {

Back to Top