wjMultiRowCellTemplate コンポーネントはMultiRow の特定のセル型用のテンプレートを定義します。 テンプレートは、<ng-template>要素で定義する必要があり、{@link wijmo.angular2.grid.CellTemplateType}を指定するcellType属性を含める必要があります。 テンプレートのセル型に応じて、 wjMultiRowCellTemplateディレクティブを持つ<ng-template>要素は、 wijmo.angular2.grid.multirow.WjMultiRowまたはwijmo.angular2.grid.multirow.WjMultiRowCellコンポーネントの子である必要があります。

列固有のセルテンプレートは wj-multi-row-cell コンポーネントに含める必要があり、 列固有でないセル（行ヘッダセルや左上セルなど）のテンプレートは wj-multi-row コンポーネントに含める必要があります。

HTMLフラグメントの連結では、セルに関連するMultiRowCell、{@ link Row}、およびRow.dataItemオブジェクトを参照するcol、row、およびitemプロパティとともに、セルコンテキストオブジェクトを含むcellローカルテンプレート変数を使用できます。 これらのプロパティは、セルに関連するMultiRowCell、Row、およびRow.dataItemオブジェクトを参照します。

GroupやCellEditのようなセル型の場合、書式設定されていないセル値を含む追加のvalueコンテキストプロパティが提供されます。

たとえば、以下は、Country列の行ヘッダーセル、通常および列ヘッダーセルのテンプレートを含むMultiRowコントロールです。

// component.ts
import * as wjMultiRow from '@mescius/wijmo.angular2.grid.multirow';

@Component({
    templateUrl: './component.html',
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}

<!-- component.html -->
<wj-multi-row [itemsSource]="data">
  <ng-template wjMultiRowCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {{cell.row.index}}
  </ng-template>
  <ng-template wjMultiRowCellTemplate [cellType]="'RowHeaderEdit'">
    ...
  </ng-template>

  <wj-multi-row-cell-group header="Statistics">
    <wj-multi-row-cell [header]="'Country'" [binding]="'country'">
      <ng-template wjMultiRowCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
        <img src="resources/globe.png" />
          {{cell.col.header}}
      </ng-template>
      <ng-template wjMultiRowCellTemplate [cellType]="'Cell'" let-cell="cell">
        <img src="resources/{{cell.item.country}}.png" />
        {{cell.item.country}}
      </ng-template>
    </wj-multi-row-cell>
    <wj-multi-row-cell [header]="'Sales'" [binding]="'sales'"></wj-multi-row-cell>
  </wj-multi-row-cell-group>
</wj-multi-row>

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

Cell

通常の（データ）セル用のテンプレートを定義します。 wijmo.angular2.grid.multirow.WjMultiRowCell ディレクティブの子にする必要があります。 たとえば、以下のセルテンプレートでは、[国]列のセルにフラグが表示されます。

<wj-multi-row-cell [header]="'Country'" [binding]="'country'">
  <ng-template wjMultiRowCellTemplate [cellType]="'Cell'" let-cell="cell">
    <img src="resources/{{cell.item.country}}.png" />
    {{cell.item.country}}
  </ng-template>
</wj-multi-row-cell>

CellEdit

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

<wj-multi-row-cell [header]="'Sales'" [binding]="'sales'">
  <ng-template wjMultiRowCellTemplate [cellType]="'CellEdit'">
    <wj-input-number [(value)]="cell.value" [step]="1"></wj-input-number>
  </ng-template>
</wj-multi-row-cell>

ColumnHeader

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

<wj-multi-row-cell [header]="'Country'" [binding]="'country'">
  <ng-template wjMultiRowCellTemplate [cellType]="'ColumnHeader'" let-cell="cell">
    <img src="resources/globe.png" />
    {{cell.col.header}}
  </ng-template>
</wj-multi-row-cell>

RowHeader

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

<wj-multi-row #mr [itemsSource]="data">
  <ng-template wjMultiRowCellTemplate [cellType]="'RowHeader'" let-cell="cell">
    {{cell.row.index / mr.rowsPerItem + 1}}
  </ng-template>
</wj-multi-row>

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

RowHeaderEdit

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

<wj-multi-row [itemsSource]="data">
  <ng-template wjMultiRowCellTemplate [cellType]="'RowHeaderEdit'">
    ...
  </ng-template>
</wj-multi-row>

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

<wj-multi-row [itemsSource]="data">
  <ng-template wjMultiRowCellTemplate [cellType]="'RowHeaderEdit'">
    {{&amp;#x270e;}}
  </ng-template>
</wj-multi-row>

TopLeft

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

<wj-multi-row [itemsSource]="data">
  <ng-template wjMultiRowCellTemplate [cellType]="'TopLeft'">
    <span class="wj-glyph-down-right"></span>
  </ng-template>
</wj-multi-row>

GroupHeader

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

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

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

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

Group

GroupRow の通常のセル（グループヘッダ以外のセル）用のテンプレートを定義します。 wijmo.angular2.grid.multirow.WjMultiRowCell コンポーネントの子にする必要があります。 このセル型には、連結用に追加のcell.valueプロパティがあります。 列に aggregate プロパティが指定されている場合、集計値が格納されます。

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

<wj-multi-row-cell [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'">
  <ng-template wjMultiRowCellTemplate [cellType]="'Group'" let-cell="cell">
    Average: {{cell.value | number:'1.0-0'}}
  </ng-template>
</wj-multi-row-cell>

NewCellTemplate

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

<wj-multi-row-cell [header]="'Date'" [binding]="'date'">
  <ng-template wjMultiRowCellTemplate [cellType]="'NewCellTemplate'">
    ここに日付を入力してください
  </ng-template>
</wj-multi-row-cell>