This example demonstrates how to validate date column values on the client and server when the grid is in batch edit mode.
Overview
Follow the steps below:
- On the client side, handle the grid's BatchEditRowValidating event. In a handler, use the validationInfo argument property to get information about the modified row and call the
CheckYears
function to calculate the difference between the values of particular cells. Based on the calculated number, define whether the entered data is valid and specify an error text string for invalid data cells.ASPx<dx:ASPxGridView ID="ASPxGridView1" ClientInstanceName="grid" runat="server" KeyFieldName="EmployeeID"> <SettingsEditing Mode="Batch" /> <!-- ... --> <ClientSideEvents BatchEditRowValidating="OnValidation" /> </dx:ASPxGridView>
JavaScriptfunction OnValidation(s, e) { // ... var grid = ASPxClientGridView.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; }
- On the server side, handle the grid's RowValidating event. In a handler, use the NewValues argument property to get the new values of modified cells and call the
CheckYears
function to get the result of date calculation. Use the Errors and RowError argument properties to specify error text strings for invalid data cells and the Error Row.ASPx<dx:ASPxGridView ID="ASPxGridView1" runat="server" KeyFieldName="EmployeeID" OnRowValidating="ASPxGridView1_RowValidating" ...> <SettingsEditing Mode="Batch" /> <!-- ... --> </dx:ASPxGridView>
C#private bool CheckYears(DateTime hireDate, DateTime birthDate) { TimeSpan span = hireDate - birthDate; if (span.TotalDays / 365 < 18) return false; else return true; } void AddError(Dictionary<GridViewColumn, string> errors, GridViewColumn column, string errorText) { if (errors.ContainsKey(column)) return; errors[column] = errorText; } protected void ASPxGridView1_RowValidating(object sender, DevExpress.Web.Data.ASPxDataValidationEventArgs e) { DateTime birthDate = (DateTime)e.NewValues["BirthDate"]; DateTime hireDate = (DateTime)e.NewValues["HireDate"]; var result = CheckYears(hireDate, birthDate); if (!result) { AddError(e.Errors, ASPxGridView1.Columns["BirthDate"], "Invalid difference between Hire Date and Birth Date"); AddError(e.Errors, ASPxGridView1.Columns["HireDate"], "Invalid difference between Hire Date and Birth Date"); e.RowError = "Correct validation errors"; } // ... }
- Use the grid's AllowValidationOnEndEdit property to specify whether to validate data when a cell switches from edit to browse mode or on the Save changes button click.ASPx
<dx:ASPxCheckBox runat="server" ID="ASPxCheckBox2" AutoPostBack="true" Checked="false" Text="Validate on the Save Changes button click" OnCheckedChanged="ASPxCheckBox2_CheckedChanged" />
C#protected void ASPxCheckBox2_CheckedChanged(object sender, EventArgs e) { ASPxGridView1.SettingsEditing.BatchEditSettings.AllowValidationOnEndEdit = !ASPxCheckBox2.Checked; }
Files to Review
- Default.aspx (VB: Default.aspx)
- Default.aspx.cs (VB: Default.aspx.vb)
Documentation
More Examples
Example Code
ASPx<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>How to implement custom date validation in Batch Edit mode</title>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" language="javascript">
function OnValidation(s, e) {
if (!clientChkb.GetChecked()) {
return;
}
var grid = ASPxClientGridView.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;
}
</script>
<div>
<dx:ASPxCheckBox ID="ASPxCheckBox1" runat="server" ClientInstanceName="clientChkb"
Checked="true" Text="ClientValidation">
</dx:ASPxCheckBox>
<dx:ASPxCheckBox runat="server" ID="ASPxCheckBox2" AutoPostBack="true" OnCheckedChanged="ASPxCheckBox2_CheckedChanged" Checked="false" Text="Validate on the Save Changes button click"></dx:ASPxCheckBox>
<dx:ASPxGridView ID="ASPxGridView1" OnRowValidating="ASPxGridView1_RowValidating" ClientInstanceName="grid" runat="server" AutoGenerateColumns="False"
DataSourceID="AccessDataSource1" KeyFieldName="EmployeeID">
<SettingsEditing Mode="Batch" />
<Columns>
<dx:GridViewCommandColumn ShowNewButton="true" VisibleIndex="0" ></dx:GridViewCommandColumn>
<dx:GridViewDataTextColumn FieldName="EmployeeID" ReadOnly="True" VisibleIndex="1">
<EditFormSettings Visible="False" />
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="LastName" VisibleIndex="2">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="FirstName" VisibleIndex="3">
</dx:GridViewDataTextColumn>
<dx:GridViewDataTextColumn FieldName="Address" VisibleIndex="4">
</dx:GridViewDataTextColumn>
<dx:GridViewDataDateColumn Width="120" FieldName="BirthDate" VisibleIndex="5">
<PropertiesDateEdit>
<ValidationSettings ErrorDisplayMode="ImageWithTooltip">
</ValidationSettings>
</PropertiesDateEdit>
</dx:GridViewDataDateColumn>
<dx:GridViewDataDateColumn Width="120" FieldName="HireDate" VisibleIndex="6">
<PropertiesDateEdit>
<ValidationSettings ErrorDisplayMode="ImageWithTooltip">
</ValidationSettings>
</PropertiesDateEdit>
</dx:GridViewDataDateColumn>
</Columns>
<ClientSideEvents BatchEditRowValidating="OnValidation" />
</dx:ASPxGridView>
</div>
<asp:AccessDataSource ID="AccessDataSource1" runat="server" DataFile="~/App_Data/nwind.mdb"
SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Address], [BirthDate], [HireDate] FROM [Employees]"></asp:AccessDataSource>
</form>
</body>
</html>
C#using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
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;
else
return true;
}
void AddError(Dictionary<GridViewColumn, string> errors, GridViewColumn column, string errorText)
{
if (errors.ContainsKey(column)) return;
errors[column] = errorText;
}
protected void ASPxCheckBox2_CheckedChanged(object sender, EventArgs e)
{
ASPxGridView1.SettingsEditing.BatchEditSettings.AllowValidationOnEndEdit = !ASPxCheckBox2.Checked;
}
protected void ASPxGridView1_RowValidating(object sender, DevExpress.Web.Data.ASPxDataValidationEventArgs e)
{
DateTime birthDate = (DateTime)e.NewValues["BirthDate"];
DateTime hireDate = (DateTime)e.NewValues["HireDate"];
var result = CheckYears(hireDate, birthDate);
if (!result)
{
AddError(e.Errors, ASPxGridView1.Columns["BirthDate"], "Invalid difference between Hire Date and Birth Date");
AddError(e.Errors, ASPxGridView1.Columns["HireDate"], "Invalid difference between Hire Date and Birth Date");
e.RowError = "Correct validation errors";
}
else {
e.RowError = "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.";
}
}
}