Wrong event fires on text box enter key press

2 posts, 0 answers
  1. Jayanthy Kapistalam
    Jayanthy Kapistalam avatar
    12 posts
    Member since:
    Oct 2008

    Posted 06 Oct 2009 Link to this post

    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;
    }
                



  2. Sebastian
    Admin
    Sebastian avatar
    9934 posts

    Posted 07 Oct 2009 Link to this post

    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.
Back to Top