Help us understand the problem. What is going on with this article?

[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
}
usomaru
開発歴4年目まだまだ新米プログラマー。主にAngular、.Netで開発。趣味でpythonを少々。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした