React Grid 編集

React Grid の Ignite UI for React セル編集機能を使用すると、レコードの作成、更新、削除などのデータ操作を簡単に実行できます。IgrGrid は、これらの操作をカスタマイズできる強力なパブリック API を提供します。データ操作のフェーズは次のとおりです。

• セル編集
• 行編集
• 一括編集 (追加予定)

設定

有効にする編集モードを指定するために、IgrGrid は Editable および RowEditable ブール値プロパティを公開します。

以下のオプションは、プロパティ Editable で指定できます。

• false - 対応する列の編集が無効になります 。これがデフォルト値です。
• true - 対応する列の編集が有効になります。

列が編集できない場合でも、IgrGrid によって公開されるパブリック API を介して値を変更できます。

以下のオプションは、プロパティ RowEditable で指定できます。

• false - 対応するグリッドの行編集は無効になります。これがデフォルト値です。
• true - 対応するグリッドで行編集が有効になります。

IgrGrid で RowEditable プロパティを true に設定し、Editable プロパティがどの列にも明示的に定義されていない場合、編集は主キー以外のすべての列で有効になります。

• セルおよび一括編集 - このシナリオでは、各セルの変更は個別に保持され、元に戻す/やり直し操作はセル レベルで使用できます。
• 行および一括編集 - このシナリオでは、変更は行レベルで保持されるため、元に戻す/やり直し操作は変更された各セルではなく、各行のセル全体に対して動作します。

テンプレートの編集

データ型固有の編集テンプレートを使用する場合、列 DataType プロパティを指定する必要があります。次に各型のデフォルト テンプレートについて説明します。

• string データ型の場合、デフォルトのテンプレートは IgrInput を使用します。

• number データ型のデフォルト テンプレートは IgrInput type=“number” を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。

• date データ型ではデフォルトのテンプレートは IgrDatePicker を使用します。

• dateTime データ型ではデフォルトのテンプレートは IgrDatePicker を使用します。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。

• time データ型ではデフォルトのテンプレートは IgrDateTimeInput を使用します。

• boolean データ型ではデフォルトのテンプレートは IgrCheckbox を使用します。

• currency データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の IgrInput を使用します。

• percent パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ IgrInput を使用します。

• カスタム テンプレートについては、セル編集トピックを参照してください。

すべての利用可能な列データ型は、公式の列タイプトピックにあります。

All available column data types could be found in the official Column types topic.

イベントの引数とシーケンス

グリッドは、編集エクスペリエンスをより詳細に制御できる広範なイベントを公開します。これらのイベントは、行の編集およびセルの編集のライフサイクル - 編集の開始、コミット、またはキャンセル時に発生します。

イベントのキャンセル

• RowEditEnter - Row も Cell も編集モードに入りません。
• CellEditEnter - セル編集に入ることを防止します。RowEditable が有効な場合、セルの編集は禁止されたままですが、行の編集がトリガーされます。
• CellEdit - Cell/Row の編集を許可し、[完了] ボタンまたは [Enter] を押しても値または行のトランザクションはコミットされません。[キャンセル] ボタンをクリックするまで、セル編集と行編集は閉じません。
• RowEdit - 行全体ではなくセルのコミットは可能です。行は編集モードのままになり、行トランザクションは開いていると見なされます。[完了] を押しても、行をコミットまたは閉じません。[キャンセル] ボタンは、変更をコミットせずに編集プロセスとトランザクションを閉じます。

以下のサンプルは、実行中の編集実行シーケンスを示しています。

機能の統合

セル/行が編集モードの場合、ユーザーはさまざまな方法でグリッドを操作できます。以下のテーブルは、特定の操作が現在の編集にどのように影響するかを示しています。

テーブルからわかるように、列のサイズ変更を除くすべての操作は編集を終了し、新しい値を破棄します。新しい値がコミットされる場合、対応する機能の 「-ing」 イベントで開発者が実行できます。

たとえば、ユーザーがセル/行が編集モードのときに列をソートしようとする場合に、新しい値をコミットする方法を示します:

function onSorting(args: IgrSortingEventArgs) {
    const grid = args.target as IgrGrid;
    grid.endEdit(true);
}

<IgrGrid data={localData} primaryKey="ProductID" onSorting={onSorting}>
</IgrGrid>

API リファレンス

その他のリソース

• 列のデータ型
• 仮想化とパフォーマンス
• ページング
• フィルタリング
• ソート
• 集計
• 列のピン固定
• 列のサイズ変更
• 選択