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 by using 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 ASPxClientCardView.UpdateEdit client-side method. This method saves all the changes made and switches the ASPxCardView to browse mode.
• If Esc has been pressed, cancel all the changes made and switch the ASPxCardView to browse mode by calling the grid’s ASPxClientCardView.CancelEdit client-side method.

 

JS

<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>