IgbGrid において、特定の列をユーザーに表示しながらも、エクスポート時にはその列を除外する方法についてご紹介します。
例として、ユーザーのアイコン画像など、表示は必要ですが、エクスポートしたデータファイルには画像データのエクスポートには対応していないので、画像列ごとエクスポートの対象外にしたい場合があります。
IgbGrid コンポーネントでは、エクスポートプロセスを制御するイベントハンドラを使用して、特定の列をエクスポートから除外することができます。
IgbGrid の設定
例えば、アイコンなどの画像はグリッドに表示することはできますが、IgbGrid はアイコンなどの画像ファイルのエクスポートをサポートしていないため、これらのアイコン列をエクスポートから除外することがあるとします。
IgbGridでは、エクスポートプロセスを制御するイベントハンドラを使用して、特定の列を除外することができます。
<IgbGrid ....>
<IgbGridToolbar>
<IgbGridToolbarActions>
<IgbGridToolbarExporter ....
ExportStartedScript="OnExportStarted"
ExportEndedScript="OnExportEnded">
</IgbGridToolbarExporter>
</IgbGridToolbarActions>
</IgbGridToolbar>
<IgbColumn Field="@nameof(Person.Name)"
Header="氏名">
</IgbColumn>
<IgbColumn Field="@nameof(Person.Age)"
Header="年齢">
</IgbColumn>
<IgbColumn Field="@nameof(Person.JobTitle)"
Header="職種">
</IgbColumn>
<IgbColumn Field="@nameof(Person.Image)"
Header="アイコン"
DataType="GridColumnDataType.Image">
</IgbColumn>
</IgbGrid>
イベントハンドラの登録
OnExportStarted と OnExportEnded イベントハンドラを登録し、エクスポートが開始される前と終了した後に、アイコン列 ( “Image” ) の表示 / 非表示を制御します。
- OnExportStarted
エクスポートプロセスが開始すると、OnExportStartedイベントが発生し、画像列を非表示に設定してエクスポートから除外します - OnExportEnded
エクスポートが完了すると、OnExportEndedイベントが発生し、画像列を再表示します
igRegisterScript("OnExportStarted", (e) => {
const grid = e.target.grid;
const imageColumn = grid.columnList.find(c => c.field === "Image");
imageColumn.hidden = true;
}, false);
igRegisterScript("OnExportEnded", (e) => {
const grid = e.target.grid;
const imageColumn = grid.columnList.find(c => c.field === "Image");
imageColumn.hidden = false;
}, false);
実行結果
このような方法で、エクスポートプロセス中に特定の列をシームレスに除外することができます。
実際にエクスポートした Excel ファイルは以下のようになります。
