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 widget.

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>
NOTE
If you create a PivotGridDataSource instance outside the widget (as shown above), make sure to dispose of it when it is no longer used. If the instance is created inside the widget, it will be disposed of automatically.

When using a widget as an ASP.NET MVC Control, configure the PivotGridDataSource using the syntax shown in the following example. This example configures the PivotGrid widget.

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)
)
See Also

Props

This section describes options 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.
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 options 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
                }
            })
        });
    }
}

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 options of a field with the specified identifier.
field(id, options)

Updates field options' values.
fields()

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

Specifies a new fields collection.
filter()

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

Sets the filter option'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.
state(state)

Sets the PivotGridDataSource state.

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.