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:
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.
<%@PageLanguage="C#"AutoEventWireup="true"CodeFile="Default.aspx.cs"Inherits="_Default" %><%@RegisterAssembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"Namespace="DevExpress.Web.ASPxEditors"TagPrefix="dx" %><!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>How to navigate between editors by pressing the Enter key like by the Tab key
</title><scripttype="text/javascript">functionDoProcessEnterKey(htmlEvent, editName) {
if (htmlEvent.keyCode == 13) {
ASPxClientUtils.PreventEventAndBubble(htmlEvent);
if (editName) {
ASPxClientControl.GetControlCollection().GetByName(editName).SetFocus();
} else {
btn.DoClick();
}
}
}
</script></head><body><formid="form1"runat="server"><div><table><tr><td>
Focus the first editor and press the Enter key
</td></tr><tr><td><dx:ASPxTextBoxID="ASPxTextBox1"runat="server"ClientInstanceName="tb1"Width="170px"><ClientSideEventsKeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, 'tb2'); }" /></dx:ASPxTextBox></td></tr><tr><td><dx:ASPxTextBoxID="ASPxTextBox2"runat="server"ClientInstanceName="tb2"Width="170px"><ClientSideEventsKeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, 'tb3'); }" /></dx:ASPxTextBox></td></tr><tr><td><dx:ASPxTextBoxID="ASPxTextBox3"runat="server"ClientInstanceName="tb3"Width="170px"><ClientSideEventsKeyDown="function(s, e) { DoProcessEnterKey(e.htmlEvent, ''); }" /></dx:ASPxTextBox></td></tr><tr><td><dx:ASPxButtonID="btn"runat="server"AutoPostBack="False"ClientInstanceName="btn"UseSubmitBehavior="true"OnClick="btn_Click"Text="Do PostBack"></dx:ASPxButton></td></tr></table></div></form></body></html>
<%@PageLanguage="vb"AutoEventWireup="true"CodeFile="Default.aspx.vb"Inherits="_Default" %><%@RegisterAssembly="DevExpress.Web.ASPxEditors.v11.1, Version=11.1.8.0, Culture=neutral, PublicKeyToken=b88d1754d700e49a"Namespace="DevExpress.Web.ASPxEditors"TagPrefix="dx" %><!DOCTYPE htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><headrunat="server"><title>How to navigate between editors by pressing the Enter key like by the Tab key
</title><scripttype="text/javascript">functionDoProcessEnterKey(htmlEvent, editName) {
if (htmlEvent.keyCode == 13) {
ASPxClientUtils.PreventEventAndBubble(htmlEvent);
if (editName) {
ASPxClientControl.GetControlCollection().GetByName(editName).SetFocus();
} else {
btn.DoClick();
}
}
}
</script></head><body><formid="form1"runat="server"><div><table><tr><td>
Focus the first editor and press the Enter key
</td></tr><tr><td><dx:ASPxTextBoxID="ASPxTextBox1"runat="server"ClientInstanceName="tb1"Width="170px"><ClientSideEventsKeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, 'tb2');}" /></dx:ASPxTextBox></td></tr><tr><td><dx:ASPxTextBoxID="ASPxTextBox2"runat="server"ClientInstanceName="tb2"Width="170px"><ClientSideEventsKeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, 'tb3');}" /></dx:ASPxTextBox></td></tr><tr><td><dx:ASPxTextBoxID="ASPxTextBox3"runat="server"ClientInstanceName="tb3"Width="170px"><ClientSideEventsKeyDown="function(s, e) {DoProcessEnterKey(e.htmlEvent, '');}" /></dx:ASPxTextBox></td></tr><tr><td><dx:ASPxButtonID="btn"runat="server"AutoPostBack="False"ClientInstanceName="btn"UseSubmitBehavior="true"OnClick="btn_Click"Text="Do PostBack"></dx:ASPxButton></td></tr></table></div></form></body></html>