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

• Dec 22, 2021

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.

 

JS

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

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