This is a migrated thread and some comments may be shown as answers.

Problem with OnClientKeyPressing with EnableLoadOnDemand

3 Answers 84 Views
ComboBox
This is a migrated thread and some comments may be shown as answers.
James
Top achievements
Rank 1
James asked on 08 Jun 2010, 10:32 PM
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?



3 Answers, 1 is accepted

Sort by
0
James
Top achievements
Rank 1
answered on 11 Jun 2010, 04:36 PM
Anyone?
0
Accepted
Veronica
Telerik team
answered on 14 Jun 2010, 03:16 PM
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.
0
James
Top achievements
Rank 1
answered on 14 Jun 2010, 07:23 PM
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!
Tags
ComboBox
Asked by
James
Top achievements
Rank 1
Answers by
James
Top achievements
Rank 1
Veronica
Telerik team
Share this question
or