ASP.NET MVC で Wijmo を使う – 7

なーさんです。
今年ももう年末が近づいてきました。ついこの間、夏の暑さでへばっていたのになんとも早いものです。

さて、前回は Wijmo の FlexGrid の内容を、Excel に出力するときにカスタマイズしました。
今回は事前に FlexGrid 上で文字色などをカスタマイズしたものを、Excel に出力しました。
どちらからというとファイル出力はおまけで、FlexGrid 上のカスタマイズが中心になります。

下記は2021年11月現在の情報で執筆しています。
文中、画像中で使用されている商標等はそれぞれの企業、団体に帰属します。

作ったもの

前々回作成した FlexGrid に表示した 10 列 1 万行のデータを Excel に出力するサンプルに手を加えていきます(前回のソースでも大丈夫です)。

FlexGrid を下記図のようにカスタマイズ(セルの装飾と値変更)します。そして、この画面を Excel 出力して反映を確認します。
(装飾に対して出力結果をわかりやすく説明することが主眼なので、派手な配色のデザインなのはご容赦ください^^;)

開発の準備

開発は前回に引き続き、下記のソフトウェアやライブラリを使って行いました。

  • Microsoft Visual Studio 2019
  • GrapeCity Wijmo5
  • JSZip JSZip3

Wijmo5 は、前回の記事に合わせるため 5.20203.766 を使用しました。
JSZip は Wijmo が Excel ファイルを生成するのに使用されます。
JSZip のインストールは前々回の記事をご覧ください。

実装

前回あるいは前々回作成したプロジェクト「WijmoToExcel」の ExcelSample.js に手を加えていきます。
細切れにして書くとわかりづらいので、下記に変更後のソースコード全行を記載しました。

前々回との差分は大きく 2 点あります。
まず Excel 出力機能については、IflexGridXlsxOptions の下記を true にしました。

  • includeCellStyles:セルスタイルを出力する
  • includeColumnHeaders:列ヘッダを出力する

includeCellStyles を true にしないと背景色や罫線など、スタイルのカスタマイズが Excel に反映されないので、ご注意ください。

そして残りは FlexGrid のカスタマイズ用のコードとなります。
今回は FlexGrid の formatItem イベントでカスタマイズしました。ほかにも下記のような方法が挙げられます。

  • FlexGrid に Column を割り当てるときや追加するときに設定(列幅、ヘッダ名等)する
  • FlexGrid の itemFormatter プロパティを使う
  • jQuery や Wijmo の addClass 等で Class を操作する
  • CSS を直接追記・変更する

formatItem イベントでは、記述した条件に対して処理を行えます。
formatItem イベントも itemFormatter プロパティも基本的に同じように使えますが、formatItem は定義した処理を addHandler で追加して使います。
列フッタのセルだけ、通常セルだけという風に領域ごとに定義を分けたいときに使い勝手がよさそうです。
領域の種類については wijmo.grid.CellType で検索してみてください。

formatItem では下記を行っています。

  • 列ヘッダのスタイル変更・値変更
  • 通常セルのスタイル変更・値変更

順番に見ていきます。

【列ヘッダのスタイル変更・値変更】

列ヘッダは「作ったもの」の図にある、背景色が赤くなっている部分です。

formatItemColHead(FlexGrid grid, formatItemEventArgs e) に処理を定義しています。それを冒頭の SampleInit() 内で wijmoSampleGrid.formatItem.addHandler(formatItemColHead) によって formatItem に追加しています。

下記のカスタマイズを行いました。

  • 全てのヘッダの背景色を赤くする
  • 左端のみ列幅を狭める
  • 奇数列のヘッダ名の書き換える

引数 e から FlexGrid のセルオブジェクトが渡ってくるので、最初に列ヘッダに関連するセルだけ拾い上げます。e には対象セルの列や行のインデックス、スタイルなどのプロパティが格納されているので、条件に合うセルのみに変更を加えています。
具体的なメソッドやプロパティの使い方は前出のソースコードをご覧ください。

なお、今回はサンプルなので列幅やヘッダ名の変更を敢えてここで行っています。formatItem イベントは頻繁に呼ばれるため、現実的には FlexGrid に Column を割り当てる際に設定するのがよいと思います。

Column の列幅やヘッダ名の設定については、下記の記事をご覧ください。

ASP.NET MVC で Wijmo を使う – 2

【通常セルのスタイル変更・値変更】

こちらはセルの設定です。formatItemCell() に処理を定義し、列ヘッダ同様、SampleInit() 内で formatItem に追加しています。
下記のカスタマイズを行いました。

  • 奇数行の文字色を青くする
  • 偶数行の下側罫線を黒く太くする
  • 2 列ごとに罫線を赤く太くする
  • 3 列ごとにイタリック太文字にする
  • 1 列目の値を書き換えて、右寄せにする

基本は列ヘッダと同じですが、注意点として、上記の処理だけだとスクロールすると装飾の表示が乱れます。
そこでイベントの冒頭で変更するスタイルを一旦全てリセットして、確実に対象のセルのみ変更されるようにしています。

Excel 出力

ExcelSample.js を変更したら Excel 出力して、カスタマイズが Excel に反映されているかを確認してみます。
実行してグリッドがブラウザに表示されたら「Excel 出力」ボタンを押してください。
もし出力した Excel に何も変化がない場合は、Ctrl+F5 でブラウザをリロードしてみてください。また、かなり待ってもダウンロードされない場合は、エラーで止まっている可能性があるので、ブラウザの開発者ツール(F12 キー)でエラーが出ていないか確認してください。

セルの装飾や値の変更がブラウザ画面と同じように出力されていれば、今回の作業は完了となります。

注:ブラウザのズーム倍率を 100% 未満にすると、罫線が太く出力される場合がありますのでご注意ください。

おわりに

今回は FlexGrid 上でのセルスタイル(背景色や罫線など)や値のカスタマイズを中心に説明し、それらが Excel に反映されていることを確認しました。

割と使いそうなカスタマイズを盛り込んだので、メソッドやプロパティの使い方が参考になれば幸いです。

<これまでの記事>
ASP.NET MVC で Wijmo を使う – 1(開発環境の準備と基本的なグリッドの作成)
ASP.NET MVC で Wijmo を使う – 2(行やセルのカスタマイズ方法)
ASP.NET MVC で Wijmo を使う – 3(1万行のデータ表示とパフォーマンス)
ASP.NET MVC で Wijmo を使う – 4(マルチグリッドの表示とデータ同期)
ASP.NET MVC で Wijmo を使う – 5(Excel ファイルへの出力)
ASP.NET MVC で Wijmo を使う – 6(出力 Excel ファイルのカスタマイズ)

関連記事

  1. Beaconアプリ開発記【その4 画面表示編】

  2. BLE通信の基礎 – アプリ開発 – 活用例コ…

  3. 観光施設をガイドする音声アプリ「eGuide」で密集・密接せずに旅行を…

  4. 知識ゼロで Unity をはじめてみた【その5 -Android 端末…

  5. BLEAD-TSHで遊ぼう!【作例集 筋トレカウンター編】

  6. 電波の届く範囲内だけコンテンツの閲覧を可能に