All Components

PivotDataSource Overview

The PivotDataSource extends the DataSource component.

It communicates with an OLAP cube instance on HTTP by using the XMLA protocol.

The following example demonstrates how to bind the PivotGrid to the PivotDataSource.

<div id="vueapp" class="vue-app">
    <kendo-pivotdatasource ref="pivotdatasource1"
                           transport-read-url="https://demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
                           type="odata"
                           :schema-cube="schemaCube"
                           :measures="measures">
        <kendo-pivot-column :name="'Country'" :expand="true"></kendo-pivot-column>
        <kendo-pivot-column :name="'CompanyName'" ></kendo-pivot-column>
        <kendo-pivot-row :name="'ContactTitle'" ></kendo-pivot-row>
    </kendo-pivotdatasource>
    <kendo-pivotconfigurator id="pivotconfigurator1"
                             data-source-ref="pivotdatasource1"
                             :filterable="true"
                             :height="200" >
    </kendo-pivotconfigurator>
    <kendo-pivotgrid id="pivotgrid1"
                     data-source-ref="pivotdatasource1"
                     :filterable="true"
                     :columnWidth="120"
                     :height="400" >
    </kendo-pivotgrid>
</div>
Vue.use(DataSourceInstaller);
Vue.use(PivotGridInstaller);

new Vue({
    el: '#vueapp',
    data: {
        measures: ['Contacts Count'],
        schemaCube: {
            dimensions: {
                ContactName: { caption: 'All Contacts' },
                CompanyName: { caption: 'All Companies' },
                Country: { caption: 'All Countries' },
                ContactTitle: { caption: 'All Titles' }
            },
            measures: {
                'Contacts Count': { field: 'CustomerID', aggregate: 'count' }
            }
        }
    }
})
In this article