IgbGrid – セルにチェックボックスを表示したい

IgbGrid では、BodyTemplate を活用することでセル内に独自のコンポーネントを埋め込むことができます。この記事では、bool 型の列に IgbCheckbox を表示し、行ごとにチェック状態を制御する方法を紹介します。

IgbGrid の設定

データソースへの反映処理はグリッドコンポーネントを介して行うため、グリッドコンポーネント(IgbGrid) への参照を取得しておきます

IgbColumn の設定

以下のように IgbColumn の Field に bool 型プロパティ（例：IsChecked）を指定し、Editable=”false” を設定することでセル編集を無効化し、チェックボックス操作のみで状態を変更できるようにします。
チェックボックスは BodyTemplate を以下のように使用して明示的に埋め込む形となります。

• Checked属性にセルの値（context.Cell.Value）をバインドします
• Changeイベントでチェック状態が変更された際にハンドラを呼び出し、データソースに反映します

<IgbGrid @ref="_grid" ...>
  ..
  <IgbColumn Field="@nameof(Person.IsChecked)"
             DataType="GridColumnDataType.Boolean"
             Editable="false">
    <BodyTemplate>
        <IgbCheckbox @key="context.Cell.Id.RowID"
                     Checked="@Convert.ToBoolean(context.Cell.Value.ToString())"
                     Change="(args => OnChangeAsync(args, context))">
        </IgbCheckbox>
    </BodyTemplate>
</IgbColumn>

@code {
  private IgbGrid? _grid;
  ...

チェック変更イベントの実装

チェック状態が変化したとき、該当行のデータを更新するための処理を OnChangeAsync メソッドで記述します。

private async Task OnChangeAsync(
    IgbCheckboxChangeEventArgs args, 
    IgbCellTemplateContext context)
{
    if (_grid is null) throw new InvalidOperationException();

    // 変更された行の ID を取得
    var rowId = int.Parse(context.Cell.Id.RowID);

    // 変更された列のフィールド名を取得
    var field = context.Cell.Column.Field;

    // チェックボックスの状態をデータに反映
    await _grid.UpdateCellAsync(args.Detail.Checked, rowId, field);
}

実行結果

関連ドキュメント

• IgbGrid – セルのテンプレート内から、該当する行データや、同行の任意の列値を参照する方法 – INFRAGISTICS ナレッジ ベース