Telerik Forums / UI for ASP.NET AJAX Forum / Input /

OnKeyPress in RadTextBox(Client Side)

Telerik UI for ASP.NET AJAX
Resources Buy Try

14 posts, 0 answers

satish

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
Daniel
Admin

4949 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.
satish

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.

Shinu

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.

satish

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> <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.

Shinu

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.

satish

12 posts

Member since:
Mar 2009

Posted 25 Mar 2009 Link to this post

Thanks Shinu....it works ..
Daniel Aquere

87 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
Mouse

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
Shinu

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.
Mouse

26 posts

Member since:
Sep 2009

Posted 25 Jul 2011 Link to this post

Brilliant that worked

Thank you very much
FAISAL

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

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.
Yamila

1 posts

Member since:
Feb 2016

Posted 20 Feb 2016 in reply to Mouse Link to this post

Hi, thanks this works for me too.

OnKeyPress in RadTextBox(Client Side)

satish

Daniel

satish

Shinu

satish

Shinu

satish

Daniel Aquere

Mouse

Shinu

Mouse

FAISAL

Shinu

Yamila