Skip to main content

CardViewClientSideEvents.BatchEditCardValidating Property

Gets or sets the name of the JavaScript function or the entire code which will handle a client ASPxCardView’s ASPxClientCardView.BatchEditCardValidating event.

Namespace: DevExpress.Web

Assembly: DevExpress.Web.v23.2.dll

NuGet Package: DevExpress.Web


public string BatchEditCardValidating { get; set; }

Property Value

Type Default Description
String String.Empty

A string that represents either the name of a JavaScript function or the entire JavaScript function code used to handle an event.


The following example implements custom date validation in Batch Edit mode:

  1. Use the BatchEditCardValidating event to check values on the client.
  2. Use the CardValidating event to check values on the server.
  3. Use the AllowValidationOnEndEdit property to switch between validation modes on the client side. If the variation between the HireDate and BirthDate columns is less than 18, input data is considered invalid and data update is not allowed.
<script type="text/javascript">
    function OnValidation(s, e) {
        if (!clientChkb.GetChecked()) {
        var grid = ASPxClientCardView.Cast(s);
        var cellInfo1 = e.validationInfo[grid.GetColumnByField("BirthDate").index];
        var cellInfo2 = e.validationInfo[grid.GetColumnByField("HireDate").index];
        var years = CheckYears(cellInfo1.value, cellInfo2.value);
        if (years == null || years < 18) {
            cellInfo1.isValid = false;
            cellInfo2.isValid = false;
            cellInfo2.errorText = "Invalid difference between Hire Date and Birth Date";
            cellInfo1.errorText = "Invalid difference between Hire Date and Birth Date";
        } else {
            cellInfo1.isValid = true;
            cellInfo2.isValid = true;
    function CheckYears(date1, date2) {
        if (!date1 || !date2)
            return null;
        var msecPerYear = 1000 * 60 * 60 * 24 * 365;
        var years = (date2.getTime() - date1.getTime()) / msecPerYear;
        return years;
<dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" ClientInstanceName="clientChkb"
    Checked="true" Text="ClientValidation">
<dx:ASPxCheckBox runat="server" ID="ASPxCheckBox2" AutoPostBack="true" OnCheckedChanged="ASPxCheckBox2_CheckedChanged" Checked="false" Text="Validate on the Save Changes button click"></dx:ASPxCheckBox>
<dx:ASPxCardView ClientInstanceName="grid" DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID" ID="ASPxCardView1" OnCardValidating="ASPxCardView1_CardValidating" runat="server" AutoGenerateColumns="False">
    <SettingsEditing Mode="Batch">
        <dx:CardViewTextColumn FieldName="EmployeeID" ReadOnly="True" />
        <dx:CardViewTextColumn FieldName="LastName" />
        <dx:CardViewTextColumn FieldName="FirstName" />
        <dx:CardViewTextColumn FieldName="Address" />
        <dx:CardViewDateColumn FieldName="BirthDate" />
        <dx:CardViewDateColumn FieldName="HireDate" />
            <dx:CardViewCommandLayoutItem HorizontalAlign="Right" ShowNewButton="True" />
            <dx:CardViewColumnLayoutItem ColumnName="EmployeeID" />
            <dx:CardViewColumnLayoutItem ColumnName="LastName" />
            <dx:CardViewColumnLayoutItem ColumnName="FirstName" />
            <dx:CardViewColumnLayoutItem ColumnName="Address" />
            <dx:CardViewColumnLayoutItem ColumnName="BirthDate" />
            <dx:CardViewColumnLayoutItem ColumnName="HireDate" />
            <dx:EditModeCommandLayoutItem HorizontalAlign="Right" />
    <ClientSideEvents BatchEditCardValidating="OnValidation" />
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
    SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Address], [BirthDate], 
        [HireDate] FROM [Employees]"></asp:AccessDataSource>        
using DevExpress.Web;

public partial class _Default : System.Web.UI.Page {
    private bool CheckYears(DateTime hireDate, DateTime birthDate) {
        TimeSpan span = hireDate - birthDate;
        if (span.TotalDays / 365 < 18)
            return false;
            return true;
    void AddError(Dictionary<CardViewColumn, string> errors, CardViewColumn column, string errorText) {
        if (errors.ContainsKey(column)) return;
        errors[column] = errorText;
    protected void ASPxCheckBox2_CheckedChanged(object sender, EventArgs e) {
        ASPxCardView1.SettingsEditing.BatchEditSettings.AllowValidationOnEndEdit = !ASPxCheckBox2.Checked;
    protected void ASPxCardView1_CardValidating(object sender, ASPxCardViewDataValidationEventArgs e) {
        DateTime birthDate = (DateTime)e.NewValues["BirthDate"];
        DateTime hireDate = (DateTime)e.NewValues["HireDate"];
        var result = CheckYears(hireDate, birthDate);
        if (!result) {
            AddError(e.Errors, ASPxCardView1.Columns["BirthDate"], "Invalid difference between Hire Date and Birth Date");
            AddError(e.Errors, ASPxCardView1.Columns["HireDate"], "Invalid difference between Hire Date and Birth Date");
            e.CardError = "Correct validation errors";
        else {
            e.CardError = "Modifications aren't allowed in the online example. </br>If you need to test the data editing functionality, please download the example on your machine and run it locally.";

See Also