Capture Enter Keystroke While Drop Down List is Open?

3 posts, 0 answers
  1. Rob
    Rob avatar
    116 posts
    Member since:
    Aug 2012

    Posted 15 Mar 2011 Link to this post

    <td class="rightCell" style="width: 130px;">
                                            <telerik:RadComboBox ID="cmboSize1" Width="240px" Height="300px" runat="server" AutoPostBack="false"
                                                DataTextField="SIZE_1_DESC" DataValueField="SIZ_1_CDE" EnableLoadOnDemand="true"
                                                HighlightTemplatedItems="true" AllowCustomText="true" OnClientKeyPressing="HandleKeyPress">
                                                <ItemTemplate>
                                                    <div onclick="StopPropagation(event)">
                                                        <asp:CheckBox runat="server" ID="chk1" Checked="false" />
                                                        <asp:Label runat="server" ID="Label1" AssociatedControlID="chk1" Text='<%# Eval("SIZE_1_DESC") %>'>                        
                                                        </asp:Label>
                                                    </div>
                                                </ItemTemplate>
                                                <Items>
                                                    <telerik:RadComboBoxItem Text='<%# Eval("SIZE_1_DESC") %>' />
                                                </Items>
                                            </telerik:RadComboBox>
                                        </td>
                                        <td class="leftCell" style="width: 18px;">
                                            <asp:ImageButton ID="btnSize1Add" runat="server" ToolTip="Add" ImageUrl="~/App_Themes/BlueBT2009/Images/Add.gif" />
                                        </td>

    The above code is the definitionof a RadComboBox that uses the OnClientKeyPressing event.  The drop down list consists of checkbox selectable items.  I'm experiencing that users are selecting items in the drop down by clicking on the checkboxes and while the drop down list is open they are hitting the Enter Key in order to make the JS function HandleKeyPress() fire off.  The real problem is that a postback for the image button is getting sent instead of the HandleKeyPress() JS function deciding the postback event.  I noticed that if the cursor has focus in the text area of the combobox, I get the HandleKeyPress() function to execute when the Enter Key is typed, but otherwise it seems to do a form level postback.  So my questions to you are:

    1)  Can the Combobox control capture the Enter keystroke if the user is making checkbox selections in the drop down list while the list is open and does not have the focus of the cursor in the text area of the combobox?  If so, how to make this happen?

    2) If question #1 is not possible then how to cancel the "form level" or button postback that happens when hitting the Enter Key and without cursor focus being in the combbox textarea?

    Thanks!
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Mar 2011 Link to this post

    Hello Dudeman,

    Give a try with the following approach for canceling the postback.

    Clientside:
    <script type="text/javascript">
    window.document.onkeydown = CheckEnter;
     function CheckEnter()
        {
             var radCombo = $find('<%=cmboSize1.ClientID%>');
             if (( window.event.keyCode; == 13) && (radCombo.get_dropDownVisible()))
                return false;
            return true;
        }
    </script>

    Thanks,
    Shinu.
  3. Rob
    Rob avatar
    116 posts
    Member since:
    Aug 2012

    Posted 16 Mar 2011 Link to this post

    I want to thank you for your assistance.  This approach is definitely the starting point for me to handle the situation that meets the user's needs.  Now I can move forward.  :)
Back to Top