Templates
The Telerik UI PivotGrid component for ASP.NET Core provides templating options that can be used to customize the way its data is visualized in the table.
Under the hood, the templates use the Kendo UI Templates syntax.
To use templates in the PivotGrid, apply any of the available template options:
Data Cell Template
The data cell template is the template which renders the content of the data cell. By default, it renders the fmtValue formatted value of the data item.
In the data cell template, you can use the following fields:
-
columnTuple—The tuple of the corresponding column header cell. -
rowTuple—The tuple of the corresponding row header cell. -
measure—The value of the data cell measure. -
dataItem—The data item itself.
@(Html.Kendo().PivotGrid()
.Name("pivotgrid")
.ColumnWidth(200)
.Height(570)
.DataCellTemplateId("dataCellTemplate")
// Other configuration.
)
<script id="dataCellTemplate" type="text/x-kendo-tmpl">
# var columnMember = columnTuple ? columnTuple.members[0] : { children: [] }; #
# var rowMember = rowTuple ? rowTuple.members[0] : { children: [] }; #
# var value = kendo.toString(kendo.parseFloat(dataItem.value) || "N/A", "c2"); #
# if (columnMember.children.length || rowMember.children.length) { #
<em style="color: red">#: value # (total)</em>
# } else { #
#: value #
# } #
</script>
<kendo-pivotgrid name="pivotgrid"
column-width="200"
height="570"
datacell-template-id="dataCellTemplate">
// Other configuration.
</kendo-pivotgrid>
<script id="dataCellTemplate" type="text/x-kendo-tmpl">
# var columnMember = columnTuple ? columnTuple.members[0] : { children: [] }; #
# var rowMember = rowTuple ? rowTuple.members[0] : { children: [] }; #
# var value = kendo.toString(kendo.parseFloat(dataItem.value) || "N/A", "c2"); #
# if (columnMember.children.length || rowMember.children.length) { #
<em style="color: red">#: value # (total)</em>
# } else { #
#: value #
# } #
</script>
Column Header Template
The column header template is the template which renders the content of the column header cell. By default, it renders the caption of the tuple member.
In the column header template, you can use the following fields:
-
member—The member of the corresponding column header cell. -
tuple—The tuple of the corresponding column header cell.
@(Html.Kendo().PivotGrid()
.Name("pivotgrid")
.ColumnWidth(200)
.Height(570)
.ColumnHeaderTemplateId("headerTemplate")
// Other configuration.
)
<script id="headerTemplate" type="text/x-kendo-tmpl">
# if (!member.children.length) { #
<em>#: member.caption #</em>
# } else { #
#: member.caption #
# } #
</script>
<kendo-pivotgrid name="pivotgrid"
column-width="200"
height="570"
column-header-template-id="headerTemplate">
// Other configuration.
</kendo-pivotgrid>
<script id="headerTemplate" type="text/x-kendo-tmpl">
# if (!member.children.length) { #
<em>#: member.caption #</em>
# } else { #
#: member.caption #
# } #
</script>
Row Header Template
The row header template is the template which renders the content of the row header cell. By default, it renders the caption of the tuple member.
In the row header template, you can use the following fields:
-
member—The member of the corresponding column header cell. -
tuple—The tuple of the corresponding column header cell.
@(Html.Kendo().PivotGrid()
.Name("pivotgrid")
.ColumnWidth(200)
.Height(570)
.RowHeaderTemplateId("headerTemplate")
// Other configuration.
)
<script id="headerTemplate" type="text/x-kendo-tmpl">
# if (!member.children.length) { #
<em>#: member.caption #</em>
# } else { #
#: member.caption #
# } #
</script>
<kendo-pivotgrid name="pivotgrid"
column-width="200"
height="570"
row-header-template-id="headerTemplate">
// Other configuration.
</kendo-pivotgrid>
<script id="headerTemplate" type="text/x-kendo-tmpl">
# if (!member.children.length) { #
<em>#: member.caption #</em>
# } else { #
#: member.caption #
# } #
</script>