The MultiRowCellTemplate component defines a template for a certain
cell type in MultiRow. The template element must contain a cellType property that
specifies the {@link wijmo.react.grid.CellTemplateType}. Depending on the template's cell type,
the MultiRowCellTemplate element must be a child
of either wijmo.react.grid.multirow.MultiRow
or wijmo.react.grid.multirow.MultiRowCell components.
Column-specific cell templates must be contained in MultiRowCell
components, and cells that are not column-specific (like row header or top left cells)
must be contained in the MultiRow component.
The content of cells is defined using the templaterender prop, which receives
a render function that should return a virtual element tree representing the cell content.
The function has the context parameter where the data context of each certain cell is
passed. This is an object with the col, row, and item properties,
which refer to the MultiRowCell, Row, and Row.dataItem objects pertaining to the cell.
For cell types like Group and CellEdit, an additional value
context 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:
The MultiRowCellTemplate directive supports the following properties:
cellType
The CellTemplateType value defining the type of cell to which the template is applied.
autoSizeRows
Indicates whether the cell template will increase grid's default row height
to accomodate cells content. Defaults to true.
cellOverflow
Defines the style.overflow property value for cells.
forceFullEdit
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 cellType attribute takes any of the following enumerated values:
Cell
Defines a regular (data) cell template. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component.
For example, this cell template shows flags in the cells of Country column:
Defines a template for a cell in edit mode. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component.
This cell type has an additional context.value property. 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 wijmo.react.grid.multirow.MultiRowCell 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 wijmo.react.grid.multirow.MultiRow 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
wijmo.react.grid.multirow.MultiRow 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 wijmo.react.grid.multirow.MultiRow component.
For example, this template shows a down/right glyph in the top-left cell of the grid:
The context.row property contains an instance of the GroupRow class. If the grouping comes
from CollectionView, the context.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
wijmo.react.grid.multirow.MultiRowCell component. This cell type has an additional context.value
property. 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 cell in a new row template. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component.
Note that the context.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:
<MultiRowCellheader="Date"binding="date"><MultiRowCellTemplatecellType="NewCellTemplate"template={ (context) => 'Enter a date here' } />
</MultiRowCell>
React component for the MultiRow cell templates.
The MultiRowCellTemplate component defines a template for a certain cell type in MultiRow. The template element must contain a cellType property that specifies the {@link wijmo.react.grid.CellTemplateType}. Depending on the template's cell type, the MultiRowCellTemplate element must be a child of either wijmo.react.grid.multirow.MultiRow or wijmo.react.grid.multirow.MultiRowCell components.
Column-specific cell templates must be contained in MultiRowCell components, and cells that are not column-specific (like row header or top left cells) must be contained in the MultiRow component.
The content of cells is defined using the template render prop, which receives a render function that should return a virtual element tree representing the cell content. The function has the context parameter where the data context of each certain cell is passed. This is an object with the col, row, and item properties, which refer to the MultiRowCell, Row, and Row.dataItem objects pertaining to the cell.
For cell types like Group and CellEdit, an additional value context 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.html --> <MultiRow itemsSource={this.state.data}> <MultiRowCellTemplate cellType="RowHeader" template={ (context) => context.row.index + 1 } /> <MultiRowCellTemplate cellType="RowHeaderEdit" template={ (context) => '...' } /> <MultiRowCellGroup header="Statistics"> <MultiRowCell header="Country" binding="country"> <MultiRowCellTemplate cellType="ColumnHeader" template={ (context) => { return <React.Fragment> <img src="resources/globe.png" /> {context.col.header} </React.Fragment> } } /> <MultiRowCellTemplate cellType="Cell" template={ (context) => { return <React.Fragment> <img src={`resources/${context.item.country}.png`} /> {context.item.country} </React.Fragment> } } /> </MultiRowCell> <MultiRowCell header="Sales" binding="sales"></MultiRowCell> </MultiRowCellGroup> </MultiRow>
The MultiRowCellTemplate directive supports the following properties:
The cellType attribute takes any of the following enumerated values:
Cell
Defines a regular (data) cell template. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component. For example, this cell template shows flags in the cells of Country column:
<MultiRowCell header="Country" binding="country"> <MultiRowCellTemplate cellType="Cell" template={ (context) => { return <React.Fragment> <img src={`resources/${context.item.country}.png`} /> {context.item.country} </React.Fragment> } } /> </MultiRowCell>
CellEdit
Defines a template for a cell in edit mode. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component. This cell type has an additional context.value property. 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:
<MultiRowCell header="Sales" binding="sales"> <MultiRowCellTemplate cellType="CellEdit" template={ (context) => { return <wjInput.InputNumber step={1} value={context.value} valueChanged={(inpNum: wjcInput.InputNumber) => context.value = inpNum.value } /> } } /> </MultiRowCell>
ColumnHeader
Defines a template for a column header cell. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component. For example, this template adds an image to the header of the "Country" column:
<MultiRowCell header="Country" binding="country"> <MultiRowCellTemplate cellType="ColumnHeader" template={ (context) => { return <React.Fragment> <img src="resources/globe.png" /> {context.col.header} </React.Fragment> } } /> </MultiRowCell>
RowHeader
Defines a template for a row header cell. Must be a child of the wijmo.react.grid.multirow.MultiRow component. For example, this template shows row indices in the row headers:
<MultiRow itemsSource={this.state.data}> <MultiRowCellTemplate cellType="RowHeader" template={ (context) => context.row.index / context.row.grid.rowsPerItem + 1 } /> </MultiRow>
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.react.grid.multirow.MultiRow component. For example, this template shows dots in the header of rows being edited:
<MultiRow itemsSource={this.state.data}> <MultiRowCellTemplate cellType="RowHeaderEdit" template={ (context) => '...' } /> </MultiRow>
Use the following RowHeaderEdit template to add the standard edit-mode indicator to cells where the RowHeader template applies:
<MultiRow itemsSource={this.state.data}> <MultiRowCellTemplate cellType="RowHeaderEdit" template={ (context) => '\u270e\ufe0e' } /> </MultiRow>
TopLeft
Defines a template for the top left cell. Must be a child of the wijmo.react.grid.multirow.MultiRow component. For example, this template shows a down/right glyph in the top-left cell of the grid:
<MultiRow itemsSource={this.state.data}> <MultiRowCellTemplate cellType="TopLeft" template={ (context) => { return <span class="wj-glyph-down-right"></span> } } /> </MultiRow>
GroupHeader
Defines a template for a group header cell in a GroupRow. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component.
The context.row property contains an instance of the GroupRow class. If the grouping comes from CollectionView, the context.item property references the CollectionViewGroup object.
For example, this template uses a checkbox element as an expand/collapse toggle:
<MultiRowCell header="Country" binding="country"> <MultiRowCellTemplate cellType="GroupHeader" template={ (context) => { return <React.Fragment> <input type="checkbox" checked={context.row.isCollapsed} onChange={e => context.row.isCollapsed = e.target.checked as boolean } /> {context.item.name} ({context.item.items.length} items) </React.Fragment> } } /> </MultiRowCell>
Group
Defines a template for a regular cell (not a group header) in a GroupRow. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component. This cell type has an additional context.value property. 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:
<MultiRowCell header="Sales" binding="sales" aggregate="Avg"> <MultiRowCellTemplate cellType="Group" template={ (context) => { return <React.Fragment> Average: {wjcCore.Globalize.formatNumber(context.value, 'N0')} </React.Fragment> } } /> </MultiRowCell>
NewCellTemplate
Defines a cell in a new row template. Must be a child of the wijmo.react.grid.multirow.MultiRowCell component. Note that the context.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:
<MultiRowCell header="Date" binding="date"> <MultiRowCellTemplate cellType="NewCellTemplate" template={ (context) => 'Enter a date here' } /> </MultiRowCell>