[Solved] RadComboBox Enter Key Postback SelectedIndex

[Mike Lichter]

Here is what I am trying to do.  I want a searchable combobox.  Enter key does nothing unless the text typed into the search match's something in the list, or something is already selected (highlighted) via the down/up arrows.

I feel I'm almost there.  I had to check eventArgs._domEvent to get the keyCode.  eventArgs.keyCode is undefined.
The line: item.select() does not seem to work. var item = sender.findItemByText(sender.get_text()); however is finding the correct item.


Any help here would be great.  I don't think what I am trying to do is a crazy scenario.  I think this is a common auto complete.

<script type="text/javascript">
    var ent = false;

    function DetectEnter(sender, eventArgs)
    {
        var keyCode = eventArgs._domEvent.keyCode;

        if (keyCode == 13)
        {
            ent = true;
            var item = sender.findItemByText(sender.get_text());
            if (item) {
                item.select();
                ent = false;
            }
        }
        else
        {
           ent = false;
        }
    }

    function CheckEnter(sender, eventArgs)
    {
        var combo = $find("<%= _SymbolLookup.ClientID %>");

        combo.hideDropDown();
        var temp = ent;
        ent = false;
        eventArgs.set_cancel(temp);
    }
</script>

<telerik:RadComboBox ID="_SymbolLookup" runat="server" AllowCustomText="true" Filter="StartsWith"
    DataTextField="ContactName" EnableLoadOnDemand="True" ShowMoreResultsBox="True"
    EmptyMessage="Type to search for symbol..." OnSelectedIndexChanged="_SymbolLookup_SelectedIndexChanged"
    OnItemsRequested="SymbolLookup_OnItemsRequested" DropDownWidth="525px" Width="200px"
    HighlightTemplatedItems="true" AutoPostBack="true" OnClientKeyPressing="DetectEnter"
    OnClientSelectedIndexChanging="CheckEnter">
    <HeaderTemplate>
        <table width="500px" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width: 50px;">
                    Symbol
                </td>
                <td style="width: 375px;">
                    Name
                </td>
                <td style="width: 75px;">
                    Status
                </td>
            </tr>
        </table>
    </HeaderTemplate>
    <ItemTemplate>
        <table width="500px" cellspacing="0" cellpadding="0">
            <tr>
                <td style="width: 50px;">
                    <%# DataBinder.Eval(Container, "Attributes['Symbol']")%>
                </td>
                <td style="width: 375px; overflow: hidden;">
                    <%# DataBinder.Eval(Container, "Attributes['Instrument_Name']")%>
                </td>
                <td style="width: 75px;">
                    <%# DataBinder.Eval(Container, "Attributes['Status']") %>
                </td>
            </tr>
        </table>
    </ItemTemplate>
</telerik:RadComboBox>

[Simon]

Hi Mike Lichter,

You can get the key code in all browser with the following code:

var e = eventArgs.get_domEvent();
var keyCode = e.keyCode || e.which;

On the other hand, I am not sure the select() method does not work as it is used internally on many occasions in all selection use-cases. Can you explain in greater detail this issue? 

Kind regards,
Simon
the Telerik team