Wrong event fires on text box enter key press

[Jayanthy Kapistalam]

I'm trying to fire the button click function while pressing enter on a text box. But the "delete" button in the grid fires instead of the link button. I tried using default button option, onkeypress event, but nothing works. Here is the code

  <script type="text/javascript">
     function KeyEnter(sender, eventArgs)
    {
       var c = eventArgs.get_keyCode();
       if (c == 13)
       {   
          __doPostBack('btnSearch.ClientID','');
       }      
    }
</script>

<asp:Panel ID="p1" DefaultButton="btnSearch" runat="server">
Search:  <telerik:RadTextBox ID="cbForms" runat="server">
                                          <ClientEvents OnKeyPress="KeyEnter" />
           </telerik:RadTextBox>
 <br/>                              
<asp:LinkButton ID="btnSearch" runat="server" CssClass="searchBtn"
                                                    Text="Search"  style="float:left" CausesValidation="true" onclick="btnSearch_Click"
                                                   ></asp:LinkButton>
                                                    <asp:LinkButton ID="btnClear" runat="server" CssClass=" cancelBtn" Text="Clear" style="float:right;margin-right:25px" OnClick="btnClear_Click"></asp:LinkButton>                                                  
                            </asp:Panel>

<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" HorizontalAlign="NotSet" LoadingPanelID="RadAjaxLoadingPanel1" >
                    <div >
                       <telerik:RadGrid ID="uxForms" runat="server" Skin="WebBlue"
                            AllowSorting="True" AutoGenerateColumns="False" GridLines="None"
                            onitemcreated="uxForms_ItemCreated"
                            ondeletecommand="uxForms_DeleteCommand"                    
                            onneeddatasource="uxForms_NeedDataSource"
                            OnItemDataBound="uxForms_ItemDataBound"
                            width="550px"
                            OnPageIndexChanged="uxForms_PageIndexChanged"
                            PageSize="5" AllowPaging="True" AllowCustomPaging="True"    
                                                 
                            >
                           <MasterTableView Name="Forms" DataKeyNames="FormID" CommandItemDisplay="Top" >                          

                               <RowIndicatorColumn>
                                   <HeaderStyle Width="25px" />
                               </RowIndicatorColumn>
                               <ExpandCollapseColumn>
                                   <HeaderStyle Width="25px" />
                               </ExpandCollapseColumn>
                               <CommandItemTemplate>
                                <div style="float:left;">
                                    <asp:Image ID="AddRecord" runat="server" ImageUrl="/admin/images/AddRecord.gif"  AlternateText="Add Record" />
                                    <asp:HyperLink ID="uxInsertLink" runat="server">Add New Form</asp:HyperLink>
                                </div>
                                
                            </CommandItemTemplate>

                               <Columns>
                                    <telerik:GridTemplateColumn UniqueName="TemplateEditColumn" ItemStyle-Width="30px" HeaderStyle-Width="30px">                                    
                                        <ItemTemplate>
                                            <asp:HyperLink ID="uxEditLink" runat="server"><asp:Image ID="EditRecord" runat="server" ImageUrl="/admin/images/Edit.gif" AlternateText="Edit Form" /></asp:HyperLink>
                                        </ItemTemplate>
                                        
                                        <ItemStyle Width="25px" />                                
                                    </telerik:GridTemplateColumn>
                                    <telerik:GridBoundColumn DataField="FormID" UniqueName="FormID" Display="false" />                              
                                   
                                    <telerik:GridButtonColumn ConfirmText="Delete this form?" ButtonType="ImageButton" ImageUrl="/admin/images/Delete.gif" CommandName="Delete" Text="Delete Form" UniqueName="DeleteColumn">
                                        
                                        <ItemStyle HorizontalAlign="Center" />
                                        <ItemStyle Width="25px" />
                                    </telerik:GridButtonColumn>

                               </Columns>
                           </MasterTableView>
                           <FilterMenu EnableTheming="True" Skin="WebBlue">
                               <CollapseAnimation Duration="200" Type="OutQuint" />
                           </FilterMenu>
                           <PagerStyle Mode="Slider" />
                        </telerik:RadGrid>
                        
                    </div>
                </telerik:RadAjaxPanel>

      CS File:
protected void Page_Load(object sender, EventArgs e)
        {
 this.Page.Form.DefaultButton = btnSearch.ClientID;
}
            

[Sebastian]

Hello Jayanthy,

To intercept the [ENTER] key press from the keyboard after typing in RadTextBox, consider wiring directly its onkeyup event as follows:

 <script type="text/javascript">
    function KeyPressed(event)
    {
       var c = event.keyCode;
       if (c == 13)
       {
          $find("<%= btnSearch.ClientID %>").click();
       }
    }
</script>

<asp:Panel ID="p1" DefaultButton="btnSearch" runat="server">
Search:  <telerik:RadTextBox ID="cbForms" runat="server" onkeyup="KeyPressed(event)">
           </telerik:RadTextBox>
 <br/>
<asp:LinkButton ID="btnSearch" runat="server" CssClass="searchBtn" Text="Search"  style="float:left" CausesValidation="true" onclick="btnSearch_Click"></asp:LinkButton>
<asp:LinkButton ID="btnClear" runat="server" CssClass=" cancelBtn" Text="Clear" style="float:right;margin-right:25px" OnClick="btnClear_Click"></asp:LinkButton>
</asp:Panel>

Note that I also use the click client method of the link button instead of the regular __doPostBack(sender, eventArgs) method of the ASP.NET Framework.

Kind regards,
Sebastian
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.