RadSearchbox as Defaultbutton in asp:Panel

[Fit2Page]

Hi,

 

How can I let the RadSearchbox button act as the DefaultButton in an asp:Panel?

So that when ENTER is given no other buttons on the page are triggered?

 

Marc

 

[Rumen]

Hi Marc,

RadSearchBox is not a button control and, therefore, does not implement the IButtonControl interface required for the DefaultButton functionality in an asp:Panel. As a result, pressing the Enter key within a RadSearchBox will not automatically trigger a button click or a form submission.

To achieve similar functionality, you can attach a client-side event handler to the keypress event of the RadSearchBox input field. This handler will check for the Enter key press and programmatically trigger a click event on the search icon button within the RadSearchBox. Here’s how you can implement this:

            <telerik:RadScriptBlock runat="server">
                <script>
                    function pageLoad() {
                        var $ = $telerik.$;
                        $(".rsbInput").on("keypress", function (e) {
                            if (e.keyCode == Sys.UI.Key.enter) {
                                $(".rsbIconSearch").click();
                            }
                        });
                    }
                </script>
            </telerik:RadScriptBlock>

            <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
                CssClass="searchBox" Skin="Silk"
                Width="460" DropDownSettings-Height="300"
                DataSourceID="SqlDataSource1"
                DataTextField="fullName"
                DataValueField="id"
                DataKeyNames="sport,birthday,country"
                EmptyMessage="Search"
                Filter="StartsWith"
                MaxResultCount="20"
                OnDataSourceSelect="RadSearchBox1_DataSourceSelect"
                OnSearch="RadSearchBox1_Search">
                <SearchContext DataSourceID="SqlDataSource2" DataTextField="name" DataKeyField="id" DropDownCssClass="contextDropDown"></SearchContext>
            </telerik:RadSearchBox>

I hope this helps.

 

Regards,
Rumen
Progress Telerik

[Fit2Page]

Hi Rumen,

 

Other customers start complaining also, after updating to 2024.3
The ENTER key is not reacting correctly in our scenario, I guess this has to do with:

 

SearchBox

FIXED

• Modernize SearchBox Keyboard Event Handling to Replace Deprecated e.keyCode and e.charCode Properties with e.code

 

I can only work around this so far by placing "UseSubmitBehavior= false" on all other buttons on the page.

 

Did you test it on your end?

 

Regards,

Marc

[Rumen]

Hi Marc,

Yes, the modernization of keyboard handling has been tested, and so far, no bugs have been reported.

Could you please provide more details and specific steps to reproduce the issue with the Enter key in the latest version? I have tested the Telerik SearchBox demo using the latest version, as well as the local demos for the 2024 Q2 release. In my tests, I did not encounter any discrepancies in keyboard behavior or any related issues.

For your reference, I have attached my test project. Is there a step I might be missing?

Thank you!

[Fit2Page]

On my testpage I have:

            <telerik:RadScriptBlock runat="server">
                <script>
                    function pageLoad() {
                        var $ = $telerik.$;
                        $(".rsbInput").on("keypress", function (e) {

                            if (e.keyCode == Sys.UI.Key.enter) {
                                //alert("hier");
                                $(".rsbIconSearch").click();
                            }
                        });
                    }
                </script>
            </telerik:RadScriptBlock>


<telerik:RadSearchBox  runat="server" EnableAutoComplete="False" ID="RadSearchBox1" OnSearch="RadSearchBox1_Search"></telerik:RadSearchBox>
        <asp:Button ID="Button1" runat="server" OnCommand="Button1_Command" Text="Button" />
        <asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

 

 

And in my codebehind

        Protected Sub RadSearchBox1_Search(sender As Object, e As SearchBoxEventArgs)
            Label1.Text = "Searchboxclick"
        End Sub

 

Protected Sub Button1_Command(sender As Object, e As CommandEventArgs)
            Label1.Text = "Buttonclick"
        End Sub

 

When I use the ENTER key press in de searchbox, the button is submitted instead. This was never the case.

 

Marc

                            

[Rumen]

Thank you for the code, Marc!

I tried to replicate the problem with it but without success. 

Can you try to cancel the enter keypress event and then to programmatically click the Search Icon:

ASPX Code

<telerik:RadScriptBlock runat="server">
    <script>
        function pageLoad() {
            var $ = $telerik.$;
            $(".rsbInput").on("keypress", function (e) {
                if (e.keyCode == Sys.UI.Key.enter) {
                    e.preventDefault(); // Prevent the default form submission
                    $(".rsbIconSearch").click();
                }
            });
        }
    </script>
</telerik:RadScriptBlock>

<telerik:RadSearchBox runat="server" EnableAutoComplete="False" ID="RadSearchBox1" OnSearch="RadSearchBox1_Search"></telerik:RadSearchBox>
<asp:Button ID="Button1" runat="server" OnCommand="Button1_Command" Text="Button" />
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>

Code-Behind (VB.NET)

Protected Sub RadSearchBox1_Search(sender As Object, e As SearchBoxEventArgs)
    Label1.Text = "Searchboxclick"
End Sub

Protected Sub Button1_Command(sender As Object, e As CommandEventArgs)
    Label1.Text = "Buttonclick"
End Sub

 

Regards,
Rumen
Progress Telerik

[Fit2Page]

Hi Rumen,

With this tweak it is working as expected.

Thank you.

 

Marc