OnKeyPress in RadTextBox(Client Side)

14 posts, 0 answers
  1. satish
    satish avatar
    12 posts
    Member since:
    Mar 2009

    Posted 23 Mar 2009 Link to this post

    Onkeypress in Radtextbox.....server side  button click event need to be fired....

    Pls give me suggession.

    Thanks,
    satish
  2. Daniel
    Admin
    Daniel avatar
    4943 posts

    Posted 23 Mar 2009 Link to this post

    Hello Satish,

    I believe we will provide a better answer if you elaborate a bit on the desired functionality.

    Kind regards,
    Daniel
    the Telerik team

    Check out Telerik Trainer , the state of the art learning tool for Telerik products.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. satish
    satish avatar
    12 posts
    Member since:
    Mar 2009

    Posted 24 Mar 2009 Link to this post

    Hi Daniel,

    I Have one radTextBox and one serverside button on the form.I need the functionalty like whenever i press "ENTER" Key in the RadTextbox.I want to fire botton onClick method.

    Pls give me your suggestion.

    Thanks,
    Satish.
  5. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 24 Mar 2009 Link to this post

    Hello Satish,

    I have found an easy way to achieve this by using Microsoft Panel control and setting the Default button of panel as the button id. See the example.

    ASPX:
    <asp:Panel DefaultButton="Button1" ID="Panel1" runat="server"
        <telerik:radtextbox id="RadTextBox1" runat="server"></telerik:radtextbox> 
    </asp:Panel> 
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> 

    CS:
    protected void Button1_Click(object sender, EventArgs e) 
        Response.Write(RadTextBox1.Text); 
        . . . 

    Another option is capturing the enter key press in client side and do postback for the button control like shown below.

    ASPX:
    <telerik:radtextbox id="RadTextBox1" runat="server">  
         <ClientEvents OnKeyPress="OnKeyPress" />  
    </telerik:radtextbox>  
    <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /> 

    JavaScript:
    <script type="text/javascript"
    function OnKeyPress(sender, eventArgs) 
       var c = eventArgs.get_keyCode(); 
       if (c == 13) 
       { 
         __doPostBack('Button1','');      
       }      
    </script> 

    Hope this helps,
    Shinu.
  6. satish
    satish avatar
    12 posts
    Member since:
    Mar 2009

    Posted 24 Mar 2009 Link to this post

    HI Shinu,
    In my case is little different....See my code below

    ASPX:

     

    <telerik:RadMenuItem runat="server" value="Tmenu">

     

     

    <ItemTemplate>

     

    search

     

    <telerik:RadTextBox ID="txtQuickSearch" runat="server" Height="12px" >

     

     

    <ClientEvents OnKeyPress="KeyEnter" />

     

     

    </telerik:RadTextBox>&nbsp;<asp:Button ID="btnQiuckSearch" runat="server" OnClick="btnQiuckSearch_Click"

     

     

    Text="Go" BackColor="#FF8000" Height="22px" Font-Size="Small" BorderStyle="Double" />

     

     

    </ItemTemplate>

     



    Javascript:

    function

    KeyEnter(sender, eventArgs)

     

    {

     

    var c = eventArgs.get_keyCode();

     

     

    if(c=="13")

     

    {

     

    var

    menu = $find("<%= TopMenu.ClientID %>");

     

     

    var node = menu.findItemByValue("Tmenu");                 /// till here its good ...

     

     

    var btnQsearch = node.findControl("btnQiuckSearch"); /// iam not able to find the button here...its returns null ....

     

    document.getElementById(btnQsearch).click();              /// if button got found ....i can do this ....

     

    }



    shinu pls suggest me ..if my approch is correct or wrong  from the above code

    Thanks,
    Satish.

  7. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 25 Mar 2009 Link to this post

    Hello Satish,

    Try the code below for getting the reference to the button which is placed inside ItemTemplate of RadMenuItem and check whether its working fine for you.

    JavaScript:
    <script type="text/javascript"
    function KeyEnter(sender, eventArgs) 
       var c = eventArgs.get_keyCode(); 
       if (c == 13) 
       {         
            var btnQiuckSearch = document.getElementById('<%=RadMenu1.FindItemByValue("Tmenu").FindControl("btnQiuckSearch").ClientID%>'); 
            btnQiuckSearch.click(); 
       }      
    </script> 
    Accessing Controls Inside Templates

    Thanks,
    Shinu.
  8. satish
    satish avatar
    12 posts
    Member since:
    Mar 2009

    Posted 25 Mar 2009 Link to this post

    Thanks Shinu....it works ..
  9. Daniel Aquere
    Daniel Aquere avatar
    85 posts
    Member since:
    Mar 2011

    Posted 08 Jul 2011 Link to this post

    Hi Shinu,

    This code works very fine for me, but, I´d like to increment a little more...

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

    This code works very fine for me, but, I´d like to increment a little more...

    I have a lot of controls, I´d like to recognize the enter key pressed and goes to the next control (radtextbox or radcombobox or radlistbox, etc), and, when I press the enter key in a specific control I do postback (simulate the button click).

    Please, what do you suggest?

    Abraço

    Daniel
  10. Mouse
    Mouse avatar
    26 posts
    Member since:
    Sep 2009

    Posted 21 Jul 2011 Link to this post

    Hi,

    I have this code

    function EnterExist(sender, eventArgs) {
            var c = eventArgs.get_keyCode();
            if (c == 13) {
                try {
                    document.getElementById('<%=ExistingUserLoginButton.ClientID %>').click();
                } catch (err) {
                    __doPostBack('ExistingUserLoginButton', '');
                }
      
            }
        }

    Here is my button.
    <asp:LinkButton ID="ExistingUserLoginButton" runat="server" Width="142px" Height="40px"
    CssClass="btnRectanBlueSmall" OnClick="ExistingUserLoginButton_Click" CausesValidation="false">SIGN IN</asp:LinkButton>

    Not one of these ways seems to work in FireFox or Chrome. Is there an alternative.

    It only seems to work in IE.

    IE 8, FireFox 5, Chrome 12 - these are the browsers i used to test it does not work. IE is the only one which works.

    Thanks

    Phil
  11. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 22 Jul 2011 Link to this post

    Hello Mouse,
    One suggestion is to use RadAjaxManager and make ajaxrequest. Here is the sample code that I tried which worked as expected.
    JS:
    <script type="text/javascript">
      function EnterExist(sender, eventArgs)
     {
       var c = eventArgs.get_keyCode();
       if (c == 13)
        {
         try
          {
            var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
            ajaxManager.ajaxRequestWithTarget('<%= ExistingUserLoginButton.UniqueID %>', '');
          }
        }
      }
    </script>

    Also check the following help article which explains the same.
    RadControls for ASP.NET AJAX Documentation.

    Thanks,
    Shinu.
  12. Mouse
    Mouse avatar
    26 posts
    Member since:
    Sep 2009

    Posted 25 Jul 2011 Link to this post

    Brilliant that worked

    Thank you very much
  13. FAISAL
    FAISAL avatar
    2 posts
    Member since:
    Jul 2012

    Posted 14 Jul 2012 Link to this post

    Hi Support,

    I have similar requirement such as I have a RadGrid with nested grid such as MasterTable and detailed table which also having telerik gridview. When click on expand button ("+" ) show the nested grid. In the nested grid column having filter template as RadTextBox(separe text box for each column). If the user enter value in corresponding RadTextBox and press enter key, need to show filtered data in nested grid and there is no associated button control click event. and the second level grid binding by calling design time 
    settings

    OnDetailTableDataBind="ResultGrid_DetailTableDataBind"

    How can achieve this functionality?

    Please find below the design and code behind

    Design (sample code , some modification done)

    <telerik:RadGrid ID="ResultGrid" runat="server" Skin="Telerik" EnableEmbeddedBaseStylesheet="false" CssClass="SearchResultsGrid"
                EnableEmbeddedSkins="false" AutoGenerateColumns="False" CellSpacing="0" AllowSorting="True"
                 AllowPaging="True" TotalPageCount="0" TotalRowsCount="0" EnableNoRecordsTemplate="true"
                 ResourceFile="EnerginetUI" GridLines="None" DataSourceID="DS1"
                OnDetailTableDataBind="ResultGrid_DetailTableDataBind" OnItemDataBound="ResultGrid_ItemDataBound" OnItemCommand="ResultGrid_ItemCommand" OnPreRender="ResultGrid_PreRender"
                >
     
                <MasterTableView  EnableNoRecordsTemplate="true" ShowHeadersWhenNoRecords="False" DataSourceID="IncomingErrorMessageDS" DataKeyNames="InboundAcknowledgementId"
                    CommandItemDisplay="Top" HierarchyLoadMode="ServerOnDemand" ExpandCollapseColumn-ButtonType="ImageButton"
                    ExpandCollapseColumn-CollapseImageUrl="~/_layouts/1033/IMAGES/Minus.png"
                    ExpandCollapseColumn-ExpandImageUrl="~/_layouts/1033/IMAGES/Plus.png">
                    <RowIndicatorColumn FilterControlAltText="Filter RowIndicator column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </RowIndicatorColumn>
                    <ExpandCollapseColumn FilterControlAltText="Filter ExpandColumn column">
                        <HeaderStyle Width="20px"></HeaderStyle>
                    </ExpandCollapseColumn>
                    <CommandItemSettings ShowAddNewRecordButton="false" ShowRefreshButton="false" />
                    
                    <DetailTables>
                        <telerik:GridTableView DataKeyNames="Id" Name="SearchResultList"
                            runat="server" AutoGenerateColumns="false" AllowPaging="false" AllowFilteringByColumn="true"
                            ViewStateMode="Disabled" EnableViewState="false" EnableNoRecordsTemplate ="true">
                                        
                            <Columns>
                                <telerik:GridBoundColumn runat="server" SortExpression="Column1" HeaderText="Column1"
                                    HeaderButtonType="TextButton" DataField="Column1" UniqueName="Column1"
                                    Visible="false" AllowFiltering="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridBoundColumn SortExpression="Column2" HeaderText="Column2"
                                    HeaderButtonType="TextButton" DataField="Column2" UniqueName="Column2"
                                    Visible="false" AllowFiltering="false">
                                </telerik:GridBoundColumn>
                                <telerik:GridTemplateColumn FilterControlAltText="" HeaderText="Column3"
                                    UniqueName="Column3" SortExpression="Column3" AutoPostBackOnFilter="true"
                                    ShowFilterIcon="false" DataField="Column3">
                                    <ItemTemplate>
                                        <asp:LinkButton ID="Column3LinkButton" runat="server" Text='<%# Eval("Column3") %>'
                                            CommandArgument='<%# Eval("Column3") %>' CommandName="Column1Command"></asp:LinkButton>
                                    </ItemTemplate>
                                    <FilterTemplate>                                  
                                        <telerik:RadTextBox runat="server" ID ="Column3Filter" WaterMarkTextKey="Column3" AllowBlank="true">                                  
                                        </telerik:RadTextBox>
                                    </FilterTemplate>
                                </telerik:GridTemplateColumn>
                                <telerik:GridBoundColumn SortExpression="Column4" HeaderText="Column4"
                                    HeaderButtonType="TextButton" DataField="Column4" UniqueName="Column4"
                                    AutoPostBackOnFilter="true" ShowFilterIcon="false">
                                    <FilterTemplate>                                  
                                        <telerik:RadTextBox runat="server" ID ="Column4Filter" WaterMarkTextKey="Column4"  AllowBlank="true">                                
                                        </telerik:RadTextBox>
                                    </FilterTemplate>
                                </telerik:GridBoundColumn>
    ........
    .........


    Code behind

    protected void ResultGrid_DetailTableDataBind(object source, Telerik.Web.UI.GridDetailTableDataBindEventArgs e)
    {
    ........
    e.DetailTableView.DataSource = BindData();
    }

  14. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 16 Jul 2012 Link to this post

    Hello,

    One suggestion is you can handle the TextChanged event from server side as shown below.
    C#:
    protected void Radtxt_TextChanged(object sender, EventArgs e)
    {
      RadTextBox txt = (RadTextBox)sender;
      string filter = txt.Text;
      string filterExpression = "([Column4] = '" + filter + "')";
      RadGrid2.MasterTableView.DetailTables[0].FilterExpression = filterExpression;
      RadGrid2.MasterTableView.Rebind();
    }

    Thanks,
    Shinu.
  15. Yamila
    Yamila avatar
    1 posts
    Member since:
    Feb 2016

    Posted 20 Feb in reply to Mouse Link to this post

    Hi, thanks this works for me too.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017