Community & Support
Home / Community & Support / Knowledge Base / RadControls for ASP.NET and ASP.NET AJAX / ToolBar / How to trigger ItemClick event by pressing the "Enter" key

How to trigger ItemClick event by pressing the "Enter" key

Article Info

Rating: Not rated

Article information

Article relates to

 RadToolbar and RadMenu for ASP.NET AJAX
version 2008.1.515 +

Created by

 Peter, Telerik

Last modified

 June 3, 2008

Last modified by

 Peter, Telerik

HOW TO

- Trigger ItemClick event by pressing the "Enter" key
- Find a nested server control on the client and attach a client event on it.

DESCRIPTION



This article shows how to implement a common search box with a "Go" button, which can be triggered by either pressing the "Enter" key or clicking on the item itself. Either RadToolBar or RadMenu can be used to create a two item navigation system. The first item is a template with a standard TextBox control. When the user types in some text and presses the "Enter" key, the Item(Button)Click event for the "Go" button is triggered.

SOLUTION

aspx:
<asp:ScriptManager ID="ScriptManager1" runat="server">  
    </asp:ScriptManager>   
    <telerik:RadToolBar ID="RadToolBar1" runat="server" OnButtonClick="RadToolBar1_ButtonClick">  
        <CollapseAnimation Type="OutQuint" Duration="200"></CollapseAnimation> 
        <Items> 
            <telerik:RadToolBarButton runat="server" Value="TemplateTextBox">  
                <ItemTemplate> 
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox> 
                </ItemTemplate> 
            </telerik:RadToolBarButton> 
            <telerik:RadToolBarButton runat="server" Text="Go">  
            </telerik:RadToolBarButton> 
        </Items> 
    </telerik:RadToolBar> 
    <asp:Label ID="Label1" runat="server"></asp:Label> 
    <script type="text/javascript">  
        function fire()      
        {     
        var keyCode = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;  
        
        if (keyCode == 13)  
          {      
           var toolbar1 = $find("<%= RadToolBar1.ClientID %>");  
           var templateButton = toolbar1.findItemByText("Go");  
           //Cause server-side ButtonClick for the "Go" button:  
           templateButton.click();  
          }          
        }  
        //The Ajax pageLoad() is neeeded because it occurs after the initialization of  
        //the RadToolBar client object  
        function pageLoad()   
        {              
            //Find the nested TextBox on the client and attach an event on it.   
            var templateTextBox1 = document.getElementById('<%=RadToolBar1.FindItemByValue("TemplateTextBox").FindControl("TextBox1").ClientID %>');  
            templateTextBox1.onkeydown = fire;              
        }  
    </script> 

code-behind:
protected void RadToolBar1_ButtonClick(object sender, Telerik.Web.UI.RadToolBarEventArgs e)  
    {  
        TextBox templateTextBox1 = (TextBox)RadToolBar1.FindItemByValue("TemplateTextBox").FindControl("TextBox1");  
        if (e.Item.Text == "Go")  
        {  
            Label1.Text = "You have entered: " + templateTextBox1.Text;  
        }  
    } 


Files

Comments

There are no comments yet.
If you'd like to comment on this KB article, please, send us a Support Ticket.
Thank you!

Please Sign In to rate this article.