Problem with OnClientKeyPressing with EnableLoadOnDemand

[James]

I have a RadComboBox that I'm using to allow users to perform assisted searches.  As they type in the combo box field, "search assist" values are populated in the drop down section.  The user can either hit enter (or click a search button) or select one of the values in the drop down to perform a search.   Let me rephrase and emphasize that the user can either use their freely entered text or select one of the suggested search terms.

If the user hits the enter key, I am capturing this with the OnClientKeyPressing event. Most of the time this works fine but the event fails to fire if I hit enter at the exact moment I see the "Loading..." text in the drop down.  If I hit enter a fraction of a second before or after the loading text, it works normally.

Here is my combo box:

<telerik:RadComboBox ID="ddlTextSearch" runat="server" Width="200px" CssClass="SearchControl"
            AllowCustomText="True" EnableLoadOnDemand="True"
            ShowDropDownOnTextboxClick="False" ShowToggleImage="False"
            onclientitemsrequesting="ddlTextSearch_ItemRequesting"
            OnClientKeyPressing="ddlTextSearch_HandleKeyPress"
            OnClientSelectedIndexChanged="ddlTextSearch_SelectionChanged" ZIndex="9900">
            <WebServiceSettings Method="GetCompletionList" Path="~/TextSearchAutoComplete.aspx" />
</telerik:RadComboBox>
<script type="text/javascript">
            Telerik.Web.UI.RadComboBox.prototype._onInputCellClick = function(e) {
                if (this._enabled) {
                    //  if (this.get_text() !== this.get_emptyMessage())
                    //       this.selectText(0, this.get_text().length);
                    if (!this.get_dropDownVisible() && this._showDropDownOnTextboxClick)
                        this._showDropDown(e);
                    return true;
                }
            }
</script>

Here is my js method:

 function ddlTextSearch_HandleKeyPress(sender, eventArgs)
        {
            if(eventArgs.get_domEvent().keyCode == 13)
            {
                var combo = $find("<%= ddlTextSearch.ClientID %>");
                var ajaxManager = $find("<%= RadAjaxManager.GetCurrent(Page).ClientID %>");
                if (combo && combo.get_highlightedItem() != null)
                {
                    ajaxManager.ajaxRequestWithTarget("<%= ddlTextSearch.UniqueID %>","<%= WebUtils.HttpRequestEventArguments.SearchAssist %>");
                }
                else
                {
                    ajaxManager.ajaxRequestWithTarget("<%= ddlTextSearch.UniqueID %>","<%= WebUtils.HttpRequestEventArguments.Search %>");
                }
           }
        }

As you can see, I need to differentiate between selecting an item from the drop down list and the freely entered text.

Again, everything works except when I hit enter while I see the "Loading..." text in the drop down portion of the combo box.  When I hit enter at that time, the event is not fired and nothing appears to happen.  How do I handle this scenario with your control?

[James]

Anyone?

[Veronica]

Hello James,

I can confirm KeyPressing event doesn't fire while the control retrieves data from the callback. This is intentional, but we'll consider changing this behavior. For the moment you can use the following workaround:

Use jQuery to subsctibe to the keydown event instead of OnKeyPressing :

var $ = $telerik.$;
       $(document).ready(function() {
           $("#ddlTextSearch_Input").keydown(ddlTextSearch_HandleKeyPress);
       });

In the handler you have to use the following code to ensure that event would be fired for most browsers:

function ddlTextSearch_HandleKeyPress(e) {
            if (!e)
                e = event;

            var keyCode = e.keyCode || e.which;
            if (keyCode == 13) {
                alert("enter is pressed");
            }
        }

Find the full code in the attached .zip code.

Hope this helps.

All the best,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

[James]

Thank you Veronica, I can confirm that this works for me.  I just made one small change so it would work in my scenario:

 var $ = $telerik.$;
 $(document).ready(function(){$("#" + "<%= ddlTextSearch.ClientID %>" + "_Input").keydown(ddlTextSearch_HandleKeyPress);});

I had to get the control's client ID because this is in a user control inside a master page.  Thanks!