wjFlexGridCellTemplate ディレクティブは、FlexGrid 内の特定のセルタイプに 使用されるテンプレートを定義します。 これは、 <template> 要素に定義され、wijmo.angular2.grid.CellTemplateType を指定する cellType 属性が含まれる必要があります。テンプレートのセルタイプに応じて、 wjFlexGridCellTemplate ディレクティブを含むtemplate要素は、 wijmo.angular2.grid.WjFlexGridまたは wijmo.angular2.grid.WjFlexGridColumn ディレクティブのいずれかの子である必要があります。 列固有のセルテンプレートは wj-flex-grid-column コンポーネントに含まれる必要があり、 列固有でないセル（行ヘッダーや左上のセルなど）は wj-flex-grid コンポーネントに含まれる必要があります。

wjFlexGridCellTemplateディレクティブを含む <template> 要素には、 Angular 2内挿式および他のコンポーネント/ディレクティブを含む 任意のHTMLフラグメントを含めることができます。

HTMLフラグメント内の連結では、セルコンテキストオブジェクトを含む cell ローカルテンプレート変数を、 そのセルに関連する Column、Row、および Row.dataItem オブジェクトを参照する col、row、およびitemプロパティと共に使用できます。 Group や CellEdit などのセルタイプには、 書式設定されていないセル値を含む value プロパティが別途用意されています。 たとえば、次の FlexGrid コントロールでは、 行ヘッダー用、Country列の通常のセル用、 およびその列ヘッダーセル用にテンプレートが使用されています。

import * as wjGrid from 'wijmo/wijmo.angular2.grid';
 
@Component({
    directives: [wjGrid.WjFlexGrid, wjGrid.WjFlexGridColumn, wjGrid.WjFlexGridCellTemplate],
    template: `
<wj-flex-grid [itemsSource]="data">
  <template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {​{cell.row.index}}
  </template>
  <template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    ...
  </template>
 
  <wj-flex-grid-column [header]="'Country'" [binding]="'country'">
    <template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
      <img src="resources/globe.png" />
        {​{cell.col.header}}
    </template>
    <template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
      <img src="resources/{​{cell.item.country}}.png" />
      {​{cell.item.country}}
    </template>
  </wj-flex-grid-column>
  <wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"></wj-flex-grid-column>
</wj-flex-grid>
`,
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

特定のセルタイプテンプレートの詳細については、 wijmo.angular2.grid.CellTemplateType 列挙のドキュメントを参照してください。

wjFlexGridCellTemplate ディレクティブは、次の属性をサポートします。

cellType

テンプレートが適用されるセルのタイプを定義する CellTemplateType値。

cellOverflow

セルの style.overflow プロパティ値を定義します。

cellType 属性は、次の列挙値のいずれかを取ります。

Cell

通常の（データ）セルテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 たとえば、次のセルテンプレートはCountry列のセルのフラグを示します。

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell">
    <img src="resources/{​{cell.item.country}}.png" />
    {​{cell.item.country}}
  </template>
</wj-flex-grid-column>

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

CellEdit

編集モードのセルのテンプレートを定義します。wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる cell.value プロパティを別途持ちます。 また、 編集前の元のセル値と編集後の更新値を持ちます。 たとえば、Wijmo InputNumber コントロールを"Sales"列のエディタとして使用するテンプレートを次に示します。

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'">
  <template wjFlexGridCellTemplate [cellType]="'CellEdit'">
    <wj-input-number [(value)]="cell.value" [step]="1"></wj-input-number>
  </template>
</wj-flex-grid-column>

ColumnHeader

列ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 たとえば、次のテンプレートは"Country"列のヘッダーに画像を追加します。

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
    <img src="resources/globe.png" />
      {​{cell.col.header}}
  </template>
</wj-flex-grid-column>

RowHeader

行ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートは行ヘッダーに行インデックスを表示します。

<wj-flex-grid [itemsSource]="data">
  <template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {​{cell.row.index + 1}}
  </template>
</wj-flex-grid>

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

RowHeaderEdit

編集モードの行ヘッダーセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートは編集中の行のヘッダーにドットを表示します。

<wj-flex-grid [itemsSource]="data">
  <template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    ...
  </template>
</wj-flex-grid>

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

<wj-flex-grid [itemsSource]="data">
  <template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'">
    {​{&#x270e;}}
  </template>
</wj-flex-grid>

TopLeft

左上のセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGrid コンポーネントの子である必要があります。 たとえば、次のテンプレートはグリッドの左上のセルに右下三角グリフを表示します。

<wj-flex-grid [itemsSource]="data">
  <template wjFlexGridCellTemplate [cellType]="'TopLeft'">
    <span class="wj-glyph-down-right"></span>
  </template>
</wj-flex-grid>

GroupHeader

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

cell.row プロパティには、 GroupRow クラスのインスタンスが含まれます。グループ化が CollectionView で行われる場合、cell.item プロパティは CollectionViewGroup オブジェクトを参照します。

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

<wj-flex-grid-column [header]="'Country'" [binding]="'country'">
  <template wjFlexGridCellTemplate [cellType]="'GroupHeader'" let-cell="cell">
    <input type="checkbox" [(ngModel)]="cell.row.isCollapsed"/>
    {​{cell.item.name}} ({​{cell.item.items.length}} items)
  </template>
</wj-flex-grid-column>

Group

GroupRow 内にある通常のセル（グループヘッダーでない）のテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる cell.value プロパティを別途持ちます。 列に aggregate プロパティが指定されている場合、 その列には書式設定されていない集計値が含まれます。 たとえば、次のテンプレートは"Sales"列に集計値とグループ行セルの種類を表示します。

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'">
  <template wjFlexGridCellTemplate [cellType]="'Group'" let-cell="cell">
    Average: {​{cell.value | number:'1.0-0'}}
  </template>
</wj-flex-grid-column>

ColumnFooter

columnFooters パネル内にある通常のセルのテンプレートを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このセルタイプは、連結に利用できる、セル値を含む cell.value プロパティを別途持ちます。

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

<wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'">
  <template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell">
    Average: {​{cell.value | number:'1.0-0'}}
  </template>
</wj-flex-grid-column>

BottomLeft

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

<wj-flex-grid [itemsSource]="data">
  <template wjFlexGridCellTemplate [cellType]="'BottomLeft'">
    &#931;
  </template>
</wj-flex-grid>

NewCellTemplate

新しい行テンプレートのセルを定義します。 wijmo.angular2.grid.WjFlexGridColumn コンポーネントの子である必要があります。 このタイプのセルに cell.item プロパティは定義されません。 たとえば、次のセルテンプレートは「新しい行」項目のDate列セルにプレースホルダを表示します。

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