<div class="header-panel member">
<h2><span class="identifier">WjFlexGridCellTemplate</span> Class</h2>
<dl class="dl-horizontal">
<dt>File</dt><dd class="filename">wijmo.angular2.js</dd>
<dt>Module</dt><dd><a href="topic/wijmo-wijmo.angular2.grid.Module.html"><span class="identifier">wijmo/wijmo.angular2.grid</span></a></dd>
</dl>
<div class="comment"><p>Angular 2 directive for the <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> cell templates.</p>
<p>The <b>wjFlexGridCellTemplate</b> directive defines a template for a certain
cell type in <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a>. The template should be defined on a <b>&lt;template&gt;</b> element
and must contain a <b>cellType</b> attribute that
specifies the <a href="topic/wijmo-wijmo.angular2.grid.CellTemplateType.Enum.html"><span class="identifier">CellTemplateType</span></a>. Depending on the template's cell type,
the <b>&lt;template&gt;</b> element with the <b>wjFlexGridCellTemplate</b> directive must be a child
of either <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGrid.Class.html"><span class="identifier">WjFlexGrid</span></a>
or <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> directives.</p>
<p>Column-specific cell templates must be contained in <b>wj-flex-grid-column</b>
components, and cells that are not column-specific (like row header or top left cells)
must be contained in the <b>wj-flex-grid</b> component.</p>
<p>The <b>&lt;template&gt;</b> element with the <b>wjFlexGridCellTemplate</b> directive
may contain an arbitrary HTML fragment with Angular 2 interpolation expressions and
other components and directives.</p>
<p>Bindings in HTML fragment can use the <b>cell</b> local template variable containing the cell context object, 
with <b>col</b>, <b>row</b>, and <b>item</b> properties that refer to the <a href="topic/wijmo.grid.Column.Class.html"><span class="identifier">Column</span></a>,
<a href="topic/wijmo.grid.Row.Class.html"><span class="identifier">Row</span></a>, and <b>Row.dataItem</b> objects pertaining to the cell.</p>
<p>For cell types like <b>Group</b> and <b>CellEdit</b>, an additional <b>value</b> 
property containing an unformatted cell value is provided. For example, here is a 
<a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> control with templates for row header cells and, regular
and column header cells of the Country column:</p>


<pre>import * as wjGrid from 'wijmo/wijmo.angular2.grid';
&nbsp;
&#64;Component({
    directives: [wjGrid.WjFlexGrid, wjGrid.WjFlexGridColumn, wjGrid.WjFlexGridCellTemplate],
    template: `
&lt;wj-flex-grid [itemsSource]="data"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell"&gt;
    {&#8203;{cell.row.index}}
  &lt;/template&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'"&gt;
    ...
  &lt;/template&gt;
&nbsp;
  &lt;wj-flex-grid-column [header]="'Country'" [binding]="'country'"&gt;
    &lt;template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell"&gt;
      &lt;img src="resources/globe.png" /&gt;
        {&#8203;{cell.col.header}}
    &lt;/template&gt;
    &lt;template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell"&gt;
      &lt;img src="resources/{&#8203;{cell.item.country}}.png" /&gt;
      {&#8203;{cell.item.country}}
    &lt;/template&gt;
  &lt;/wj-flex-grid-column&gt;
  &lt;wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"&gt;&lt;/wj-flex-grid-column&gt;
&lt;/wj-flex-grid&gt;
`,
    selector: 'my-cmp',
})
export class MyCmp {
    data: any[];
}</pre>
<p>For more detailed information on specific cell type templates, refer to the 
documentation for <a href="topic/wijmo-wijmo.angular2.grid.CellTemplateType.Enum.html"><span class="identifier">CellTemplateType</span></a> enumeration.</p>
<p>The <b>wjFlexGridCellTemplate</b> directive supports the following attributes:</p>
<p><dl class="dl-horizontal">
  <dt>cellType</dt>
  <dd>
    The <b>CellTemplateType</b> value defining the type of cell to which the template is applied. 
  </dd>
  <dt>cellOverflow</dt>
  <dd>
    Defines the <b>style.overflow</b> property value for cells.
  </dd>
</dl></p>
<p>The <b>cellType</b> attribute takes any of the following enumerated values:</p>
<p><b>Cell</b></p>
<p>Defines a regular (data) cell template. Must be a child of the <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> component.
For example, this cell template shows flags in the cells of Country column:</p>


