DevExtreme Vue - PivotGridDataSource API

The PivotGridDataSource is an object that provides an API for processing data from an underlying store. This object is used in the PivotGrid UI component.

import PivotGridDataSource from "devextreme-vue/data-source"
Type: DxDataSourceTypes.default
jQuery
JavaScript
$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        store: {
            // ...
            // Underlying store is configured here
            // ...
        },
        fields: [{
            area: "column",
            dataField: "OrderDate",
            dataType: "date"
        }, {
            area: "row",
            dataField: "ShipCity"
        }, {
            area: "data",
            summaryType: "count"
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});
Angular
TypeScript
HTML
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import { DxPivotGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor () {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: {
                // ...
                // Underlying store is configured here
                // ...
            },
            fields: [{
                area: "column",
                dataField: "OrderDate",
                dataType: "date"
            }, {
                area: "row",
                dataField: "ShipCity"
            }, {
                area: "data",
                summaryType: "count"
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})
<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>
AngularJS
JavaScript
HTML
angular.module('DemoApp', ['dx'])
    .controller('DemoController', function DemoController($scope) {
        $scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
            store: {
                // ...
                // Underlying store is configured here
                // ...
            },
            fields: [{
                area: "column",
                dataField: "OrderDate",
                dataType: "date"
            }, {
                area: "row",
                dataField: "ShipCity"
            }, {
                area: "data",
                summaryType: "count"
            }]
        });
    });
<div dx-pivot-grid="{
    dataSource: pivotGridDataSource
}"></div>
Knockout
JavaScript
HTML
var viewModel = {
    pivotGridDataSource: new DevExpress.data.PivotGridDataSource({
        store: {
            // ...
            // Underlying store is configured here
            // ...
        },
        fields: [{
            area: "column",
            dataField: "OrderDate",
            dataType: "date"
        }, {
            area: "row",
            dataField: "ShipCity"
        }, {
            area: "data",
            summaryType: "count"
        }]
    })
};

ko.applyBindings(viewModel);
<div data-bind="dxPivotGrid: {
    dataSource: pivotGridDataSource
}"></div>
Vue
App.vue
<template>
    <DxPivotGrid
        :data-source="pivotGridDataSource"
    />
</template>

<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-vue/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    store: {
        // ...
        // Underlying store is configured here
        // ...
    },
    fields: [{
        area: 'column',
        dataField: 'OrderDate',
        dataType: 'date'
    }, {
        area: 'row',
        dataField: 'ShipCity'
    }, {
        area: 'data',
        summaryType: 'count'
    }]
});

export default {
    components: {
        DxPivotGrid
    },
    data() {
        return {
            pivotGridDataSource
        }
    }
}
</script>
React
App.js
import React from 'react';

import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import DxPivotGrid from 'devextreme-react/pivot-grid';

const pivotGridDataSource = new PivotGridDataSource({
    store: {
        // ...
        // Underlying store is configured here
        // ...
    },
    fields: [{
        area: 'column',
        dataField: 'OrderDate',
        dataType: 'date'
    }, {
        area: 'row',
        dataField: 'ShipCity'
    }, {
        area: 'data',
        summaryType: 'count'
    }]
});

class App extends React.Component {
    render() {
        return (
            <PivotGrid
                dataSource={pivotGridDataSource}
            />
        );
    }
}
export default App;
NOTE
If you create a PivotGridDataSource instance outside the UI component (as shown above), make sure to dispose of it when it is no longer used. If the instance is created inside the UI component, it will be disposed of automatically.

When using a UI component as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control, configure the PivotGridDataSource using the syntax shown in the following example. This example configures the PivotGrid UI component.

Razor C#
Razor VB
@(Html.DevExtreme().PivotGrid()
    .ID("pivotGrid")
    .DataSource(ds => ds
        .Store(store => store
            // ...
            // Underlying store is configured here
        )
        .Fields(fields => {
            fields.Add().Area(PivotGridArea.Column)
                .DataField("OrderDate")
                .DataType(PivotGridDataType.Date);
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCity");
            fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count);
        })
    )
)
@(Html.DevExtreme().PivotGrid() _
    .ID("pivotGrid") _
    .DataSource(Function(ds)
        Return ds.Store(Function(store)
                        Return store.
                            @* Underlying store is configured here *@
                    End Function) _
                    .Fields(Sub(fields)
                        fields.Add().Area(PivotGridArea.Column) _
                            .DataField("OrderDate") _
                            .DataType(PivotGridDataType.Date)
                        fields.Add().Area(PivotGridArea.Row).DataField("ShipCity")
                        fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count)
                    End Sub)
    End Function)
)
NOTE
The PivotGridDataSource is immutable. You cannot change its configuration at runtime. However, you can use its methods to manipulate it.
See Also

