This is a migrated thread and some comments may be shown as answers.

To Set Toolbar button as a default button for the page(form)

7 Answers 270 Views

ToolBar

This is a migrated thread and some comments may be shown as answers.

7 Answers, 1 is accepted

answered on 05 May 2008, 12:28 PM

DefaultPageButtonDemo.zip

Hi Chandra,

This can be accomplished by using some javascript code and a private client-side method of the RadToolBarItem. In the official service pack of the control, the RadToolBarItem client-side class will contain a click method you can use.

The attached page demonstrates the workaround.

Regards,
Erjan Gavalji
the Telerik team

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

answered on 05 May 2008, 07:57 PM

Hi,

I'm not able to build the code that you have sent, as it says unknow server tag 'RADScriptManager'. Do i have to install anything extra? I'm using Telerik RadControls for ASP.NET Q2 2007.

I removed the ScriptManager tag and tried, the page came up, but on click of enter button on the page, nothing happens.

I have included the aspx code which i modified and used please check,

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="ToolBar_DefaultPageButtonDemo_Default" %> 
        
            <%@ Register Assembly="RadAjax.Net2" Namespace="Telerik.WebControls" TagPrefix="radA" %> 
        
            <%@ Register Assembly="RadToolbar.Net2" Namespace="Telerik.WebControls" TagPrefix="telerik" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml" > 
        
            <head runat="server">  
        
            <title>Untitled Page</title> 
        
            <script type="text/javascript">  
        
                function onClientButtonClicking(sender, args)  
        
                {  
        
                    if (args.get_item().get_text() == "DefaultButton")  
        
                    {  
        
                        alert('DefaultButton clicked!');  
        
                    }  
        
                }  
        
            </script> 
        
            </head> 
        
            <body> 
        
            <form id="form1" runat="server">  
        
            <%--<telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>--%> 
        
            <div> 
        
            <telerik:RadToolBar ID="RadToolBar1" runat="server" OnClientButtonClicking="onClientButtonClicking">  
        
                <Items> 
        
                    <telerik:RadToolBarButton ButtonText="Button1" CommandName="Button1"></telerik:RadToolBarButton> 
        
                    <telerik:RadToolBarButton ButtonText="DefaultButton" CommandName="DefaultButton"></telerik:RadToolBarButton> 
        
                    <telerik:RadToolBarButton ButtonText="Button2" CommandName="Button2"></telerik:RadToolBarButton> 
        
                </Items> 
        
            </telerik:RadToolBar> 
        
            <script type="text/javascript">  
        
                function onEnter(e)  
        
                {  
        
                    if (e.keyCode == 13)  
        
                    {  
        
                        $find("<%= RadToolBar1.ClientID%>").findItemByText("DefaultButton")._onClick(e);  
        
                    }  
        
                }  
        
                $addHandler(document, "keyup", onEnter);  
        
            </script> 
        
            </div> 
        
            </form> 
        
            </body> 
        
            </html>

Thanks.

Regards,
Chandra

answered on 06 May 2008, 08:24 AM

DefaultButtonDemo.zip

Hi Chandra,

Sorry for the misunderstanding - the example I sent was meant for RadControls for ASP.NET Ajax Q1 2008. The default page button can be accomplished in a similar manner for RadToolBar "Classic" - you should use the EventClick(e) method of the button.

Please, find attached the example for that.

Regards,
Erjan Gavalji
the Telerik team

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

answered on 07 May 2008, 04:51 PM

Hi,

The solution which you have provided, works fine. But when i incorporated the same solution to my code, on Enter click doesnot work.
To add up, I have a frameset page, and the page which has the toolbar button and where i wanted the onEnter to work is one of the frame page with in the frameset. Also, the toolbarbutton comes with in a Ajax panel in that page.
So i guess all these factors are affecting the solution. Could you provide a solution, considering all these factors.
Thanks.

