wj-flex-grid コンポーネントには、子コンポーネントの wijmo.vue2.grid.detail.WjFlexGridDetail 、 wijmo.vue2.grid.filter.WjFlexGridFilter 、 wijmo.vue2.grid.WjFlexGridColumn 、 wijmo.vue2.grid.WjFlexGridColumnGroup および wijmo.vue2.grid.WjFlexGridCellTemplate が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.grid.FlexGrid クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、マークアップでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

以下の例は、Vueマークアップでwijmo.grid.FlexGridコントロールをインスタンス化および初期化する方法を示しています。

<wj-flex-grid
  :items-source="data">
  <wj-flex-grid-column binding="name" header="Name">
  </wj-flex-grid-column>
  <wj-flex-grid-column binding="sales" header="Sales" format="c0">
  </wj-flex-grid-column>
  <wj-flex-grid-column binding="expenses" header="Expenses" format="c0">
  </wj-flex-grid-column>
  <wj-flex-grid-column binding="active" header="Active">
  </wj-flex-grid-column>
  <wj-flex-grid-column binding="date" header="Date">
  </wj-flex-grid-column>
</wj-flex-grid>

このコードは、itemsSourceプロパティをグリッドデータを含むコレクションに設定し、 wj-flex-grid-columnコンポーネントを使用して表示する列を指定します。

wj-flex-grid-cell-template コンポーネントはFlexGrid の特定のセルタイプ用のテンプレートを定義します。 テンプレートの要素には、{@link wijmo.vue2.grid.CellTemplateType} を指定するcellType 属性 を含める必要があります。 テンプレートのセル型に応じて、 wj-flex-grid-cell-template ディレクティブは wijmo.vue2.grid.WjFlexGrid または wijmo.vue2.grid.WjFlexGridColumn ディレクティブの子にする必要があります。

列固有のセルテンプレートは wj-flex-grid-column ディレクティブに含める必要があり、 列固有でないセル（行ヘッダセルや左上セルなど）のテンプレートは wj-flex-grid ディレクティブに含める必要があります。

wj-flex-grid-cell-template 要素には、Vue補間式およびその他のコンポーネントとディレクティブを含む任意のHTMLフラグメントを含めることができます。

HTMLフラグメントのバインディングでは、セル固有のデータを格納するスコープ付きスロットプロパティを使用できます。 プロパティは col、 row、itemであり、 そのセルに関係するRow オブジェクト、 Row.dataItem オブジェクトを参照します。

Group や CellEditなどのセル型では、書式設定されていないセル値を含む value変数も提供されます。 スロットプロパティを参照するには、wj-flex-grid-cell-template要素での新しいv-slotディレクティブを使用するか（Vue 2.6.0ijouで使用可能）、またはwj-flex-grid-cell-templateにネストされている<template>要素での古いslot-scopeディレクティブを使用できます。

たとえば、以下のFlexGridコントロールには行ヘッダ用のテンプレートと Country列の通常セルおよび列ヘッダセル用のテンプレートが設定されています。

<!-- component.html -->
<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeader" v-slot="cell">
{{cell.row.index}}
  </wj-flex-grid-cell-template>
  <wj-flex-grid-cell-template cellType="RowHeaderEdit">
    ...
  </wj-flex-grid-cell-template>

  <wj-flex-grid-column header="Country" binding="country">
<wj-flex-grid-cell-template cellType="ColumnHeader" v-slot="cell">
  <img src="resources/globe.png" />
{{cell.col.header}}
</wj-flex-grid-cell-template>
<wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
  <img :src="'resources/' + cell.item.country + '.png'" />
  {{cell.item.country}}
</wj-flex-grid-cell-template>
  </wj-flex-grid-column>
  <wj-flex-grid-column header="Sales" binding="sales"></wj-flex-grid-column>
</wj-flex-grid>

 <b>wj-flex-grid-cell-template</b> ディレクティブは以下の属性をサポートしています。

