WjFlexGridCellTemplate Class

The wj-flex-grid-cell-template directive defines a template for a certain cell type in FlexGrid, and must contain a cell-type attribute that specifies the CellTemplateType. Depending on the template's cell type, the wj-flex-grid-cell-template directive must be a child of either wijmo.angular.grid.WjFlexGrid or wijmo.angular.grid.WjFlexGridColumn directives.

Column-specific cell templates must be contained in wj-flex-grid-column directives, and cells that are not column-specific (like row header or top left cells) must be contained in the wj-flex-grid directive.

In addition to an HTML fragment, wj-flex-grid-cell-template directives may contain an ng-style or ng-class attribute that provides conditional formatting for cells.

Both the ng-style/ng-class attributes and the HTML fragment can use the $col, $row and $item template variables that refer to the Column, Row and Row.dataItem objects pertaining to the cell.

For cell types like Group and CellEdit, an additional $value variable containing an unformatted cell value is provided. For example, here is a FlexGrid control with templates for row headers and for the Country column's regular and column header cells:

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeader">
    {​{$row.index}}
  </wj-flex-grid-cell-template>
  <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
    ...
  </wj-flex-grid-cell-template>
 
  <wj-flex-grid-column header="Country" binding="country">
    <wj-flex-grid-cell-template cell-type="ColumnHeader">
      <img ng-src="resources/globe.png" />
        {​{$col.header}}
      </wj-flex-grid-cell-template>
      <wj-flex-grid-cell-template cell-type="Cell">
        <img ng-src="resources/{​{$item.country}}.png" />
        {​{$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>

For more detailed information on specific cell type templates refer to the documentation for the CellTemplateType enumeration.

Note that the wj-flex-grid-column directive may also contain arbitrary content that is treated as a template for a regular data cell (cell-type="Cell"). But if a wj-flex-grid-cell-template directive exists and is set to cell-type="Cell" under the wj-flex-grid-column directive, it takes priority and overrides the arbitrary content.

The wj-flex-grid-cell-template directive supports the following attributes:

cell-type

@ The CellTemplateType value defining the type of cell the template applies to.

auto-size-rows

@ Indicates whether the cell template will increase grid's default row height to accommodate cells content. Defaults to true.

cell-overflow

@ Defines the style.overflow property value for cells.

force-full-edit

@ For cell edit templates, indicates whether cell editing forcibly starts in full edit mode, regardless of how the editing was initiated. In full edit mode pressing cursor keys don't finish editing. Defaults to true.

The cell-type attribute takes any of the following enumerated values:

Cell

Defines a regular (data) cell template. Must be a child of the wijmo.angular.grid.WjFlexGridColumn directive. For example, this cell template shows flags in the Country column's cells:

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cell-type="Cell">
    <img ng-src="resources/{​{$item.country}}.png" />
    {​{$item.country}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

For a hierarchical FlexGrid (that is, one with the childItemsPath property specified), if no Group template is provided, non-header cells in group rows in this Column also use this template.

CellEdit

Defines a template for a cell in edit mode. Must be a child of the wijmo.angular.grid.WjFlexGridColumn directive. This cell type has an additional $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">
  <wj-flex-grid-cell-template cell-type="CellEdit">
    <wj-input-number value="$value" step="1"></wj-input-number>
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnHeader

Defines a template for a column header cell. Must be a child of the wijmo.angular.grid.WjFlexGridColumn directive. For example, this template adds an image to the header of the "Country" column:

<wj-flex-grid-column header="Country" binding="country">
  <wj-flex-grid-cell-template cell-type="ColumnHeader">
    <img ng-src="resources/globe.png" />
    {​{$col.header}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

RowHeader

Defines a template for a row header cell. Must be a child of the wijmo.angular.grid.WjFlexGrid directive. For example, this template shows row indices in the row headers:

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeader">
    {​{$row.index}}
  </wj-flex-grid-cell-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 wijmo.angular.grid.WjFlexGrid directive. For example, this template shows dots in the header of rows being edited:

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
      ...
  </wj-flex-grid-cell-template>
</wj-flex-grid>

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

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="RowHeaderEdit">
    {​{&#x270e;}}
  </wj-flex-grid-cell-template>
</wj-flex-grid>

TopLeft

Defines a template for the top left cell. Must be a child of the wijmo.angular.grid.WjFlexGrid directive. For example, this template shows a down/right glyph in the top-left cell of the grid:

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="TopLeft">
    <span class="wj-glyph-down-right"></span>
  </wj-flex-grid-cell-template>
</wj-flex-grid>

GroupHeader

Defines a template for a group header cell in a GroupRow, Must be a child of the wijmo.angular.grid.WjFlexGridColumn directive.

The $row variable contains an instance of the GroupRow class. If the grouping comes from the a CollectionView, the $item variable 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">
  <wj-flex-grid-cell-template cell-type="GroupHeader">
    <input type="checkbox" ng-model="$row.isCollapsed"/>
    {​{$item.name}} ({​{$item.items.length}} items)
  </wj-flex-grid-cell-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 wijmo.angular.grid.WjFlexGridColumn directive. This cell type has an additional $value varible available for binding. In cases where columns have the aggregate property specified, it contains the unformatted aggregate value.

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

<wj-flex-grid-column header="Sales" binding="sales" aggregate="Avg">
  <wj-flex-grid-cell-template cell-type="Group">
    Average: {​{$value | number:2}}
  </wj-flex-grid-cell-template>
</wj-flex-grid-column>

ColumnFooter

Defines a template for a regular cell in a columnFooters panel. Must be a child of the wijmo.angular.grid.WjFlexGridColumn directive. This cell type has an additional $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">
  <wj-flex-grid-cell-template cell-type="ColumnFooter">
    Average: {​{$value | number:2}}
  </wj-flex-grid-cell-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 wijmo.angular.grid.WjFlexGrid directive. For example, this template shows a sigma glyph in the bottom-left cell of the grid:

<wj-flex-grid items-source="data">
  <wj-flex-grid-cell-template cell-type="BottomLeft">
   &#931;
  </wj-flex-grid-cell-template>
</wj-flex-grid>