WebDataGrid で CustomValidator を使用してカスタム検証を行う

ASP.NET Web Forms には各種の検証用コントロールが用意されていますが、WebDataGrid ではこれらを使用してデータ検証を行うことが可能です。
ここでは、CustomValidator を使用して WebDataGrid のセルでカスタムのクライアントサイド検証を行う方法をご紹介します。

WebDataGrid で列を定義します。ここでは、「Id」列はプライマリーキーとして非表示とし、「DateCol 」列はDateTime、「TextCol」列はStringタイプのデータをバインドする列とします。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" AutoGenerateColumns="False" DataKeyFields="Id">
	<Columns>
		<ig:BoundDataField DataFieldName="Id" Key="Id" Hidden="true">
			<Header Text="Id">
			</Header>
		</ig:BoundDataField>
		<ig:BoundDataField DataFieldName="DateCol" Key="DateCol" DataFormatString="{0:yyyy/MM/dd}">
			<Header Text="DateColumn">
			</Header>
		</ig:BoundDataField>
		<ig:BoundDataField DataFieldName="TextCol" Key="TextCol">
			<Header Text="TextColumn">
			</Header>
		</ig:BoundDataField>
	</Columns>
</ig:WebDataGrid>

DateTime 列である「DateCol」に対し、入力値を未来の日付のみに制限するカスタムの検証を設定していきます。
CustomValidator を以下のように定義します。

<asp:CustomValidator ID="CustomValidator1" 
					runat="server" 
					cssClass="myErrorClass" 
					ErrorMessage="未来の日付を入力してください" 
					ClientValidationFunction="isDateValid" 
					ControlToValidate="WebDataGrid1">
</asp:CustomValidator>

CustomValidator では、ControlToValidate プロパティに WebDataGrid の ID を設定します。
検証ロジックは ClientValidationFunction プロパティに指定した javascript ファンクション「isDateValid」で後ほど実装します。cssClass プロパティに指定した css クラス「myErrorClass」を以下のように定義します。

.myErrorClass
{
	background-color:lightgray;
	color:red;
	border:gray;
	font-weight:bold;
}

次に、WebDataGrid に EditorProviders コレクションに DateTimeEditorProvider を追加し、EditorControlの ID プロパティを設定します。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" AutoGenerateColumns="False" DataKeyFields="Id">
.....
	<EditorProviders>
		<ig:DateTimeEditorProvider ID="WebDataGrid1_DateTimeEditorProvider1">
			<EditorControl ClientIDMode="Predictable" ID="myDateEditor1">
			</EditorControl>
		</ig:DateTimeEditorProvider>
	</EditorProviders>
</ig:WebDataGrid>

続いて WebDataGrid の編集機能を有効に設定します。Behaviors コレクションに EditingCore ビヘイビアを追加し、「DateCol」列の編集時に DateTimeEditorProvider を使用する設定を行います。
この時、作成済みの CustomValidator の ID を ValidatorID に設定します。

<ig:WebDataGrid ID="WebDataGrid1" runat="server" Height="350px" Width="400px" AutoGenerateColumns="False" DataKeyFields="Id">
.....
	<Behaviors>
		<ig:EditingCore>
			<Behaviors>
				<ig:CellEditing>
					<ColumnSettings>
						<ig:EditingColumnSetting ColumnKey="DateCol" EditorID="WebDataGrid1_DateTimeEditorProvider1" ValidatorID="CustomValidator1" />
					</ColumnSettings>
					<EditModeActions MouseClick="Single" />
				</ig:CellEditing>
			</Behaviors>
		</ig:EditingCore>
		<ig:Activation>
		</ig:Activation>
	</Behaviors>
</ig:WebDataGrid>

最後に、保留にしておいた CustomValidator の検証ロジックを javascript ファンクションで定義します。「DateCol」列のセルの編集中の値をみて、今日の日付よりも前の値だった場合はエラーとする内容になります。この時、編集中のセルの値は ID が”WebDataGridのID_DateTimeEditorProviderのEditorControlのID”の要素より取得できます。

function isDateValid(sender, args) {
	var value = new Date($find("WebDataGrid1_myDateEditor1").get_date());
	var today = new Date();
	args.IsValid = (value > today);
}