Templates
The Telerik UI PivotGridV2 HtmlHelper for ASP.NET Core provides built-in templates, which allow you to customize the way the data is displayed in the table.
The templates use the Kendo UI Templates syntax.
The available types of PivotGridV2 templates are:
For a live example, see the PivotGridV2 Templates demo.
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 access 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.
)
<kendo-pivotgridv2 name="pivotgrid" column-width="200" height="570" cell-template-id="dataCellTemplate">
<!--Other configuration. -->
</kendo-pivotgridv2>
<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 access the following fields:
-
member—The member of the corresponding column header cell. -
tuple—The tuple of the corresponding column header cell.
@(Html.Kendo().PivotGridV2()
.Name("pivotgridv2")
.ColumnWidth(200)
.Height(570)
.ColumnHeaderTemplateId("headerTemplate")
// other configuration settings
)
<kendo-pivotgridv2 name="pivotgrid" column-width="200" height="570" column-header-template-id="headerTemplate">
<!--Other configuration. -->
</kendo-pivotgridv2>
<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 access the following fields:
-
member—The member of the corresponding column header cell. -
tuple—The tuple of the corresponding column header cell.
@(Html.Kendo().PivotGridV2()
.Name("pivotgridv2")
.ColumnWidth(200)
.Height(570)
.RowHeaderTemplateId("headerTemplate")
// other configuration settings
)
<kendo-pivotgridv2 name="pivotgrid" column-width="200" height="570" row-header-template-id="headerTemplate">
<!--Other configuration. -->
</kendo-pivotgridv2>
<script id="headerTemplate" type="text/x-kendo-tmpl">
# if (!member.children.length) { #
<em>#: member.caption #</em>
# } else { #
#: member.caption #
# } #
</script>