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

• Aug 01, 2019

End-users can discard the changes made or save them to a database via the Cancel and Update commands. However, you can enable your end-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 ENTER has been pressed, call the grid’s ASPxClientGridView.UpdateEdit client-side method. This method saves all the changes made and switches the ASPxGridView to browse mode.
• If Esc has been pressed, cancel all the changes made and switch the ASPxGridView to browse mode by calling the grid’s ASPxClientGridView.CancelEdit client-side method.

 

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>