OnKeyPress in RadTextBox(Client Side)

[satish]

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

Pls give me suggession.

Thanks,
satish

[Daniel]

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]

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]

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]

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.

[Shinu]

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]

Thanks Shinu....it works ..

[Daniel Aquere]

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]

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]

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]

Brilliant that worked

Thank you very much

[FAISAL]

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]

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]

Hi, thanks this works for me too.