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

• Jul 20, 2021

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

• If ENTER is pressed, call the grid’s ASPxClientCardView.UpdateEdit client-side method to save all changes made and switch ASPxCardView to browse mode.
• If Esc is pressed, call the grid’s ASPxClientCardView.CancelEdit client-side method to cancel all changes made and switch ASPxCardView to browse mode.

 

ASPX

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

<dx:ASPxCardView ID="ASPxCardView1" AutoGenerateColumns="False" DataSourceID="AccessDataSource1" ClientInstanceName="cardview" KeyFieldName="CustomerID" runat="server">
    <Columns>
        <dx:CardViewTextColumn FieldName="CompanyName" VisibleIndex="1">
        <PropertiesTextEdit>
            <ClientSideEvents KeyDown="function(s, e) {
                ProcessKeyDown(e.htmlEvent.keyCode); }" />
        </PropertiesTextEdit>
        </dx:CardViewTextColumn>
        <dx:CardViewTextColumn FieldName="ContactName" VisibleIndex="2">
        <PropertiesTextEdit>
            <ClientSideEvents KeyDown="function(s, e) {
                ProcessKeyDown(e.htmlEvent.keyCode); }" />
        </PropertiesTextEdit>
        </dx:CardViewTextColumn>
        <dx:CardViewTextColumn FieldName="Country" VisibleIndex="8">
        <PropertiesTextEdit>
            <ClientSideEvents KeyDown="function(s, e) {
                ProcessKeyDown(e.htmlEvent.keyCode); }" />
        </PropertiesTextEdit>
        </dx:CardViewTextColumn>
    </Columns>
    <CardLayoutProperties>
        <Items>
            <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowEditButton="True">
            </dx:CardViewCommandLayoutItem>
            <dx:CardViewColumnLayoutItem ColumnName="Company Name">
            </dx:CardViewColumnLayoutItem>
            <dx:CardViewColumnLayoutItem ColumnName="Contact Name">
            </dx:CardViewColumnLayoutItem>
            <dx:CardViewColumnLayoutItem ColumnName="Country">
            </dx:CardViewColumnLayoutItem>
            <dx:EditModeCommandLayoutItem HorizontalAlign="Right">
            </dx:EditModeCommandLayoutItem>
        </Items>
    </CardLayoutProperties>
</dx:ASPxCardView>