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

8 posts, 0 answers
  1. Rose Garza
    Rose Garza avatar
    45 posts
    Member since:
    Nov 2006

    Posted 02 May 2008 Link to this post

    How to set toolbar button used in the page as a default button for the page (form tag)?


    Regards,
    Chandra
  2. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 05 May 2008 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rose Garza
    Rose Garza avatar
    45 posts
    Member since:
    Nov 2006

    Posted 05 May 2008 Link to this post

    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
  5. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 06 May 2008 Link to this post

    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
  6. Rose Garza
    Rose Garza avatar
    45 posts
    Member since:
    Nov 2006

    Posted 07 May 2008 Link to this post

    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> 
     
  7. Erjan Gavalji
    Admin
    Erjan Gavalji avatar
    1455 posts

    Posted 08 May 2008 Link to this post

    Hi Chandra,

    Could you please separate the pages you have to a separate small application, open a formal support ticket and send it to us? This would be quicker for us to provide a solution for the exact case.

    Kind regards,
    Erjan Gavalji
    the Telerik team

    Instantly find answers to your questions at the new Telerik Support Center
  8. Andrew Setter
    Andrew Setter avatar
    1 posts
    Member since:
    Feb 2008

    Posted 13 Jul 2013 Link to this post

    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!
  9. Ray
    Ray avatar
    1 posts
    Member since:
    May 2013

    Posted 13 Aug 2013 Link to this post

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

                }

Back to Top
UI for ASP.NET Ajax is Ready for VS 2017