PivotGrid Templates

The PivotGrid Vue enables you to customize its appearance by using templates.

The PivotGrid supports the following templates:

Data Cell Template

To set the data cell template, use the :data-cell-template prop.

<div id="vueapp" class="vue-app">
    <kendo-pivotdatasource ref="pivotdatasource1"
                           transport-read-url="https://demos.telerik.com/olap/msmdpump.dll"
                           transport-connection-catalog="Adventure Works DW 2008R2"
                           transport-connection-cube="Adventure Works"
                           type="xmla"
                           schema-type="xmla"
                           :measures="measures">
          <kendo-pivot-column :name="'[Date].[Calendar]'" :expand="true"></kendo-pivot-column>
          <kendo-pivot-row :name="'[Product].[Product Line]'" :expand="true"></kendo-pivot-row>
    </kendo-pivotdatasource>
    <kendo-pivotgrid id="pivotgrid1"
                     data-source-ref="pivotdatasource1"
                     :data-cell-template="dataCellTemplate"
                     :columnWidth="200"
                     :height="400" >
    </kendo-pivotgrid>
</div>
<style>
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>
Vue.use(PivotGridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            dataCellTemplate: this.generateDataCellTemplate(),
            measures: ['[Measures].[Reseller Freight Cost]']
        }
    },
    methods: {
        generateDataCellTemplate: function() {
            var template =
            '# 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) { #' +
                '#: value #' +
            '# } else { #' +
                '<em  style="color: red">#: value # (total)</em>' +
            '# } #'

            return kendo.template(template)
        }
    }
})

Column Header Template

To set the column header template, use the :column-header-template prop.

<div id="vueapp" class="vue-app">
    <kendo-pivotdatasource ref="pivotdatasource1"
                           transport-read-url="https://demos.telerik.com/olap/msmdpump.dll"
                           transport-connection-catalog="Adventure Works DW 2008R2"
                           transport-connection-cube="Adventure Works"
                           type="xmla"
                           schema-type="xmla"
                           :measures="measures">
          <kendo-pivot-column :name="'[Date].[Calendar]'" :expand="true"></kendo-pivot-column>
          <kendo-pivot-row :name="'[Product].[Product Line]'" :expand="true"></kendo-pivot-row>
    </kendo-pivotdatasource>
    <kendo-pivotgrid id="pivotgrid1"
                     data-source-ref="pivotdatasource1"
                     :column-header-template="columnHeaderTemplate"
                     :columnWidth="200"
                     :height="400" >
    </kendo-pivotgrid>
</div>
<style>
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>
Vue.use(PivotGridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            columnHeaderTemplate: this.generateColumnHeaderTemplate(),
            measures: ['[Measures].[Reseller Freight Cost]']
        }
    },
    methods: {
        generateColumnHeaderTemplate: function() {
            var template =
            '# if (!member.children.length) { #' +
                '<em>#: member.caption #</em>' +
            '# } else { #' +
                '#: member.caption #' +
            '# } #'

            return kendo.template(template)
        }
    }
})

Row Header Template

To set the row header template, use the :row-header-template prop.

<div id="vueapp" class="vue-app">
    <kendo-pivotdatasource ref="pivotdatasource1"
                           transport-read-url="https://demos.telerik.com/olap/msmdpump.dll"
                           transport-connection-catalog="Adventure Works DW 2008R2"
                           transport-connection-cube="Adventure Works"
                           type="xmla"
                           schema-type="xmla"
                           :measures="measures">
          <kendo-pivot-column :name="'[Date].[Calendar]'" :expand="true"></kendo-pivot-column>
          <kendo-pivot-row :name="'[Product].[Product Line]'" :expand="true"></kendo-pivot-row>
    </kendo-pivotdatasource>
    <kendo-pivotgrid id="pivotgrid1"
                     data-source-ref="pivotdatasource1"
                     :row-header-template="rowHeaderTemplate"
                     :columnWidth="200"
                     :height="400" >
    </kendo-pivotgrid>
</div>
<style>
    .hidden-on-narrow {
        display: inline-block;
        vertical-align: top;
    }
</style>
Vue.use(PivotGridInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: '#vueapp',
    data () {
        return {
            rowHeaderTemplate: this.generateRowHeaderTemplate(),
            measures: ['[Measures].[Reseller Freight Cost]']
        }
    },
    methods: {
        generateRowHeaderTemplate: function() {
            var template =
            '# if (!member.children.length) { #' +
                '<em>#: member.caption #</em>' +
            '# } else { #' +
                '#: member.caption #' +
            '# } #'

            return kendo.template(template)
        }
    }
})

In this article