Props

This section describes properties that configure the PivotGridDataSource.

Name Description
fields

Configures pivot grid fields.
filter

Specifies data filtering conditions. Cannot be used with an XmlaStore.
onChanged

A function that is executed after data is successfully loaded.
onFieldsPrepared

A function that is executed when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.
onLoadError

A function that is executed when data loading fails.
onLoadingChanged

A function that is executed when the data loading status changes.
paginate

Specifies whether the PivotGridDataSource should load data in portions. Can be used only with an XmlaStore.
remoteOperations

Specifies whether the data processing operations (filtering, grouping, summary calculation) should be performed on the server.
retrieveFields

Specifies whether to auto-generate pivot grid fields from the store's data.
store

Configures the DataSource's underlying store.
NOTE

The PivotGridDataSource allows specifying CustomStore properties in its configuration object, as shown in the following code:

jQuery
JavaScript
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
    load: function (loadOptions) {
        // Loading data objects
    },
    byKey: function (key) {
        // Retrieving a data object by key
    }
});
Angular
TypeScript
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
import CustomStore from "devextreme/data/custom_store";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            store: new CustomStore({
                load: (loadOptions) => {
                    // Loading data objects
                },
                byKey: (key) => {
                    // Retrieving a data object by key
                }
            })
        });
    }
}
Vue
App.vue
<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
import CustomStore from 'devextreme/data/custom_store';

const pivotGridDataSource = new PivotGridDataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            // Loading data objects
        },
        byKey: (key) => {
            // Retrieving a data object by key
        }
    })
});

export default {
    // ...
    data() {
        return {
            pivotGridDataSource
        }
    }
}
</script>
React
App.js
// ...
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
iimport CustomStore from 'devextreme/data/custom_store';

const pivotGridDataSource = new PivotGridDataSource({
    store: new CustomStore({
        load: (loadOptions) => {
            // Loading data objects
        },
        byKey: (key) => {
            // Retrieving a data object by key
        }
    })
});

class App extends React.Component {
    // ...
}
export default App;

Methods

This section describes methods that control the PivotGridDataSource.

Name Description
collapseAll(id)

Collapses all header items of a field with the specified identifier.
collapseHeaderItem(area, path)

Collapses a specific header item.
createDrillDownDataSource(options)

Provides access to the facts that were used to calculate a specific summary value.
dispose()

Disposes of all the resources allocated to the PivotGridDataSource instance.
expandAll(id)

Expands all the header items of a field with the specified identifier.
expandHeaderItem(area, path)

Expands a specific header item.
field(id)

Gets all the properties of a field with the specified identifier.
field(id, options)

Updates field properties' values.
fields()

Gets all the fields including those generated automatically.
fields(fields)

Specifies a new fields collection.
filter()

Gets the filter property's value. Does not affect an XmlaStore.
filter(filterExpr)

Sets the filter property's value. Does not affect an XmlaStore.
getAreaFields(area, collectGroups)

Gets all the fields within an area.
getData()

Gets the loaded data. Another data portion is loaded every time a header item is expanded.
isLoading()

Checks whether the PivotGridDataSource is loading data.
load()

Starts loading data.
off(eventName)

Detaches all event handlers from a single event.
off(eventName, eventHandler)

Detaches a particular event handler from a single event.
on(eventName, eventHandler)

Subscribes to an event.
on(events)

Subscribes to events.
reload()

Clears the loaded PivotGridDataSource data and calls the load() method.
state()

Gets the current PivotGridDataSource state. Part of the PivotGrid UI component's state storing feature.
state(state)

Sets the PivotGridDataSource state. Part of the PivotGrid UI component's state storing feature.

Events

This section describes events that the PivotGridDataSource raises.

Name Description
changed

Raised after data is successfully loaded.
fieldsPrepared

Raised when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.
loadError

Raised when data loading fails.
loadingChanged

Raised when the data loading status changes.