Templates
The Kendo UI PivotGridV2 provides the built-in functionality to change the appearance of the rendered data by using templates.
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:
<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:
<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()
});