The Card View control provides end-user data editing functionality out of the box. By default, card editing is performed in Edit Form mode. In this mode, the Card View shows the Edit Form instead of the currently edited card. The Edit Form displays edit cells that correspond to data columns, and the Cancel/Update commands that allow end-users to discard changes or save them to a database.
The SettingsEditing.FormLayoutProperties.Items collection property defines the Edit Form layout. If this property is not set, the Edit Form layout is generated based on the card layout (which is controlled by the CardLayoutProperties.Items property). The following layout item types are allowed:
By default all data editing operations are prohibited. In this demo, row insertion, deletion, and editing is explicitly enabled using settings available through the SettingDataSecurity property.
<dx:BootstrapCardView runat="server" DataSourceID="DataSourceEditingEditForm" KeyFieldName="EmployeeID">
<SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="FirstName" />
<dx:BootstrapCardViewColumn FieldName="LastName" />
<dx:BootstrapCardViewColumn FieldName="Title" />
<dx:BootstrapCardViewColumn FieldName="BirthDate" />
<dx:BootstrapCardViewColumn FieldName="City" />
<dx:BootstrapCardViewColumn FieldName="Country" />
</Columns>
<CardLayoutProperties>
<Items>
<dx:BootstrapCardViewCommandLayoutItem ShowEditButton="true" ShowDeleteButton="true" HorizontalAlign="Right" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Title" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="BirthDate" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="City" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Country" />
<dx:BootstrapEditModeCommandLayoutItem HorizontalAlign="Right" />
</Items>
</CardLayoutProperties>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
In this mode, the Edit Form is displayed within a popup window. To use this mode, set the SettingsEditing.Mode property to PopupEditForm.
By default, all data editing operations are prohibited. In this demo, card insertion, deletion, and editing are explicitly enabled using settings available through the SettingDataSecurity property.
<dx:BootstrapCardView runat="server" DataSourceID="DataSourceEditingPopupEditForm" KeyFieldName="EmployeeID">
<SettingsEditing Mode="PopupEditForm" EditFormColumnSpan="6" >
<FormLayoutProperties>
<Items>
<dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Title" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="BirthDate" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="City" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Country" />
<dx:BootstrapEditModeCommandLayoutItem HorizontalAlign="Right" />
</Items>
</FormLayoutProperties>
</SettingsEditing>
<SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="FirstName" />
<dx:BootstrapCardViewColumn FieldName="LastName" />
<dx:BootstrapCardViewColumn FieldName="Title" />
<dx:BootstrapCardViewColumn FieldName="BirthDate" />
<dx:BootstrapCardViewColumn FieldName="City" />
<dx:BootstrapCardViewColumn FieldName="Country" />
</Columns>
<CardLayoutProperties>
<Items>
<dx:BootstrapCardViewCommandLayoutItem ShowEditButton="true" ShowDeleteButton="true" HorizontalAlign="Right" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Title" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="BirthDate" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="City" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Country" />
</Items>
</CardLayoutProperties>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
Batch Editing and Updating
The Card View control allows you to edit and update multiple cards on the client side and send them to the server in a single request.
To enable the batch editing functionality, set the SettingsEditing.Mode property to Batch. In this mode, data displayed on a Card View page can be edited using in-line editors. The modified cells are highlighted. Deleted cards are also highlighted and display the Recover command item. To hide the deleted cards from the view, set the SettingsEditing.BatchEditSettings.HighlightDeletedCards property to false. All changes are maintained on the client side until the Save changes button is clicked or all changes are canceled by clicking the Cancel changes button.
If a Card View contains modified data, it displays a confirm message before a callback or postback is performed.
You can customize the batch edit mode settings using the following properties.
- The EditMode property allows you to specify which control element (cell or card) is used to edit data.
- The StartEditAction property specifies the action used to begin editing data.
The client batchEditApi property provides access to the batch editing client API. The BatchEditStartEditing and BatchEditEndEditing events occur when a Card View switches to/leaves the batch edit mode.
By default, all data editing operations are prohibited. In this demo, card insertion, deletion, and editing are explicitly enabled using settings available through the SettingDataSecurity property.
<dx:BootstrapCardView runat="server" DataSourceID="DataSourceBatchEditing" KeyFieldName="EmployeeID">
<SettingsEditing Mode="Batch"></SettingsEditing>
<SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
<Columns>
<dx:BootstrapCardViewColumn FieldName="FirstName" />
<dx:BootstrapCardViewColumn FieldName="LastName" />
<dx:BootstrapCardViewColumn FieldName="Title" />
<dx:BootstrapCardViewColumn FieldName="BirthDate" />
<dx:BootstrapCardViewColumn FieldName="City" />
<dx:BootstrapCardViewColumn FieldName="Country" />
</Columns>
<CardLayoutProperties>
<Items>
<dx:BootstrapCardViewCommandLayoutItem ShowDeleteButton="true" ShowNewButton="true" HorizontalAlign="Right" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Title" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="BirthDate" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="City" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Country" />
</Items>
</CardLayoutProperties>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
Data Validation
The Card View Control allows you to manually validate the edited card and display errors for invalid fields. This demo demonstrates how you can provide data validation by handling the CardValidating event.
To indicate cards with invalid data, the HtmlCardPrepared event is handled. This event is raised for each data row when the corresponding card within the card view has been created. In this sample, cards with invalid data are colored in red (a text-danger CSS class is applied).
In the Edit Form, an error icon indicates an invalid field. Hover over the icon with the mouse to display a hint along with a description of the error.
By default, all data editing operations are prohibited. In this demo, card insertion, deletion, and editing are explicitly enabled using settings available through the SettingDataSecurity property.
Please, correct all errors.
<dx:BootstrapCardView ID="CardViewDataValidation" runat="server" DataSourceID="PersonsDataSource" KeyFieldName="Id"
OnCardValidating="card_CardValidating" OnStartCardEditing="card_StartCardEditing" OnHtmlCardPrepared="card_HtmlCardPrepared">
<SettingsDataSecurity AllowEdit="true" AllowDelete="true" AllowInsert="true" />
<Columns>
<dx:BootstrapCardViewTextColumn FieldName="FirstName" ReadOnly="true" />
<dx:BootstrapCardViewTextColumn FieldName="LastName" ReadOnly="true" />
<dx:BootstrapCardViewTextColumn FieldName="Age">
<PropertiesTextEdit>
<ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</PropertiesTextEdit>
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewTextColumn FieldName="Email">
<PropertiesTextEdit>
<ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</PropertiesTextEdit>
</dx:BootstrapCardViewTextColumn>
<dx:BootstrapCardViewDateColumn FieldName="ArrivalDate">
<PropertiesDateEdit>
<ValidationSettings RequiredField-IsRequired="true"></ValidationSettings>
</PropertiesDateEdit>
</dx:BootstrapCardViewDateColumn>
</Columns>
<CardLayoutProperties>
<Items>
<dx:BootstrapCardViewCommandLayoutItem ShowEditButton="true" HorizontalAlign="Right" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="FirstName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="LastName" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Age" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="Email" />
<dx:BootstrapCardViewColumnLayoutItem ColumnName="ArrivalDate" />
<dx:BootstrapEditModeCommandLayoutItem />
</Items>
</CardLayoutProperties>
<SettingsPager NumericButtonCount="6" ItemsPerPage="2"></SettingsPager>
<SettingsLayout CardColSpanLg="6" CardColSpanSm="12" />
</dx:BootstrapCardView>
protected void card_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e) {
var errors = ValidateCard((string)e.NewValues["Email"], (int)e.NewValues["Age"], (DateTime)e.NewValues["ArrivalDate"]);
if(string.IsNullOrEmpty(e.CardError) && errors.Any())
e.CardError = "Please, correct all errors.";
foreach(var key in errors.Keys)
e.Errors[CardViewDataValidation.Columns[key]] = errors[key];
}
protected void card_HtmlCardPrepared(object sender, ASPxCardViewHtmlCardPreparedEventArgs e) {
if(CardViewDataValidation.EditingCardVisibleIndex == e.VisibleIndex)
return;
object[] values = (object[])CardViewDataValidation.GetCardValues(e.VisibleIndex, "Email", "Age", "ArrivalDate");
var errors = ValidateCard((string)values[0], (int)values[1], (DateTime)values[2]);
if(errors.Any())
e.Card.CssClass = e.Card.CssClass + " text-danger";
}
protected void card_StartCardEditing(object sender, ASPxStartCardEditingEventArgs e) {
if(!CardViewDataValidation.IsNewCardEditing)
CardViewDataValidation.DoCardValidation();
}
protected Dictionary<string, string> ValidateCard(string email, int age, DateTime arrival) {
var errors = new Dictionary<string, string>();
if(!email.Contains("@"))
errors["Email"] = "Invalid e-mail.";
if(age < 18)
errors["Age"] = "Age must be greater than or equal 18.";
if(DateTime.Today.Year != arrival.Year || DateTime.Today.Month != arrival.Month)
errors["ArrivalDate"] = "Arrival date is required and must belong to the current month.";
return errors;
}