Skip to main content

How to: Save Changes and Switch to Browse Mode by Clicking ENTER

Users can use the Cancel and Update commands to discard the changes made or save them to a database. You can also enable users to perform these operations by clicking the Esc and ENTER keys, respectively. To implement this behavior, handle the editor’s KeyDown client-side event.

  • If a user presses Enter, the event handler calls the grid’s ASPxClientGridView.UpdateEdit client-side method. This method saves all changes made and switches the ASPxGridView to browse mode.
  • If a user presses Esc, the event handler calls the grid’s ASPxClientGridView.CancelEdit client-side method, which cancels all changes made and switches the ASPxGridView to browse mode.


<script language="jscript" type="text/jscript">
function ProcessKeyDown(e) {
    if(e == 13) { grid.UpdateEdit(); }
    if(e == 27) { grid.CancelEdit(); }

<dxwgv:ASPxGridView ID="ASPxGridView1" runat="server" AutoGenerateColumns="False"
    ClientInstanceName="grid" DataSourceID="AccessDataSource1" KeyFieldName="ProductID">
        <dxwgv:GridViewCommandColumn VisibleIndex="0">
            <EditButton Visible="True"></EditButton>
        <dxwgv:GridViewDataTextColumn FieldName="ProductID" ReadOnly="True" VisibleIndex="1">
            <EditFormSettings Visible="False" />
        <dxwgv:GridViewDataTextColumn FieldName="ProductName" VisibleIndex="2">
                <ClientSideEvents KeyDown="function(s, e) {
                    ProcessKeyDown(e.htmlEvent.keyCode); }" />
        <dxwgv:GridViewDataSpinEditColumn FieldName="UnitPrice" VisibleIndex="3">
            <PropertiesSpinEdit DisplayFormatString="g">
                <ClientSideEvents KeyDown="function(s, e) {
                    ProcessKeyDown(e.htmlEvent.keyCode); }" />