New to Kendo UI for jQuery? Start a free 30-day trial
Templates
Updated on Sep 8, 2026
The Kendo UI PivotGridV2 provides the built-in functionality to change the appearance of the rendered data by using [templates](% slug overview_kendoui_templatescomponent %).
For a live example, visit the PivotGridV2 Templates demo.
Template Configurations
The PivotGridV2 offers three template configurations:
dataCellTemplate—Changes the appearance of each data cell.columnHeaderTemplate—Changes the appearance of each column header.rowHeaderTemplate—Changes the appearance of each row header.
The following example demonstrates how to set-up a dataCellTemplate:
html
<script id="dataCellTemplate" type="text/x-kendo-tmpl">
# if (!dataItem) { #
<em>N/A</em> <!-- This value will be rendered if there is no available data for the specific cell. -->
# } else { #
<b><span style='color: green;'>#: dataItem.fmtValue #</span></b> <!-- In all other cases the formatted value will be rendered in green color. -->
# } #
</script>
$("#pivotgrid").kendoPivotGridV2({
dataCellTemplate: $("#dataCellTemplate").html()
});The following example demonstrates how to set-up both a columnHeaderTemplate and a rowHeaderTemplate at once:
html
<script id="headerTemplate" type="text/x-kendo-tmpl">
<b>#: member.caption #</b> <!-- Display the column/row title in bold. -->
</script>
$("#pivotgrid").kendoPivotGridV2({
columnHeaderTemplate: $("#headerTemplate").html(),
rowHeaderTemplate: $("#headerTemplate").html()
});