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

DataCellTemplate

configuration

The template which renders the content of the data cell. By default renders the formatted value (fmtValue) of the data item.

The fields which can be used in the template are:

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

For information about the tuple structure check this link. About the data item structure review this help topic.

The members array of each tuple contains member objects. When the PivotGridV2 is bound to flat data, each member has the following fields:

caption - the display text of the member
name - the name of the member
hierarchy - the name of the hierarchy of the member
levelName - the name of the level of the member
levelNum - the number of the level of the member
hasChildren - indicates whether the member has children
parentName - the name of the parent of the member, if any

The members do not have a dimension field.

dataCellTemplate

String|Function

<div id="pivotgrid"></div>

<script id="dataCellTemplate" type="text/x-kendo-template">
    # if (columnTuple.members[0].name === "[Date].[Calendar].[Calendar Year].&[2010]") { #
    		<!-- Display the value in bold for the year 2010. -->
        <b>#: dataItem.value #</b>
    # } else { #
    		<!-- Display the formatted value for the other years. -->
        #: dataItem.fmtValue #
    # } #
</script>

<script>
$("#pivotgrid").kendoPivotGridV2({
    dataCellTemplate: $("#dataCellTemplate").html(),
    dataSource: {
        type: "xmla",
        columns: [{ name: "[Date].[Calendar]", expand: true } ],
        measures: ["[Measures].[Internet Sales Amount]"],
        transport: {
            connection: {
                catalog: "Adventure Works DW 2008R2",
                cube: "Adventure Works"
            },
            read: 'https://demos.telerik.com/service/v2/olap/msmdpump.dll'
        }
    }
});
</script>