ASPxClientGridView.BatchEditRowValidating Event

Fires to validate data on the client side and allows you to implement custom validation rules.

Declaration

BatchEditRowValidating: ASPxClientEvent<ASPxClientGridViewBatchEditRowValidatingEventHandler<ASPxClientGridView>>

Event Data

The BatchEditRowValidating event's data class is ASPxClientGridViewBatchEditRowValidatingEventArgs. The following properties provide information specific to this event:

Property	Description
key	Gets the row’s key.
validationInfo	Provides validation information of a row currently being validated.
visibleIndex	Gets the processed row’s visible index.

Remarks

The BatchEditRowValidating event fires to validate data in the following cases:

• A cell/row switches from edit to browse mode.
• A user clicks the Save Changes button or you call the grid’s client-side UpdateEdit method.
• The grid switches to Preview Changes mode.
• You call the ValidateRow(visibleIndex), ValidateRowByKey(key), or ValidateRows method.

The validationInfo argument property allows you to get information about the modified row. Use this property to define whether the data is valid and specify an error text for invalid data cells.

The data cells within the modified row are specified by the column indexes.

validationInfo = {
    1: {value: 'Chai', isValid: true, errorText: ''}
    2: {value: 'Beverages', isValid: true, errorText: ''}
    3: {value: '40', isValid: true, errorText: ''}
}

To prevent the grid from validating data when cell/row editing ends, set the AllowValidationOnEndEdit property to false.

Important

For security reasons, we recommend that you also implement the server-side data validation. Read more: Validate Grid Data.

Validate Duplicate Values on the Client Side

The following example demonstrates how to handle the BatchEditRowValidating event to validate duplicate values in batch edit mode:

To enable this behavior, follow the steps below:

1. Handle the grid’s server-side CustomJSProperties event to get cell values from the server.

2. Merge the cloned server-side values and client-side changes to get unique values.

3. Handle the grid’s BatchEditRowValidating event to validate duplicate values. Use the validationInfo argument property to get information about the processed cell and call the ValidateUniqueColumnValues function. This function gets the new value and checks if this value duplicates one of the unique values.

   ASPX

   <dx:ASPxGridView ID="Grid" runat="server" AutoGenerateColumns="False" DataSourceID="SqlDataSource1" KeyFieldName="CategoryID" ClientInstanceName="grid" OnCustomJSProperties="Grid_CustomJSProperties" >
   <!-- ... -->
       <SettingsEditing Mode="Batch" />
       <ClientSideEvents BatchEditRowValidating="OnBatchEditRowValidating" />
       <!-- ... -->
   </dx:ASPxGridView>
   

   JS

   function OnBatchEditRowValidating(s, e) {
       for (var columnIndex in e.validationInfo) {
           var validationInfo = e.validationInfo[columnIndex];
               ValidateUniqueColumnValues(s, validationInfo, parseInt(columnIndex), e.key);
       }
   }
   function ValidateUniqueColumnValues(grid, validationInfo, columnIndex, rowKey) {
       var newClientValue = validationInfo.value;
           var uniqueValues = GetUniqueColumnValuesForValidation(grid, columnIndex, rowKey, isModifying);
           if (uniqueValues[newClientValue]) {
               validationInfo.isValid = false;
               validationInfo.errorText = "Duplicate value";
           }
   }
   

Online Example

View Example: How to implement custom date validation in batch edit mode