IgrGrid – 行ごとに編集や削除を制御する方法

  • 公開日:
  • 最終更新日:

IgrGrid では、IgrGridEditingActions によって行をホバーした際に編集や削除のボタンが表示され、操作が可能です。本記事では、サンプルデータに「編集可否」「削除可否」を持たせ、行ごとに 編集ボタンや削除ボタンの表示/非表示を切り替えます。

IgrGrid の設定

行クラスを条件付きで付与するには、rowClassesに TypeScript のハンドラーを指定します。特定の条件を満たす行に CSS クラスを適用することで、ActionStrip のボタン表示を制御できます。

<IgrGrid
        ....
        rowEditable={true}
        rowClasses={webGridRowClassesHandler}
      >
        ....
</IgrGrid>

ハンドラーの作成

このハンドラーは、キーが CSS クラス名、値が条件（true/false） を返す関数のオブジェクトです。

const webGridRowClassesHandler = {
  "row-disEditable": (row: any) => row.data["rowEditable"] === false,
  "row-disDeletable": (row: any) => row.data["rowDeletable"] === false,
};
  • row-disEditable は rowEditable が false の行に適用
  • row-disDeletable は rowDeletable が false の行に適用

CSS クラスの定義

付与した行クラスに応じて、ActionStrip 内のボタンを非表示にできます。

/* Action strip 内の edit ボタンを非表示にする */
.row-disEditable igx-grid-action-button[iconname="edit"] {
  display: none;
}

/* Action strip 内の delete ボタンを非表示にする */
.row-disDeletable igx-grid-action-button[iconname="delete"] {
  display: none;
}

実行結果

  • 編集不可の行では Edit ボタンが非表示
  • 削除不可の行では Delete ボタンが非表示
サンプルプログラムのダウンロード GitHub リポジトリはこちら

ダウンロード後、以下のコマンドで実行できます。

npm ci
npm run dev

関連ドキュメント

Tagged: