[wijmo] flexgridで列ヘッダを非表示とレイアウト変更

はじめに

完全に備忘録。wijmoのflexgridを使うことが多いのですが、いつもレイアウトでつまるわりに、検索してもあまりいい記事がないので。(wijmo5 & Angular8を使ってます。)

列ヘッダ非表示

<wj-flex-grid #grid [itemsSource]="data" [headersVisibility]="'None'">
  <wj-flex-grid-column  binding="hoge" [width]="30"></wj-flex-grid-column>
</wj-flex-grid>

headersVisivilityプロパティをNoneにするだけ。
HeadersVisibility 列挙型
もっと「wijmo flexgrid 列ヘッダ非表示」でひっかかってほしい…

レイアウト変更

ヘッダーだけ文字を中央よせにしたいとか、gridの罫線を消したいとかいうとき。
htmlに[itemFormatter]をかくのは共通。

<wj-flex-grid #grid [itemsSource]="data" [itemFormatter]="itemFormatter">
  <wj-flex-grid-column  binding="hoge" [width]="30"></wj-flex-grid-column>
</wj-flex-grid>

ヘッダー文字中央寄せ

import { WjFlexGrid } from '@grapecity/wijmo.angular2.grid';

@ViewChild('grid', {static: true}) private grid: WjFlexGrid;
 /** gridヘッダー文字列のみ中央寄せ */
    itemFormatter = (panel, r, c, cell) => {
      if (panel.cellType === this.grid.columnHeaders.cellType) {
        cell.style.textAlign = 'center';
      }
    }

罫線消したい

  /** grid縦罫線削除 */
  itemFormatter = (panel, r, c, cell) => {
    if (panel.cellType === this.grid.cells.cellType) {
      cell.style.borderRight = 'none';
    }
  }

panel.cellTypeで検索したらわりと検索にヒットした。

まとめ

ナレッジベースという質問受付サイトがあるとはいえ、もう少し検索でヒットするとうれしいですね。

追記

グリッドの行幅を大きくしたい！垂直方向で真ん中揃えにしたい！ということがあったので、そちらを追記

グリッドの行幅変更

上のItmeFormatter内に以下を追加したらできた。

this.grid.rows.defaultSize = 50;

セル垂直方向の真ん中揃え

HTML側

<wj-flex-grid #grid [itemsSource]="data" [itemFormatter]="itemFormatter"
  (formatItem)="onFormatItem(theGridFormatItem, $event)">
  <wj-flex-grid-column  binding="hoge" [width]="30"></wj-flex-grid-column>
</wj-flex-grid>

component側

/** grid垂直方向中央寄せ */
  onFormatItem(flexGird, e) {
    const style = e.cell.style;
    style.display = 'flex';
    style.alignItems = 'center'; // vertical alignment
}