I have attached the code, the page where i need the OnEnter click on the toolbar button,

    
            <%@ Page Language="c#" Inherits="Default" CodeFile="Default.aspx.cs" 
        
                Debug="true" %> 
        
            <%@ Register Assembly="RadToolbar.Net2" Namespace="Telerik.WebControls" TagPrefix="radtlb" %> 
        
            <%@ Register TagPrefix="rada" Namespace="Telerik.WebControls" Assembly="RadAjax.NET2" %> 
        
            <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" > 
        
            <html xmlns="http://www.w3.org/1999/xhtml">  
        
            <head> 
        
                <title>Well SearchResults</title> 
        
                <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1" /> 
        
                <meta name="CODE_LANGUAGE" content="C#" /> 
        
                <meta name="vs_defaultClientScript" content="JavaScript" /> 
        
                <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5" /> 
        
                <script language="javascript" type="text/javascript">  
        
                        var isFirstTimeLogin = false;  
        
                        function SetLoginFocus()   
        
                        {  
        
                            // Check whether the login is first time.                 
        
                            if( isFirstTimeLogin == false )  
        
                            {  
        
                                document.forms['Form1'].txtSearchWord.style.color = 'black';                                      
        
                                if( document.forms['Form1'].txtSearchWord.value == '[Enter Search Term]')  
        
                                {  
        
                                    document.forms['Form1'].txtSearchWord.value = "";                         
        
                                }  
        
                                isFirstTimeLogin = true;                      
        
                            }  
        
                            window.document.Form1.txtSearchWord.focus();                  
        
                        }             
        
                        function pnlRequestStarted(ajaxPanel, eventArgs)  
        
                        {  
        
                          if(eventArgs.EventTarget == "lnkAdvSearch")                
        
                          {                
        
                             eventArgs.EnableAjax = false;  
        
                          }  
        
                        }                                                                      
        
                </script> 
        
                <style type="text/css">  
        
                       .MyClass  
        
                        {   
        
                            white-space: nowrap;   
        
                            color: black;  
        
                            font-size: 12px;  
        
                            font-family: Tahoma;  
        
                        }  
        
                       .MyAlternatingClass  
        
                        {   
        
                            white-space: nowrap;   
        
                            color: black;  
        
                            font-size: 12px;  
        
                            font-family: Tahoma;  
        
                            background-color: #E5ECF9;  
        
                        }                    
        
                       </style> 
        
            </head> 
        
            <body style="margin-top: 0; margin-left: 0;" onload="">  
        
                <form id="Form1" method="post" runat="server">  
        
                    <rada:RadAjaxPanel ID="ajaxPnlResults" runat="server" LoadingPanelID="LoadingPanel2" 
        
                        ClientEvents-OnRequestStart="pnlRequestStarted" ClientEvents-OnResponseEnd="pnlResponseEnded">  
        
                        <table width="101%" cellpadding="0" cellspacing="0" style="height: 100%">  
        
                            <tr style="height: 15px;">  
        
                                <td> 
        
                                </td> 
        
                            </tr> 
        
                            <tr style="height: 16%;">  
        
                                <td align="center" valign="middle">  
        
                                    <table cellpadding="2" cellspacing="2">  
        
                                        <tr> 
        
                                            <td rowspan="2" valign="top">  
        
                                                <span style="font-size: 12px; font-family: Tahoma">powered by</span><br/>  
        
                                                <asp:Image ID="ibtnGoogleLogo" runat="server" ImageAlign="top" ImageUrl="App_Images/Google_Logo.jpg" /></td>  
        
                                            <td valign="bottom">  
        
                                                <input id="txtSearchWord" title="Enter Search Term" style="width: 388px; font-size: 12px;  
        
                                                    font-style: normal; font-family: Tahoma; font-variant: normal; color: Black"  
        
                                                    type="text" value="[Enter Search Term]" onclick="SetLoginFocus();" runat="server" /> 
        
                                            </td> 
        
                                            <td valign="bottom">  
        
                                                <radtlb:RadToolbar runat="server" ID="btnSearch" OnOnClick="btnSearch_Click" Skin="Mac" 
        
                                                    UseFadeEffect="true" AutoPostBack="true">  
        
                                                    <Items> 
        
                                                        <radtlb:RadToolbarButton ID="tbBtnSearch" CommandName="Search" ButtonText="Search" 
        
                                                            DisplayType="TextImage" Height="20px" ButtonImage="Search.jpg" ToolTip="Search the term entered" /> 
        
                                                    </Items> 
        
                                                </radtlb:RadToolbar> 
        
                                                <script language="javascript">  
        
                                                    function onEnter(e)  
        
                                                    {                                    
        
                                                        if (e.keyCode == 13)  
        
                                                        {  
        
                                                            var toolBar = <%=btnSearch.ClientID%>;  
        
                                                            alert(toolBar.GetButtonByCommand("Search").CommandName);  
        
                                                            toolBar.GetButtonByCommand("Search").EventClick(e);  
        
                                                        }  
        
                                                    }                                         
        
                                                    if (document.attachEvent)  
        
                                                    {                                         
        
                                                        document.attachEvent("onkeyup", onEnter);  
        
                                                    }  
        
                                                    else if (document.addEventListener)  
        
                                                    {  
        
                                                        document.addEventListener("keyup", onEnter, false);  
        
                                                    }                                                        
        
                                                </script> 
        
                                            </td> 
        
                                            <td valign="bottom">  
        
                                                <radtlb:RadToolbar runat="server" ID="btnRefresh" Skin="Mac"   
        
                                                UseFadeEffect="true" 
        
                                                    AutoPostBack="true" Visible="false" OnOnClick="btnRefresh_Click">  
        
                                                    <Items> 
        
                                                        <radtlb:RadToolbarButton runat="server" ID="tbBtnRefresh" CommandName="Refresh" ButtonText="Refresh..." 
        
                                                            DisplayType="TextImage" Height="20px" ButtonImage="WDRefresh.jpg" ToolTip="Click to refresh the data" /> 
        
                                                        <radtlb:RadToolbarButton runat="server" ID="lblBlink" CommandName="Blink" ButtonText="..." 
        
                                                            DisplayType="TextOnly" Visible="false" /> 
        
                                                    </Items> 
        
                                                </radtlb:RadToolbar> 
        
                                            </td>                                  
        
                                            <td> 
        
                                            </td> 
        
                                            <td valign="bottom">  
        
                                                <asp:LinkButton ID="lnkAdvSearch" runat="server" Font-Names="Tahoma" Font-Size="12px" 
        
                                                    ForeColor="Purple" OnClick="lnkAdvSearch_Click" ToolTip="Perform Advanced Search">Advanced Search</asp:LinkButton> 
        
                                            </td> 
        
                                        </tr> 
        
                                        <tr> 
        
                                            <td valign="top">  
        
                                                <asp:Label ID="lblTxt" runat="server" Visible="true" Font-Names="Tahoma" Font-Size="10px" 
        
                                                    ForeColor="Black">e.g. [Well Name, API Number, Client, Field Name, Location]</asp:Label></td>  
        
                                            <td> 
        
                                            </td> 
        
                                            <td> 
        
                                            </td> 
        
                                            <td> 
        
                                            </td> 
        
                                            <td> 
        
                                            </td> 
        
                                        </tr> 
        
                                    </table> 
        
                                </td> 
        
                            </tr> 
        
                        </table>              
        
                    </rada:RadAjaxPanel> 
        
                    <rada:AjaxLoadingPanel ID="LoadingPanel2" runat="server" Transparency="10" BackColor="white">  
        
                        <asp:Image ID="Image2" ImageUrl="~/RadControls/AJAX/Skins/Default/loading.gif" BorderWidth="0px" 
        
                            AlternateText="Loading" runat="server" Style="margin-top: 18%;"></asp:Image> 
        
                    </rada:AjaxLoadingPanel> 
        
                </form> 
        
                <script language="javascript" type="text/javascript">  
        
                    function pnlResponseEnded(ajaxPanel, eventArgs)  
        
                    {  
        
                        blinklabel();                  
        
                    }   
        
            </body> 
        
            </html>

