New to Kendo UI for jQuery? Download free 30-day trial

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:

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()
});

See also

In this article
Not finding the help you need? Improve this article