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="年齢" DataType="GridColumnDataType.Number"></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 ファイルは以下のようになります。
