The wjMultiRowCellTemplate directive defines a template for a certain cell type in MultiRow. The template should be defined on a <ng-template> element and must contain a cellType attribute that specifies the {@link wijmo.angular2.grid.CellTemplateType}. Depending on the template's cell type, the <ng-template> element with the wjMultiRowCellTemplate directive must be a child of either wijmo.angular2.grid.multirow.WjMultiRow or wijmo.angular2.grid.multirow.WjMultiRowCell components.

Column-specific cell templates must be contained in wj-multi-row-cell components, and cells that are not column-specific (like row header or top left cells) must be contained in the wj-multi-row component.

The <ng-template> element with the wjMultiRowCellTemplate directive may contain an arbitrary HTML fragment with Angular 2 interpolation expressions and other components and directives.

Bindings in HTML fragment can use the cell local template variable containing the cell context object, with col, row, and item properties that refer to the MultiRowCell, Row, and Row.dataItem objects pertaining to the cell.

For cell types like Group and CellEdit, an additional value property containing an unformatted cell value is provided. For example, here is a MultiRow control with templates for row header cells and, regular and column header cells of the Country column:

// 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>

The cellType attribute takes any of the following enumerated values:

Cell

Defines a regular (data) cell template. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRowCell component. For example, this cell template shows flags in the cells of Country column:

<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

Defines a template for a cell in edit mode. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRowCell component. This cell type has an additional cell.value property available for binding. It contains the original cell value before editing, and the updated value after editing.

For example, here is a template that uses the Wijmo InputNumber control as an editor for the "Sales" column:

<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

Defines a template for a column header cell. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRowCell component. For example, this template adds an image to the header of the "Country" column:

<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

Defines a template for a row header cell. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRow component. For example, this template shows row indices in the row headers:

<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>

Note that this template is applied to a row header cell, even if it is in a row that is in edit mode. In order to provide an edit-mode version of a row header cell with alternate content, define the RowHeaderEdit template.

RowHeaderEdit

Defines a template for a row header cell in edit mode. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRow component. For example, this template shows dots in the header of rows being edited:

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

Use the following RowHeaderEdit template to add the standard edit-mode indicator to cells where the RowHeader template applies:

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

TopLeft

Defines a template for the top left cell. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRow component. For example, this template shows a down/right glyph in the top-left cell of the grid:

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

GroupHeader

Defines a template for a group header cell in a GroupRow. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRowCell component.

The cell.row property contains an instance of the GroupRow class. If the grouping comes from CollectionView, the cell.item property references the CollectionViewGroup object.

For example, this template uses a checkbox element as an expand/collapse toggle:

<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

Defines a template for a regular cell (not a group header) in a GroupRow. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRowCell component. This cell type has an additional cell.value property available for binding. In cases where columns have the aggregate property specified, it contains the unformatted aggregate value.

For example, this template shows aggregate's value and kind for group row cells in the "Sales" column:

<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

Defines a cell in a new row template. Must be a child of the wijmo.angular2.grid.multirow.WjMultiRowCell component. Note that the cell.item property is undefined for this type of a cell. For example, this cell template shows a placeholder in the Date column's cell in the "new row" item:

<wj-multi-row-cell [header]="'Date'" [binding]="'date'">
  <ng-template wjMultiRowCellTemplate [cellType]="'NewCellTemplate'">
    Enter a date here
  </ng-template>
</wj-multi-row-cell>