Blazor Grid セル編集
Blazor Grid の Ignite UI for Blazor セル編集機能は、Blazor Grid コンポーネント内の個々のセルのコンテンツの優れたデータ操作機能を提供し、React CRUD 操作用の強力な API を備えています。これはスプレッドシート、データ テーブル、データ グリッドなどのアプリの基本的な機能であり、ユーザーが特定のセル内のデータを追加、編集、更新できるようにします。 デフォルトでは、Ignite UI for Blazor の Grid がセル編集に使用されます。また、デフォルトのセル編集テンプレートにより、列のデータ型 「Top of Form」 に基づいて異なるエディターが存在します。
さらに、データ更新アクション用の独自のカスタム テンプレートを定義したり、変更をコミット/破棄したりするためのデフォルトの動作をオーバーライドすることもできます。
Blazor Grid セル編集と編集テンプレートの例
セルの編集
UI を介した編集
編集可能なセルがフォーカスされたときに以下のいずれかの方法で特定のセルを編集モードにすることができます。
- ダブル クリック
- シングル クリック - 以前選択したセルが編集モードで現在選択したセルが編集可能な場合のみ、シングル クリックで編集モードに入ります。以前選択したセルが編集モードではない場合、編集モードに入らずにシングル クリックでセルを選択します。
- Enter キーの押下
- F2 キーの押下
変更をコミットしない場合も以下の方法で編集モードを終了できます。
- Escape キーの押下;
- ソート、フィルターリング、検索、非表示操作の実行時。
変更をコミットしない場合も以下の方法で編集モードを終了できます。
- Enter キーの押下
- F2 キーの押下
- Tab キーの押下
- 他のセルをシングル クリック -
IgbGrid
で他のセルをクリックしたときに変更がサブミットされます。 - その他の操作 (ページング、サイズ変更、ピン固定、移動など) は、編集モードを終了して変更を送信します。
[!Note] セルは、垂直/水平方向へのスクロールや
IgbGrid
以外をクリックした場合も編集モードのままです。セル編集と行編集両方で有効です。
API を介した編集
プライマリキーが定義されている場合のみ IgbGrid
API でもセル値を変更することができます。
this.grid.UpdateCell(newValue, rowID, 'ReorderLevel')
セルを更新するその他の方法として Cell
の Update
メソッドで直接更新する方法があります。
@code {
private UpdateCell() {
IgbCell cell = this.grid1.GetCellByColumn(rowIndex, "ReorderLevel");
cell.Update(70);
}
}
セル編集テンプレート
デフォルトのセル編集テンプレートの詳細については、編集トピックを参照してください。
セルに適用されるカスタム テンプレートを提供する場合は、そのテンプレートをセル自体またはそのヘッダーに渡すことができます。まず、通常どおりに列を作成します。
<IgbColumn
Field="Race"
DataType="GridColumnDataType.String"
InlineEditorTemplateScript="WebGridCellEditCellTemplate"
Editable="true"
Name="column1"
@ref="column1">
</IgbColumn>
そしてテンプレートを渡します:
*** In JavaScript ***
igRegisterScript("WebGridCellEditCellTemplate", (ctx) => {
let cellValues = [];
let uniqueValues = [];
for(const i of ctx.cell.grid.data){
const field = ctx.cell.column.field;
if(uniqueValues.indexOf(i[field]) === -1 )
{
cellValues.push(html`<igc-select-item value=${i[field]}>${(i[field])}</igc-select-item>`);
uniqueValues.push(i[field]);
}
}
return html`<div>
<igc-select position-strategy="fixed" @igcChange=${ e => ctx.cell.editValue = e.detail.value}>
${cellValues}
</igc-select>
</div>`;
}, false);
上記のサンプルは、こちらで参照できます。
Grid Excel スタイル編集
Excel スタイル編集を使用すると、Excel を使用する場合と同じようにセルをナビゲートし、すばやく編集できます。
このカスタム機能を実装するには、IgbGrid
のイベントを使用します。最初にグリッドの keydown イベントにフックし、そこから 2 つの機能を実装できます。
- 常時編集モード
- Enter/Shift+Enter ナビゲーション
次の適格なインデックスを見つけるための重要な部分は以下のようになります。
詳細については、サンプルを参照してください。
Blazor Grid Excel スタイル編集のサンプル
上記のアプローチの主な利点は次のとおりです:
- 常時編集モード: セルが選択されているときに入力すると、編集モードに入り、入力された値が既存の値を置き換えます。
- Enter/Shift+Enter で移動する場合、データ以外の行はスキップされます。これにより、ユーザーは値をすばやく切り替えることができます。
CRUD 操作
[!Note] CRUD 操作を実行した場合、filtering、sorting、grouping などのパイプが再適用されるため、ビューが自動的に更新されることに注意してください。
IgbGrid
は基本的な CRUD 操作のための簡易な API を提供します。
新しいレコードの追加
IgbGrid
コンポーネントは、提供したデータをデータ ソースに追加する AddRow
メソッドを公開します。
@code {
//Assuming we have a `GetNewRecord` method returning the new row data.
const record = this.GetNewRecord();
this.GridRef.AddRow(record);
}
データを Grid で更新
Grid のデータ更新は、グリッドで PrimaryKey が定義されている場合のみ UpdateRow
と UpdateCell
メソッドで行うことができます。セルと行の値またはそのいずれかを各 update メソッドで直接更新できます。
@code {
// Updating the whole row
this.grid.UpdateRow(newData, this.selectedCell.cellID.rowID);
// Just a particular cell through the Grid API
this.grid.UpdateCell(newData, this.selectedCell.cellID.rowID, this.selectedCell.column.field);
// Directly using the cell `update` method
this.selectedCell.Update(newData);
// Directly using the row `update` method
IgbRowType row = this.grid.GetRowByKey(rowID);
row.Update(newData);
}
Grid からデータを削除
DeleteRow
メソッドは、PrimaryKey
が定義されている場合に指定した行のみを削除することに注意してください。
@code {
// Delete row through Grid API
this.grid.DeleteRow(this.selectedCell.cellID.rowID);
// Delete row through row object
IgbRowType row = this.grid.GetRowByIndex(rowIndex);
row.Del();
}
編集イベントでのセル検証
IgbGrid
の編集イベントを使用して、ユーザーが IgbGrid
を操作する方法を変更できます。
この例では、CellEdit
イベントにバインドすることにより、入力されたデータに基づいてセルを検証します。セルの新しい値が事前定義された基準を満たしていない場合、イベントをキャンセルすることでデータソースに到達しないようにします。
最初に必要なことは、グリッドのイベントにバインドすることです。
<IgbGrid CellEditScript="HandleCellEdit" />
CellEdit
は、セルの値がコミットされる直前に発生します。CellEdit の定義では、アクションを実行する前に特定の列を確認する必要があります。
*** In JavaScript ***
igRegisterScript("HandleCellEdit", (ev) => {
var d = ev.detail;
if (d.column != null && d.column.field == "UnitsOnOrder") {
if (d.newValue > d.rowData.UnitsInStock) {
d.cancel = true;
alert("You cannot order more than the units in stock!")
}
}
}, false);
Units On Order (注文済み) 列の下のセルに入力された値が使用可能量 (Units in Stock、在庫数 の値) よりも大きい場合、編集はキャンセルされ、ユーザーにキャンセルの警告が表示されます。
以下は、上記の検証が IgbGrid
に適用された結果のデモです。
スタイル設定
事前定義されたテーマに加えて、利用可能な CSS プロパティを設定することでグリッドをさらにカスタマイズできます。 一部の色を変更したい場合は、最初にグリッドのクラスを設定する必要があります。
<IgbGrid Class="grid"></IgbGrid>
次に、そのクラスに関連する CSS プロパティを設定します。
.grid {
--ig-grid-edit-mode-color: orange;
--ig-grid-cell-editing-background: lightblue;
}