Angular 2 directive for the FlexGrid cell templates.
The wjFlexGridCellTemplate directive defines a template for a certain
cell type in FlexGrid. The template should be defined on a <template> element
and must contain a cellType attribute that
specifies the CellTemplateType. Depending on the template's cell type,
the <template> element with the wjFlexGridCellTemplate directive must be a child
of either WjFlexGrid
or WjFlexGridColumn directives.
Column-specific cell templates must be contained in wj-flex-grid-column
components, and cells that are not column-specific (like row header or top left cells)
must be contained in the wj-flex-grid component.
The <template> element with the wjFlexGridCellTemplate 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 Column,
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
FlexGrid control with templates for row header cells and, regular
and column header cells of the Country column:
For more detailed information on specific cell type templates, refer to the
documentation for CellTemplateType enumeration.
The wjFlexGridCellTemplate directive supports the following attributes:
cellType
The CellTemplateType value defining the type of cell to which the template is applied.
cellOverflow
Defines the style.overflow property value for cells.
The cellType attribute takes any of the following enumerated values:
Cell
Defines a regular (data) cell template. Must be a child of the WjFlexGridColumn component.
For example, this cell template shows flags in the cells of Country column:
If Group template is not provided for a hierarchical FlexGrid (that is, one with the childItemsPath property
specified), non-header cells in group rows of
this Column also use this template.
CellEdit
Defines a template for a cell in edit mode. Must be a child of the WjFlexGridColumn 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:
Defines a template for a column header cell. Must be a child of the WjFlexGridColumn component.
For example, this template adds an image to the header of the "Country" column:
Defines a template for a row header cell. Must be a child of the WjFlexGrid component.
For example, this template shows row indices in the row headers:
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
WjFlexGrid component. For example, this template shows dots in the header
of rows being edited:
Defines a template for the top left cell. Must be a child of the WjFlexGrid component.
For example, this template shows a down/right glyph in the top-left cell of the grid:
Defines a template for a group header cell in a GroupRow, Must be a child of the WjFlexGridColumn 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:
Defines a template for a regular cell (not a group header) in a GroupRow. Must be a child of the
WjFlexGridColumn 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:
Defines a template for a regular cell in a columnFooters panel. Must be a child of the
WjFlexGridColumn component. This cell type has an additional cell.value
property available for binding that contains a cell value.
For example, this template shows aggregate's value and kind for a footer cell in the "Sales"
column:
Defines a template for the bottom left cells (at the intersection of the row header and column footer cells).
Must be a child of the WjFlexGrid component.
For example, this template shows a sigma glyph in the bottom-left cell of the grid:
Defines a cell in a new row template. Must be a child of the WjFlexGridColumn 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-flex-grid-column [header]="'Date'" [binding]="'date'">
<template wjFlexGridCellTemplate [cellType]="'NewCellTemplate'">
Enter a date here
</template>
</wj-flex-grid-column>
Angular 2 directive for the FlexGrid cell templates.
The wjFlexGridCellTemplate directive defines a template for a certain cell type in FlexGrid. The template should be defined on a <template> element and must contain a cellType attribute that specifies the CellTemplateType. Depending on the template's cell type, the <template> element with the wjFlexGridCellTemplate directive must be a child of either WjFlexGrid or WjFlexGridColumn directives.
Column-specific cell templates must be contained in wj-flex-grid-column components, and cells that are not column-specific (like row header or top left cells) must be contained in the wj-flex-grid component.
The <template> element with the wjFlexGridCellTemplate 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 Column, 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 FlexGrid control with templates for row header cells and, regular and column header cells of the Country column:
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[]; }For more detailed information on specific cell type templates, refer to the documentation for CellTemplateType enumeration.
The wjFlexGridCellTemplate directive supports the following attributes:
The cellType attribute takes any of the following enumerated values:
Cell
Defines a regular (data) cell template. Must be a child of the WjFlexGridColumn component. For example, this cell template shows flags in the cells of Country column:
<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>If Group template is not provided for a hierarchical FlexGrid (that is, one with the childItemsPath property specified), non-header cells in group rows of this Column also use this template.
CellEdit
Defines a template for a cell in edit mode. Must be a child of the WjFlexGridColumn 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-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
Defines a template for a column header cell. Must be a child of the WjFlexGridColumn component. For example, this template adds an image to the header of the "Country" column:
<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
Defines a template for a row header cell. Must be a child of the WjFlexGrid component. For example, this template shows row indices in the row headers:
<wj-flex-grid [itemsSource]="data"> <template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell"> {{cell.row.index + 1}} </template> </wj-flex-grid>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 WjFlexGrid component. For example, this template shows dots in the header of rows being edited:
<wj-flex-grid [itemsSource]="data"> <template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'"> ... </template> </wj-flex-grid>Use the following RowHeaderEdit template to add the standard edit-mode indicator to cells where the RowHeader template applies:
<wj-flex-grid [itemsSource]="data"> <template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'"> {{✎}} </template> </wj-flex-grid>TopLeft
Defines a template for the top left cell. Must be a child of the WjFlexGrid component. For example, this template shows a down/right glyph in the top-left cell of the grid:
<wj-flex-grid [itemsSource]="data"> <template wjFlexGridCellTemplate [cellType]="'TopLeft'"> <span class="wj-glyph-down-right"></span> </template> </wj-flex-grid>GroupHeader
Defines a template for a group header cell in a GroupRow, Must be a child of the WjFlexGridColumn 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-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
Defines a template for a regular cell (not a group header) in a GroupRow. Must be a child of the WjFlexGridColumn 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-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
Defines a template for a regular cell in a columnFooters panel. Must be a child of the WjFlexGridColumn component. This cell type has an additional cell.value property available for binding that contains a cell value.
For example, this template shows aggregate's value and kind for a footer cell in the "Sales" column:
<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
Defines a template for the bottom left cells (at the intersection of the row header and column footer cells). Must be a child of the WjFlexGrid component. For example, this template shows a sigma glyph in the bottom-left cell of the grid:
<wj-flex-grid [itemsSource]="data"> <template wjFlexGridCellTemplate [cellType]="'BottomLeft'"> Σ </template> </wj-flex-grid>NewCellTemplate
Defines a cell in a new row template. Must be a child of the WjFlexGridColumn 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-flex-grid-column [header]="'Date'" [binding]="'date'"> <template wjFlexGridCellTemplate [cellType]="'NewCellTemplate'"> Enter a date here </template> </wj-flex-grid-column>