GridView for ASP.NET Web Forms は、Input for ASP.NET Web Forms コントロールと完全な互換性があります。Input for ASP.NET Web Forms を使用すれば、マスク、日付、数値、パーセント、通貨の編集などのデータ検証を、簡単にグリッドに追加できます。

サーバー側の編集時にC1Inputコントロールを使用してセルを更新するには、以下の手順を実行します。

1. C1GridViewコントロールを右クリックして、コンテキストメニューから[プロパティ]を選択します。
2. プロパティウインドウで、AllowC1InputEditors プロパティおよび AutoGenerateEditButton プロパティを True に設定します。

以下の手順では、C1GridView コントロール内にテンプレート列を追加し、これらの列に C1InputNumeric と C1InputCurrency を追加します。以下の手順では、C1GridView コントロールを作成し、それを Northwind データベースの Products テーブルに連結してあるものと想定していることに注意してください。

下記の手順を実行します。

1. C1GridView を右クリックして、コンテキストメニューから［スマートタグの表示］を選択します。［C1GridView のタスク］メニューから、プロパティビルダーを選択します。［C1GridView のプロパティ］ダイアログボックスが表示されます。
2. 左ペインで、「列」タブを選択します。
3. ［実行時に自動的に列を作成］チェックボックスが選択されている場合、非選択状態にします。
4. ［選択した列］のリストで、列を選択し、〈削除〉ボタンをクリックして、ProductID、SupplierID、CategoryID、UnitPrice、UnitsInStock、QuantityPerUnit、および UnitsOnOrder 列を削除します。 テンプレート列を追加して、これらの列の大部分を置き換えることに注意してください。
5. ［使用可能な列］のリストで、［使用可能な列］のリストから［テンプレートフィールド］を選択します。
6. 列リストの間にある矢印ボタンをクリックして、「選択した列」のリストにテンプレートフィールドをコピーします。合計で３つのテンプレートフィールドが追加されるように、この手順をあと２回繰り返します。
7. 各テンプレート列の HeaderText プロパティを、それぞれ「単価」、「在庫」、「発注済」に設定します。
8. 〈下〉矢印ボタンを使用して、Discontinued 列を［選択した列］のリストの下部に移動します。
9. 〈OK〉をクリックし、［C1GridView のプロパティ］ダイアログボックスを閉じて、フォームに戻ります。
10. C1GridView スマートタグをクリックして、［C1GridView タスク］メニューから、［テンプレートの編集］を選択します。
11. C1InputCurrency コントロールを Price 列に追加します。
    
    1. ［C1GridView タスク］メニューで、〈表示〉ドロップダウン矢印をクリックし、Column[2] - Price で［Item Template］を選択します。
    2. Item Template エディタが表示されます。
    3. テンプレートの本体領域内をクリックし、Visual Studio のツールボックスに移動し、C1InputCurrency コントロールをダブルクリックして、それを C1TemplateField.ItemTemplate に追加します。
    4. C1InputCurrency コントロールのスマートタグをクリックし、［C1InputCurrency タスク］メニューから［DataBindngs の編集］を選択します。これによって、［C1InputCurrency DataBindings］ダイアログボックスが開きます。
    5. ［C1InputCurrency DataBindings］ダイアログボックスから、［Show all properties］チェックボックスがON になっていない場合、ON にします。
    6. ［バインド可能プロパティ］リストで［値］を選択し、〈フィールドのバインド〉ラジオボタンを選択して、［バインドするフィールド］ドロップダウンリストで、UnitPrice 列を選択します。
    7. 〈OK〉をクリックし、設定を保存して［C1InputCurrency DataBindings］ダイアログボックスを閉じます。
    8. C1InputCurrency コントロールを１回クリックして選択し、プロパティウィンドウで、Width プロパティを "60px" に設定します。
12. C1InputNumeric コントロールを Stock 列に追加します。
    
    1. ［C1GridView スマートタグ］をクリックし、〈表示〉ドロップダウン矢印をクリックして、Column[3] - Stock で［Item Template］を選択します。
    2. テンプレートの本体領域内をクリックし、Visual Studio のツールボックスに移動し、C1InputNumeric コントロールをダブルクリックして、それを C1TemplateField.ItemTemplate に追加します。
    3. C1InputNumeric コントロールのスマートタグをクリックして、［C1InputNumeric タスク］メニューから［DataBindings の編集］を選択します。これによって、［C1InputNumeric DataBindings］ダイアログボックスが開きます。
    4. ［C1InputNumeric DataBindings］ダイアログボックスから、［すべてのプロパティの表示］のチェックボックスが ON になっていない場合、ON にします。
    5. バインド可能プロパティリストで値を選択し、〈フィールドのバインド〉ラジオボタンを選択して、バインドするフィールドドロップダウンリストで、UnitsInStock を選択します。
    6. 〈OK〉をクリックし、設定を保存して［C1InputNumeric DataBindings］ダイアログボックスを閉じます。
    7. C1InputNumeric コントロールを１回クリックして選択し、プロパティウィンドウで、Width プロパティを「60px」に設定します。
    8. C1InputNumeric コントロールのスマートタグをクリックし、［C1InputNumeric タスク］メニューで、［DecimalPlaces］テキストボックスに「0」を入力します。
13. C1InputNumeric コントロールを Ordered 列に追加します。
    
    1. ［C1GridView スマートタグ］をクリックし、〈表示〉ドロップダウン矢印をクリックして、Column[4] - Stock で［Item Template］を選択します。
    2. テンプレートの本体領域内をクリックし、Visual Studio のツールボックスに移動し、C1InputNumeric コントロールをダブルクリックして、それを C1TemplateField.ItemTemplate に追加します。
    3. C1InputNumeric コントロールのスマートタグをクリックして、［C1InputNumeric タスク］メニューから［DataBindings の編集］を選択します。これによって、［C1InputNumeric DataBindings］ダイアログボックスが開きます。
    4. ［C1InputNumeric DataBindings］ダイアログボックスから、［すべてのプロパティの表示］のチェックボックスが ON になっていない場合、ONにします。
    5. バインド可能プロパティリストで値を選択し、〈フィールドのバインド〉ラジオボタンを選択して、バインドするフィールドドロップダウンリストで、QuantityPerUnit を選択します。
    6. 〈OK〉をクリックし、設定を保存して［C1InputNumeric DataBindings］ダイアログボックスを閉じます。
    7. C1InputNumeric コントロールを１回クリックして選択し、プロパティウィンドウで、Width プロパティを「60px」に設定します。
    8. C1InputNumeric コントロールのスマートタグをクリックし、［C1InputNumeric タスク］メニューで、［MaxValue］テキストボックスに「200」を入力します。
    9. C1GridViewC1GridView スマートタグをクリックして、［C1GridView タスク］メニューから［テンプレート編集の終了］を選択します。

このトピックの作業結果

アプリケーションを実行して、Price、Stock、および Ordered 列で、グリッドに Input for ASP.NET Web Forms コントロールが使用されていることを確認します。