IgbGrid – セルに行削除のボタンを設ける

IgbGrid では、列ごとの BodyTemplate テンプレートパラメータを指定することで、セル内に任意のコンテンツを配置することができます。これを利用して、IgbGrid 内の各行に、行を削除する用の「削除」ボタンを配置したセルを設けることができます。

また、テンプレート内では “context” という名前の変数 (テンプレート引数) で、IgbCellTemplateContext 型のオブジェクトを参照できます。この context を参照することで、テンプレートが適用された各行の情報を参照することができます。例えば前述の「削除」ボタンのクリックイベントの処理でこの context を参照することで、どの行の「削除」ボタンがクリックされたのかを判断できます。

下記はそのコード例です。

@* *.razor *@
<IgbGrid @ref="_Grid" Data="_SampleData" PrimaryKey="@nameof(PersonalInfo.Id)" ...>
 ...
 <IgbColumn>

    @* BodyTemplate テンプレートパラメータの中に、任意のコンテンツを配置できます。 *@
    <BodyTemplate>

      @* BodyTemplate 内では、"context" という名前の変数(テンプレート引数)
         を参照でき、この context から、行ごとの情報を参照できます。 *@
      <button @onclick="(() => OnClickDelete(context)">
        削除
      </button>

    </BodyTemplate>

  </IgbColumn>
  ...
</IgbGrid>

変数名 context でテンプレートに渡される IgbCellTemplateContext オブジェクトですが、このオブジェクトの .Cell.Id.RowID プロパティに、そのテンプレートを適用したデータ行の “主キー値” が格納されます。この主キー値は、IgbGrid の PrimaryKey プロパティで指定したフィールド名の値になります。つまり、「削除」ボタンのクリックイベントハンドラで context.Cell.Id.RowID を参照することで、その「削除」ボタンがクリックされた対象のデータ行を特定することができます。

なお、実際にデータ行を削除するには、前述の context を介して対象のデータ行を特定し、データソースから削除するだけは足りません。単にデータソース内から対象のデータ行を削除するだけだと、IgbGrid がそのデータ変更を検知できず、表示が更新されません。そのため、IgbGrid の NotifyRemoveItem メソッドを呼び出して、どのデータ行が削除されたのかを IgbGrid に明示的に知らせる必要があります。このようにすることで、IgbGrid の表示上も、対象のデータ行が消えるようになります。

以下はそのコード例です。

@* 先の *.razor の続き *@

@code
{
  private IgbGrid? _Grid;

  private readonly List<PersonalInfo> _SampleData = new()
  {
    ...
  };

  /// <summary>
  /// 各行の "削除" ボタンがクリックされたときに呼び出されます
  /// </summary>
  private void OnClickDelete(IgbCellTemplateContext context)
  {
    // コンテキストをもとに、削除対象のデータ行を特定します。
    var targetIndex = _SampleData.FindIndex(
                    data => data.Id.ToString() == context.Cell.Id.RowID);
    if (targetIndex == -1) throw new Exception("削除対象の行が見つかりません。");
    var targetData = _SampleData[targetIndex];

    // 実際にデータソースから対象データを削除します。
    _SampleData.RemoveAt(targetIndex);

    // それだけでは IgbGrid はデータ行が削除されたことの変更を検知できないため、
    // IgbGrid の NotifyRemoveItem メソッドを呼び出して、どのデータ行が削除
    // されたのかを IgbGrid に明示的に知らせます。これにより、IgbGrid は
    // 表示を更新します。
    _Grid?.NotifyRemoveItem(_SampleData, targetIndex, targetData);
  }
}

完全に動作するサンプルプログラムの全体は下記 GItHub リポジトリを参照ください。

注意

BodyTemplate を使った IgbGrid を (Blazor WebAssembly ではなく) Blazor Server アプリケーション上で実行する場合、既定の構成だとサーバーとの通信が途切れる場合があります。その場合の対処方法については下記を参照ください。
「BodyTemplate を含む IgbGrid を Blazor Server で実行するとサーバーとの接続が切断される場合がある」