<dl class="dl-horizontal">
  <dt>cellType</dt>
  <dd>
    テンプレートを適用するセル型を定義する <b>CellTemplateType</b> 値。
  </dd>
  <dt>autoSizeRows</dt>
  <dd>
   セルテンプレートがセルのコンテンツに合わせてグリッドのデフォルトの行の高さを増やすかどうかを示します。 デフォルトはtrueです。
  </dd>
  <dt>cellOverflow</dt>
  <dd>
    セルの <b>style.overflow</b> プロパティの値を定義します。
  </dd>
  <dt>forceFullEdit</dt>
  <dd>
セル編集テンプレートでは、編集がどのように開始されたかにかかわらず、 セル編集が完全編集モードで強制的に開始するかどうかを示します。 
完全編集モードでは、カーソルキーを押しても編集が終了しません。 デフォルトはtrueです。

  </dd>
</dl>

<b>cellType</b>> 属性には以下のいずれかの列挙値を指定します。

<b>Cell</b>

通常の（データ）セル用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGridColumn ディレクティブの子にする必要があります。 
たとえば、以下のセルテンプレートはCountry列のセルに国旗を表示します。

```html
<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cellType="Cell" v-slot="cell">
<img :src="'resources/' + cell.item.country + '.png'" />
{{cell.item.country}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

階層的な FlexGrid （すなわち、childItemsPath プロパティ が指定されているグリッド）では、 Group テンプレートが提供されていない場合、 この Column のグループ行に含まれるヘッダ以外のセルにもこのテンプレートが適用されます。

CellEdit

編集モードのセル用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGridColumn ディレクティブの子にする必要があります。 このセル型では、追加の value プロパティを使用できます。 このプロパティには編集前のセル値が格納され、編集後は値が更新されます。 たとえば、 以下のテンプレートは"Sales"列のエディタとしてWijmo InputNumber コントロールを使用します。

<wj-flex-grid-column header="Sales" binding="sales">
  <wj-flex-grid-cell-template cellType="CellEdit">
<wj-input-number v-model="cell.value" :step="1"></wj-input-number>
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

バインディングの sync 修飾子を使用して双方向バインディングを指定することもできます。

<wj-flex-grid-column header="Sales" binding="sales">
  <wj-flex-grid-cell-template cellType="CellEdit">
    <wj-input-number value.sync="cell.value" :step="1"></wj-input-number>
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnHeader

列ヘッダセル用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGridColumn ディレクティブの子にする必要があります。 たとえば、以下のテンプレートは"Country"列のヘッダに画像を追加します。

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cellType="ColumnHeader" v-slot="cell">
    <img src="resources/globe.png" />
    {{cell.col.header}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

RowHeader

行ヘッダセル用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGrid ディレクティブの子にする必要があります。 たとえば、以下のテンプレートは行ヘッダに行インデックスを表示します。

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeader" v-slot="cell">
    {{cell.row.index + 1}}
  </wj-flex-grid-cell-template>
</wj-flex-grid>

このテンプレートは、編集モードにある行の行ヘッダセルにも適用されます。 編集モードの行ヘッダセルに別のコンテンツを提供するには、 RowHeaderEdit テンプレートを定義します。

RowHeaderEdit

編集モードの行ヘッダセル用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGrid ディレクティブの子にする必要があります。 たとえば、 以下のテンプレートは編集中の行のヘッダに点を表示します。

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeaderEdit">
    ...
  </wj-flex-grid-cell-template>
</wj-flex-grid>

RowHeader テンプレートを適用するセルに標準の編集モードインジケーターを追加するには、 以下の RowHeaderEdit テンプレートを使用します。

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="RowHeaderEdit">
    &#x270e;&#xfe0e;
  </wj-flex-grid-cell-template>
</wj-flex-grid>

TopLeft

左上セル用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGrid コンポーネントの子にする必要があります。 たとえば、 以下のテンプレートはグリッドの左上セルに右下向きの矢印を表示します。

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="TopLeft">
    <span class="wj-glyph-down-right"></span>
  </wj-flex-grid-cell-template>
</wj-flex-grid>

GroupHeader

GroupRow のグループヘッダセル用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGridColumn コンポーネントの子にする必要があります。

row 変数には、 GroupRow クラスのインスタンスが格納されます。 グループ化が CollectionView に由来する場合、 item 変数は CollectionViewGroup オブジェクトを参照します。

たとえば、以下のテンプレートは展開/折りたたみ状態を切り替えるためにチェックボックス要素を使用します。

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cellType="GroupHeader" v-slot="cell">
    <input type="checkbox" v-model="cell.row.isCollapsed"/>
    {{cell.item.name}} ({{cell.item.items.length}} items)
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

Group

GroupRow の通常のセル（グループヘッダ以外のセル）用のテンプレートを定義します。 wijmo.vue2.grid.WjFlexGridColumn コンポーネントの子にする必要があります。このセルタイプでは、追加の value 変数を使用できます。 列に aggregate プロパティが指定されている場合、 value変数には書式設定されていない集計値が格納されます。

たとえば、以下のテンプレートは"Sales"列のグループ行のセルに集計値と集計の種類を表示します。

<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
  <wj-flex-grid-cell-template cellType="Group" v-slot="cell">
    Average: {{formatNumber(cell.value, 'N0')}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnFooter

columnFooters パネル内の通常のセルのテンプレートを定義します。 wijmo.vue2.grid.WjFlexGridColumn コンポーネント の子にする必要があります。 このセルタイプでは、セル値を含むバインディン用に追加の value プロパティを使用できます。

たとえば、以下のテンプレートは"Sales"列のフッターのセルに集計値と集計の種類を表示します。

<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
  <wj-flex-grid-cell-template cellType="ColumnFooter" v-slot="cell">
    Average: {{formatNumber(cell.value, 'N0')}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

BottomLeft

左下のセルのテンプレートを定義します（行ヘッダーと列フッターが交差する位置にあるセル）。 wijmo.vue2.grid.WjFlexGrid コンポーネントの子にする必要があります。 たとえば、このテンプレートは、グリッドの左下のセルにシグマの矢印を表示します。

<wj-flex-grid :itemsSource="data">
  <wj-flex-grid-cell-template cellType="BottomLeft">
    &#931;
  </wj-flex-grid-cell-template>
</wj-flex-grid>

NewCellTemplate

新しい行テンプレートのセルを定義します。 wijmo.vue2.grid.WjFlexGridColumn コンポーネントの子にする必要があります。 このセル型では、 cell.item プロパティはundefinedです。 たとえば、次のセルテンプレートは、「new row」項目の日付列のセルに対してプレースホルダーを示しています。

<wj-flex-grid-column header="'Date'" binding="'date'">
  <wj-flex-grid-cell-template cellType="NewCellTemplate">
    ここに日付を入力してください
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

wj-flex-grid-column コンポーネントは、 wijmo.vue2.grid.WjFlexGrid コンポーネントに含まれる必要があります。

wj-flex-grid-column コンポーネントには、子コンポーネントの wijmo.vue2.grid.WjFlexGridCellTemplate が含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.grid.Column クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、マークアップでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。

wj-flex-grid-column-group コンポーネントは、 wijmo.vue2.grid.WjFlexGrid または wijmo.vue2.grid.WjFlexGridColumnGroup のいずれかに含まれる必要があります。

wj-flex-grid-column-group コンポーネントには、子コンポーネントのwijmo.vue2.grid.WjFlexGridColumnGroupおよびwijmo.vue2.grid.WjFlexGridCellTemplateが含まれる場合があります。

本コンポーネントでは、純粋なJavaScript wijmo.grid.ColumnGroup クラスのすべてのプロパティとイベントがサポートされます。

これには、コントロールがページに追加された後で初期化されるときに発生するinitializedイベントが含まれます。 このイベントを使用し、JSXでプロパティを設定するだけでなく、さらに初期化を実行できます。 ハンドラー関数のシグネチャは、他のWijmoイベントハンドラーと同じです。