データ：編集

CollectionViewでは、.NETのIEditableCollectionViewインタフェースと同様に、editItem、commitEdit、cancelEditの各メソッドを使用して項目を編集できます。

• editItemメソッドは、項目のコピーを保存し、コレクションを「編集モード」にします。編集モードの間はビューがリフレッシュされません。つまり、編集処理中は、項目はソートされず、フィルタ処理によってビューから外されることもありません。

• commitEditメソッドを使用すると編集モードが終了し、ソートやフィルタ処理が再度アクティブになります。項目が変更された場合は、連結コントロールにその変更が表示されるように、collectionChangedイベントが発生します。

• cancelEditメソッドを使用すると、元のデータが復元され、編集モードが終了します。

編集動作

編集を開始すると、行ヘッダーに鉛筆アイコンが表示され、コレクションが編集モードであることを示します。

編集モード中に［Esc］キーを押すと、編集はキャンセルされ、元のデータが復元されます。

選択範囲を別の行に移動したり、グリッドからフォーカスを移動すると、編集がコミットされます。この時点で、コレクションがリフレッシュされ、新しい項目値を使用してアクティブなフィルタ処理／ソートが適用されます。

項目の追加

CollectionViewでは、addNew、commitNew、cancelNewの各メソッドを使用して項目を追加できます。項目を削除するには、removeメソッドを使用します。

addNewメソッドは、コレクションに空の項目を追加し、新しい項目への参照を返します。呼び出し元は、この戻り値を使用して新しい項目を初期化することができます。または、新しい項目を作成して初期化するCollectionView.newItemCreator関数を提供することもできます。

addNewメソッドは、コレクションを「追加」モードにし、ソートとフィルタ処理を一時停止して、コミットされるまで新しい項目の位置を維持します。

commitNewメソッドは、コレクションの「追加モード」を終了し、コレクションをリフレッシュして、ソートとフィルタ処理を再開します。

cancelNewメソッドは、コレクションから新しい項目を削除し、「追加モード」を終了します。

項目を追加するには、最初に、グリッドに新しい項目を追加できるようにしておく必要があります。allowAddNewプロパティをtrueに設定します。次に、選択範囲を最後の行に移動します。行ヘッダーにアスタリスクがあるこの行を「新しい項目テンプレート」と呼びます。次のようになります。

新しい項目を通常どおり編集し、完了したら［Enter］キーを押すか、選択範囲を別の行に移動すると、新しい行がコミットされます。

新しい行の編集中に［Esc］キーを押すと、行の追加がキャンセルされ、コレクションからその行が削除されます。

項目の追加／削除

項目を削除するには、行ヘッダーをクリックして行全体を選択し、［Del］キーを押します。グリッドがコレクションのremoveメソッドを呼び出し、その項目が削除されます。

変更の追跡

Webアプリケーションは、データをサーバーからダウンロードし、ローカルで変更してから、変更内容でサーバーを更新するというパターンをよく使用します。

CollectionViewでは、追加、削除、変更された項目を追跡して管理できるため便利です。

この機能を使用するには、trackChangesプロパティにtrueを設定します。これで、CollectionViewによって次のコレクションに項目が追加されます。

• itemsAdded
• itemsRemoved
• itemsEdited

準備が整うと、変更をサーバーに送信し、clearChangesメソッドを呼び出して変更追跡コレクションをリセットします。

変更の追跡のデモを参照してください。

検証

CollectionViewには、検証をサポートするgetErrorプロパティがあります。これを使用するには、getErrorに、検証されるデータ項目および検証するプロパティを含む2つのパラメータを受け取り、エラー状態を記述する文字列（またはエラーがない場合はnull）を返す関数を設定します。

import * as wijmo from '@mescius/wijmo';

let view = new wijmo.CollectionView();

// Gmailのメールアドレスのみを受け取ります。
view.getError = (item, property) => {
    if ( property == "email" && item.endsWith('@gmail.com') ) {
        return null;
    }
    else {
        return '無効なメールです。Gmailのアドレスを入力してください。';
    }
}

getErrorプロパティは、値自体（最小値、最大値、必須、パターンなど）に基づいて基本HTML5を超える検証を行います。複数のプロパティを含む条件を指定できます。

getErrorプロパティを使用すると、項目の編集に使用されるUIではなく、コレクション自体に検証ロジックを含めることができます。その後、入力フォームやFlexGridなどのコントロールで同じメソッドを使用できます。