ASPxClientTextEdit.KeyDown Event
Occurs on the client-side when an end-user presses a key while the editor has focus.
Declaration
KeyDown: ASPxClientEvent<ASPxClientEditKeyEventHandler<ASPxClientTextEdit>>
Event Data
The KeyDown event's data class is ASPxClientEditKeyEventArgs.
The following properties provide information specific to this event:
| Property |
Description |
| htmlEvent |
Gets a DHTML event object that relates to the processed event.
|
The editors’ client-side functionality provides the ability to respond to key presses and releases made by end users. Each time an end-user presses a key while an editor has focus, the KeyDown event fires. This event can be handled to implement custom processing of the pressed key.
Using the ASPxClientEditKeyEventArgs.htmlEvent property of the event’s argument, you can obtain the necessary information related to the pressed key (such as its key code, the modifier key pressed, etc).
The GetText and the GetValue methods can return an incorrect (empty or previous) value in the client-side UserInput, KeyDown, KeyPress, and KeyUp event handlers when you apply a format, mask, or null text settings to a text editor.
In this case, obtain the editor’s text from the editor’s input element:
function OnKeyDown(s, e) {
var currentText = s.GetInputElement().value;
}
For more information refer to the following Support Center ticket: ticket.
Limitation
- Built-in editors within the grid’s Filter Row do not raise the client-side ValueChanged, UserInput, and
KeyDown events because these editors apply internal filter mechanisms.
Example
This example illustrates how to emulate the Tab key using the Enter key.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page {
protected void Page_Load (object sender, EventArgs e) {
}
protected void btn_Click (object sender, EventArgs e) {
}
}
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<!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>How to navigate between editors by pressing the Enter key like by the Tab key
</title>
<script type="text/javascript">
function DoProcessEnterKey(htmlEvent, editName) {
if (htmlEvent.keyCode == 13) {
ASPxClientUtils.PreventEventAndBubble(htmlEvent);
if (editName) {
ASPxClientControl.GetControlCollection().GetByName(editName).SetFocus();
} else {
btn.DoClick();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Focus the first editor and press the Enter key
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" ClientInstanceName="tb1" Width="170px">
<ClientSideEvents KeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, 'tb2'); }" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox2" runat="server" ClientInstanceName="tb2" Width="170px">
<ClientSideEvents KeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, 'tb3'); }" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox3" runat="server" ClientInstanceName="tb3" Width="170px">
<ClientSideEvents KeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, ''); }" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxButton ID="btn" runat="server" AutoPostBack="False" ClientInstanceName="btn" UseSubmitBehavior="true"
OnClick="btn_Click" Text="Do PostBack">
</dx:ASPxButton>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
<%@ Page Language="vb" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<%@ Register Assembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"
Namespace="DevExpress.Web.ASPxEditors" TagPrefix="dx" %>
<!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>How to navigate between editors by pressing the Enter key like by the Tab key
</title>
<script type="text/javascript">
function DoProcessEnterKey(htmlEvent, editName) {
if (htmlEvent.keyCode == 13) {
ASPxClientUtils.PreventEventAndBubble(htmlEvent);
if (editName) {
ASPxClientControl.GetControlCollection().GetByName(editName).SetFocus();
} else {
btn.DoClick();
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table>
<tr>
<td>
Focus the first editor and press the Enter key
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox1" runat="server" ClientInstanceName="tb1" Width="170px">
<ClientSideEvents KeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, 'tb2');}" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox2" runat="server" ClientInstanceName="tb2" Width="170px">
<ClientSideEvents KeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, 'tb3');}" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxTextBox ID="ASPxTextBox3" runat="server" ClientInstanceName="tb3" Width="170px">
<ClientSideEvents KeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, '');}" />
</dx:ASPxTextBox>
</td>
</tr>
<tr>
<td>
<dx:ASPxButton ID="btn" runat="server" AutoPostBack="False" ClientInstanceName="btn" UseSubmitBehavior="true"
OnClick="btn_Click" Text="Do PostBack">
</dx:ASPxButton>
</td>
</tr>
</table>
</div>
</form>
</body>
</html>
Imports Microsoft.VisualBasic
Imports System
Imports System.Collections.Generic
Imports System.Linq
Imports System.Web
Imports System.Web.UI
Imports System.Web.UI.WebControls
Partial Public Class _Default
Inherits System.Web.UI.Page
Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)
End Sub
Protected Sub btn_Click(ByVal sender As Object, ByVal e As EventArgs)
End Sub
End Class
See Also