How to: Save Changes and Switch to Browse Mode by Clicking ENTER
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.
<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>