Combo box and the enter key in IE

[Michael Dunbar]

For some reason when you select an item from the combo box drop down and then press enter nothing happens. It only behaves like this in IE. In FF3 it works as expected.

I have the button set as the default button too with:

<asp:Panel ID="pnlSearch" DefaultButton="btnSearch" runat="server">
            <label>I'm looking for:</label>
            <noscript>
                <asp:TextBox ID="txtSearchTermNoScript" runat="server" CssClass="textInput" />
            </noscript>
            <telerik:RadComboBox ID="txtSearchTerm" runat="server" AllowCustomText="true"
                MarkFirstMatch="false" EnableLoadOnDemand="true" Width="280px" Height="168px"
                onitemsrequested="txtSearchTerm_ItemsRequested" onload="txtSearchTerm_Load"
                OnClientItemsRequested="OnClientItemsRequested" EnableEmbeddedSkins="false" Skin="Cks">
                <CollapseAnimation Duration="200" Type="OutQuint" />
            </telerik:RadComboBox>
            <label>in&hellip;</label>
            <asp:DropDownList ID="ddlSearchCollection" runat="server" CssClass="dropDownBox" />
            <asp:ImageButton ID="btnSearch" runat="server" CssClass="searchButton" OnClick="btnSearch_Click" />
</asp:Panel>

Am I missing a property on the combo box?

Thanks,

Michael

[Yana]

Hi Michael Dunbar,

Thank you for contacting us.

I tested the code you sent and wasn't able to see the problem. Please, check out the attached project and give it a try.  In case this doesn't help, please open a support ticket and send us a running project illustrating the problem.


Yana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Dunbar]

Hi Yana,

Take a look at the code you have sent me, this does actually demonstrate the problem.

When you select an option and then press the enter key nothing happens. You have to click the mouse to call the event you have on the button.

For example, put this event on your button: onclick="btnSearch_Click"

and try to debug this code:

protected void btnSearch_Click(object sender, ImageClickEventArgs e)
    {
        string test = txtSearchTerm.Text;
    }

You will see you never hit the Click event on the button when pressing enter having selected an item from the drop down. You have to use a mouse click.

Thanks,

Michael

[Yana]

Hi Michael Dunbar,

We managed to solve the problem with the help of JavaScript. Please find attached the modified project. It works as expected now.

Greetings,
Yana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Dunbar]

Hi Yana,

See where you are going with this, but could you check your code again please.

The server side event is still not triggering in IE7. It does in FF3 and Opera.

If you put an alert tag in the JavaScript then IE calls this but does not trigger the server side event. Give it a test.

<script type="text/javascript">
                function keyPressHandler (sender, args)
                {
                    if (args.get_domEvent().keyCode == 13)
                    {
                        var searchBtn = $get('btnSearch');
                       
                        if (searchBtn)
                        {
                            alert("test");
                            searchBtn.click();
                        }
                    }
                }
</script>

[Michael Dunbar]

Ok, I fixed it myself as follows:

Create the following class (I called it TieButton):

    // Configures what button to be clicked when the user presses Enter in a textbox.
    public static void ButtonToTie(Page page, Control TextBoxToTie, Control ButtonToTie)
    {
        string jsString = string.Empty;

        // Check button type and get required jscript
        if (ButtonToTie is LinkButton)
        {
            jsString = "if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {"
                + page.ClientScript.GetPostBackEventReference(ButtonToTie, "").Replace(":", "$") + ";return false;} else return true;";
        }
        else if (ButtonToTie is ImageButton)
        {
            jsString = "if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {"
                + page.ClientScript.GetPostBackEventReference(ButtonToTie, "").Replace(":", "$") + ";return false;} else return true;";
        }
        else
        {
            jsString = "if ((event.which && event.which == 13) || (event.keyCode && event.keyCode == 13)) {document."
                + "forms[0].elements['" + ButtonToTie.UniqueID.Replace(":", "_") + "'].click();return false;} else return true; ";
        }

        // Attach jscript to the onkeydown attribute
        if (TextBoxToTie is HtmlControl)
        {
            ((HtmlControl)TextBoxToTie).Attributes.Add("onkeydown", jsString);
        }
        else if (TextBoxToTie is WebControl)
        {
            ((WebControl)TextBoxToTie).Attributes.Add("onkeydown", jsString);
        }
    }

then in your page load do:

TieButton.ButtonToTie(this.Page, txtSearchTerm, btnSearch);

[Yana]

Hello Michael Dunbar,

Check out the attached file, it is a video that reproduces the steps and shows that server-side event is triggering in IE 7. In case we didn't understand right, please, send us a more detailed explanation of the problem.

All the best,
Yana
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Michael Dunbar]

Yeah, I see it is working in your example but the exact same code won't trigger the server side event for me. Strange...

Anyway, it does work with the alternative work around I posted above, so it is fine. Thanks for your help.

Michael.