answered on 13 Jul 2013, 07:02 PM

I know this is an old post, but it's almost 100% what I need, and I can't find any more current posts or documentation.

The code provided in the first example works perfectly for us, so long as you don't mind the Enter key clicking the button from anywhere on the page. Is there a way to wire it up so that it only works if pressing Enter while in a specific textbox (i.e. attaching the event and listener to the textbox instead of the document)?

Here's a snippet of what I'm working with:

<telerik:RadToolBar ID="rtb" runat="server" EnableRoundedCorners="True" EnableShadows="True" OnButtonClick="rtb_ButtonClick" OnClientButtonClicking="clientButtonClick" Width="960px">

<Items>

<telerik:RadToolBarButton CommandName="RecentEntities" runat="server">

<ItemTemplate>

<telerik:RadComboBox ID="ddlRecentEntities" runat="server" OnClientLoad="assignMouseOverBehaviors" DropDownAutoWidth="Enabled"

OnSelectedIndexChanged="RecentEntities_SelectedIndexChanged" AutoPostBack="True" ToolTip="Recent Selections" EmptyMessage="Recent Selections"/>

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarButton runat="server" IsSeparator="True"/>

<telerik:RadToolBarButton CommandName="SearchField" runat="server">

<ItemTemplate>

<telerik:RadComboBox ID="ddlSearchFields" runat="server" OnClientLoad="assignMouseOverBehaviors" Width="100px" />

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarButton CommandName="SearchCriteria" runat="server">

<ItemTemplate>

<telerik:RadTextBox runat="server" ID="txtSearchText" Width="150" onMouseOver="showMenu(event)" EmptyMessage="Search Here">

</telerik:RadTextBox>

</ItemTemplate>

</telerik:RadToolBarButton>

<telerik:RadToolBarSplitButton runat="server" Text="Search">

<Buttons>

<telerik:RadToolBarButton runat="server" Text="Search Active" CommandName="EntitySearchActive" />

<telerik:RadToolBarButton runat="server" Text="Search Inactive" CommandName="EntitySearchInactive" />

<telerik:RadToolBarButton runat="server" Text="Search All" CommandName="EntitySearchAll" />

</Buttons>

</telerik:RadToolBarSplitButton>

<telerik:RadToolBarButton runat="server" IsSeparator="True"/>

</Items>

</telerik:RadToolBar>

Basically what I'd like to happen is when a user enters text in txtSearchCriteria and presses enter, it raises the click event on the SplitButton. If the user is focused on any other part of the page, though, it should not raise this event. Any help would be greatly appreciated!

answered on 13 Aug 2013, 06:32 PM

You can wire the textbox to an onkeypress event in javascript like this.

function pageLoad() {
var templateTextBox1 = document.getElementById('<%=rtbToolBar.FindItemByValue("psgridTestSearchBoxBtnVal").FindControl("psgridTestSearchBox").ClientID %>');
templateTextBox1.onkeydown = fire;
}

function fire(e) {
e = e || window.event || {};
var charCode = e.charCode || e.keyCode || e.which;
if (charCode == 13) {
var toolbar1 = $find("<%= rtbToolBar.ClientID %>");
var templateButton = toolbar1.findItemByText("Search");
//Cause server-side ButtonClick for the "Go" button:
templateButton.click();
}

}

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

To Set Toolbar button as a default button for the page(form)

7 Answers, 1 is accepted