<pre>&lt;wj-flex-grid-column [header]="'Country'" [binding]="'country'"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'Cell'" let-cell="cell"&gt;
    &lt;img src="resources/{&#8203;{cell.item.country}}.png" /&gt;
    {&#8203;{cell.item.country}}
  &lt;/template&gt;
&lt;/wj-flex-grid-column&gt;</pre>
<p>If <b>Group</b> template is not provided for a hierarchical <a href="topic/wijmo.grid.FlexGrid.Class.html"><span class="identifier">FlexGrid</span></a> (that is, one with the <b>childItemsPath</b> property 
specified), non-header cells in group rows of 
this <a href="topic/wijmo.grid.Column.Class.html"><span class="identifier">Column</span></a> also use this template.</p>
<p><b>CellEdit</b></p>
<p>Defines a template for a cell in edit mode. Must be a child of the <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> component.
This cell type has an additional <b>cell.value</b> 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 <a href="topic/wijmo.input.InputNumber.Class.html"><span class="identifier">InputNumber</span></a> control as an editor
for the "Sales" column:</p>


<pre>&lt;wj-flex-grid-column [header]="'Sales'" [binding]="'sales'"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'CellEdit'"&gt;
    &lt;wj-input-number [(value)]="cell.value" [step]="1"&gt;&lt;/wj-input-number&gt;
  &lt;/template&gt;
&lt;/wj-flex-grid-column&gt;</pre>
<p><b>ColumnHeader</b></p>
<p>Defines a template for a column header cell. Must be a child of the <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> component.
For example, this template adds an image to the header of the "Country" column:</p>


<pre>&lt;wj-flex-grid-column [header]="'Country'" [binding]="'country'"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'ColumnHeader'" let-cell="cell"&gt;
    &lt;img src="resources/globe.png" /&gt;
      {&#8203;{cell.col.header}}
  &lt;/template&gt;
&lt;/wj-flex-grid-column&gt;</pre>
<p><b>RowHeader</b></p>
<p>Defines a template for a row header cell. Must be a child of the <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGrid.Class.html"><span class="identifier">WjFlexGrid</span></a> component.
For example, this template shows row indices in the row headers:</p>


<pre>&lt;wj-flex-grid [itemsSource]="data"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'RowHeader'" let-cell="cell"&gt;
    {&#8203;{cell.row.index + 1}}
  &lt;/template&gt;
&lt;/wj-flex-grid&gt;</pre>
<p>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 <b>RowHeaderEdit</b> template.</p>
<p><b>RowHeaderEdit</b></p>
<p>Defines a template for a row header cell in edit mode. Must be a child of the 
<a href="topic/wijmo-wijmo.angular2.grid.WjFlexGrid.Class.html"><span class="identifier">WjFlexGrid</span></a> component. For example, this template shows dots in the header
of rows being edited:</p>


<pre>&lt;wj-flex-grid [itemsSource]="data"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'"&gt;
    ...
  &lt;/template&gt;
&lt;/wj-flex-grid&gt;</pre>
<p>Use the following <b>RowHeaderEdit</b> template to add the standard edit-mode indicator to cells where the <b>RowHeader</b> template 
applies:</p>


<pre>&lt;wj-flex-grid [itemsSource]="data"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'RowHeaderEdit'"&gt;
    {&#8203;{&amp;#x270e;}}
  &lt;/template&gt;
&lt;/wj-flex-grid&gt;</pre>
<p><b>TopLeft</b></p>
<p>Defines a template for the top left cell. Must be a child of the <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGrid.Class.html"><span class="identifier">WjFlexGrid</span></a> component.
For example, this template shows a down/right glyph in the top-left cell of the grid:</p>


<pre>&lt;wj-flex-grid [itemsSource]="data"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'TopLeft'"&gt;
    &lt;span class="wj-glyph-down-right"&gt;&lt;/span&gt;
  &lt;/template&gt;
&lt;/wj-flex-grid&gt;</pre>
<p><b>GroupHeader</b></p>
<p>Defines a template for a group header cell in a <a href="topic/wijmo.grid.GroupRow.Class.html"><span class="identifier">GroupRow</span></a>, Must be a child of the <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> component.</p>
<p>The <b>cell.row</b> property contains an instance of the <b>GroupRow</b> class. If the grouping comes 
from <a href="topic/wijmo.collections.CollectionView.Class.html"><span class="identifier">CollectionView</span></a>, the <b>cell.item</b> property references the <a href="topic/wijmo.collections.CollectionViewGroup.Class.html"><span class="identifier">CollectionViewGroup</span></a> object.</p>
<p>For example, this template uses a checkbox element as an expand/collapse toggle:</p>


<pre>&lt;wj-flex-grid-column [header]="'Country'" [binding]="'country'"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'GroupHeader'" let-cell="cell"&gt;
    &lt;input type="checkbox" [(ngModel)]="cell.row.isCollapsed"/&gt; 
    {&#8203;{cell.item.name}} ({&#8203;{cell.item.items.length}} items)
  &lt;/template&gt;
&lt;/wj-flex-grid-column&gt;</pre>
<p><b>Group</b></p>
<p>Defines a template for a regular cell (not a group header) in a <a href="topic/wijmo.grid.GroupRow.Class.html"><span class="identifier">GroupRow</span></a>. Must be a child of the 
<a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> component. This cell type has an additional <b>cell.value</b> property available for
binding. In cases where columns have the <b>aggregate</b> property specified, it contains the unformatted 
aggregate value.</p>
<p>For example, this template shows aggregate's value and kind for group row cells in the "Sales"
column:</p>


<pre>&lt;wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'Group'" let-cell="cell"&gt;
    Average: {&#8203;{cell.value | number:'1.0-0'}}
  &lt;/template&gt;
&lt;/wj-flex-grid-column&gt;</pre>
<p><b>ColumnFooter</b></p>
<p>Defines a template for a regular cell in a <b>columnFooters</b> panel. Must be a child of the
<a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> component. This cell type has an additional <b>cell.value</b>
property available for binding that contains a cell value.</p>
<p>For example, this template shows aggregate's value and kind for a footer cell in the "Sales"
column:</p>


<pre>&lt;wj-flex-grid-column [header]="'Sales'" [binding]="'sales'" [aggregate]="'Avg'"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'ColumnFooter'" let-cell="cell"&gt;
    Average: {&#8203;{cell.value | number:'1.0-0'}}
  &lt;/template&gt;
&lt;/wj-flex-grid-column&gt;</pre>
<p><b>BottomLeft</b></p>
<p>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 <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGrid.Class.html"><span class="identifier">WjFlexGrid</span></a> component.
For example, this template shows a sigma glyph in the bottom-left cell of the grid:</p>


<pre>&lt;wj-flex-grid [itemsSource]="data"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'BottomLeft'"&gt;
    &amp;#931;
  &lt;/template&gt;
&lt;/wj-flex-grid&gt;</pre>
<p><b>NewCellTemplate</b></p>
<p>Defines a cell in a new row template. Must be a child of the <a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridColumn.Class.html"><span class="identifier">WjFlexGridColumn</span></a> component.
Note that the <b>cell.item</b> 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:</p>


<pre>&lt;wj-flex-grid-column [header]="'Date'" [binding]="'date'"&gt;
  &lt;template wjFlexGridCellTemplate [cellType]="'NewCellTemplate'"&gt;
    Enter a date here
  &lt;/template&gt;
&lt;/wj-flex-grid-column&gt;</pre></div>
</div>
<div class="member-panel class members" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<h3 class="node">Properties</h3>
<ul>
<li class="mproperty"><a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridCellTemplate.Class.html/#autoSizeRows">autoSizeRows</a></li>
<li class="mproperty"><a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridCellTemplate.Class.html/#cellOverflow">cellOverflow</a></li>
<li class="mproperty"><a href="topic/wijmo-wijmo.angular2.grid.WjFlexGridCellTemplate.Class.html/#forceFullEdit">forceFullEdit</a></li>
</ul>
</div>
<h3 class="node">Properties</h3>
<div class="member-list" ng-class="{ 'show-inherited' : ctx.showInherited, 'show-raisers' : ctx.showRaisers }">
<div id="autoSizeRows" class="member-panel mproperty">
<h3>autoSizeRows</h3>
<div class="comment"><p>Gets or sets a value indicating whether the cell template will increase grid's default row height
to accomodate cells content. Defaults to true.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
<div id="cellOverflow" class="member-panel mproperty">
<h3>cellOverflow</h3>
<div class="comment"><p>Defines the <b>style.overflow</b> property value for cells.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/String" target="_blank"><span class="identifier">string</span></a></dd>
</dl>
</div>
<div id="forceFullEdit" class="member-panel mproperty">
<h3>forceFullEdit</h3>
<div class="comment"><p>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.</p></div>
<dl class="dl-horizontal">
  <dt>Type</dt><dd><a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Boolean" target="_blank"><span class="identifier">boolean</span></a></dd>
</dl>
</div>
</div>
