Blazor Grid 編集

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

    設定

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

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

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

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

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

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

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

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

    テンプレートの編集

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

    • string データ型の場合、デフォルトのテンプレートは IgbInput を使用します。
    • number データ型のデフォルト テンプレートは IgbInput type="number" を使用します。数値に解析できない値にセルを更新した場合、変更は無視されてセルの値が 0 に設定されます。
    • date データ型ではデフォルトのテンプレートは IgbDatePicker を使用します。
    • dateTime データ型ではデフォルトのテンプレートは DateTimeEditor を使用します。このエディターは、DateTime オブジェクトの入力要素部分のマスクを提供します。
    • time データ型ではデフォルトのテンプレートは TimePicker を使用します。
    • boolean データ型ではデフォルトのテンプレートは IgbCheckbox を使用します。
    • currency データ型の場合、デフォルトのテンプレートは、アプリケーションまたはグリッドのロケール設定に基づいたプレフィックス/サフィックス構成の InputGroup を使用します。
    • percent パーセントデータ型の場合、デフォルトのテンプレートは、編集された値のプレビューをパーセントで表示するサフィックス要素を持つ InputGroup を使用します。

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

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

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

    イベント 説明 引数 キャンセル可能
    RowEditEnter RowEditing が有効な場合、行が編集モードに入るときに発生します。 IgbGridEditEventArgs true
    CellEditEnter セルが編集モードに入るときに発生します。 (RowEditEnter の後) IgbGridEditEventArgs true
    CellEdit 値が変更された場合、セルの値がコミットされた前に発生します。 (Enter の押下など) IgbGridEditEventArgs true
    CellEditDone 値が変更された場合、セルが編集され、セルの値がコミットされた後に発生します。 IgbGridEditDoneEventArgs false
    CellEditExit セルが編集モードを終了したときに発生します。 IgbGridEditDoneEventArgs false
    RowEdit が有効な場合、編集モードの値の行がコミットされた前に発生します (行編集オーバーレイの [完了] ボタンをクリックなど)。 IgbGridEditEventArgs true
    RowEditDone が有効な場合、行が編集され、新しい行の値がコミットされた後に発生します。 IgbGridEditDoneEventArgs false
    RowEditExit が有効な場合、行が編集モードを終了したときに発生します。 IgbGridEditDoneEventArgs false

    イベントのキャンセル

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

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

    機能の統合

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

    Grid フィルタリング ソート ページング 移動 ピン固定 非表示 グループ化 サイズ変更 Escape Enter F2 Tab セル クリック 新しい行の追加/削除/編集
    編集モードを保持 ✔
    編集モードを終了 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔
    コミット ✔ ✔ ✔ ✔ ✔
    破棄 ✔ ✔ ✔ ✔ ✔ ✔ ✔ ✔

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

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

    <IgbGrid
    Id="grid"
    SortingScript="SortingHandler"
    RowEditable="true">
</IgbGrid>

//In JavaScript
function SortingHandler() {
    grid.endEdit(true);
}
igRegisterScript("SortingHandler", SortingHandler, false);

    API リファレンス

    その他のリソース