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

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

IgbColumn の設定

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

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

<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 => OnChange(args, context))">
        </IgbCheckbox>
    </BodyTemplate>
</IgbColumn>

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

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

private void OnChange(IgbCheckboxChangeEventArgs args, IgbCellTemplateContext context)
{
    // 変更された行の ID を取得
    var rowId = int.Parse(context.Cell.Id.RowID);

    // 対象の Person オブジェクトを検索
    var person = _sampleData.FirstOrDefault(p => p.Id == rowId);

    // Person オブジェクトが見つからない場合は何もしない
    if (person is null) return;

    // チェックボックスの状態をデータに反映
    person.IsChecked = args.Detail.Checked;
}

実行結果

関連ドキュメント

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