Free Trial Buy

PivotGridDataSource

An object that provides access to data for the PivotGrid widget.

Included in: dx.web.js, dx.viz-web.js, dx.all.js
Module: ui/pivot_grid/data_source
Export: default
Type:

Object

The PivotGridDataSource object is a connection between a PivotGrid widget and the data provided by a web service or data stored locally. The DataSource underlying data access logic is isolated in a Store. You can use the following Store types in the PivotGridDataSource.

  • ArrayStore
    Provides access to an in-memory array.

  • XmlaStore
    Provides access to a remote OLAP service.

  • LocalStore
    Provides access to an HTML5 web storage.

  • ODataStore
    Provides access to a remote OData service.

  • CustomStore
    A Store that enables you to implement your own data access logic.

To create a PivotGridDataSource instance, call its constructor and pass the configuration object to it.

JavaScript
var myDataSource = new DevExpress.data.PivotGridDataSource(pivotGridDataSourceConfig);

The core field of the configuration object is store. If your Store type is XmlaStore, no additional configuration is required, whereas if you use other Store types, you also need to describe your data for PivotGrid by assigning the list of fields to the fields array.

To associate a PivotGridDataSource instance with the widget, pass this instance to the dataSource option of the widget.

HTML
<div data-bind="dxPivotGrid: { dataSource: myDataSource }"></div>

You can also pass the PivotGridDataSource configuration object to the dataSource option. In this case, the PivotGridDataSource instance will be automatically created within the widget.

HTML
<div data-bind="dxPivotGrid: { dataSource: pivotGridDataSourceConfig }"></div>
NOTE
If you create a PivotGridDataSource instance outside the widget, be sure to dispose of it when it is no longer used. If the PivotGridDataSource is created within the widget, it will be disposed of automatically.

Refer to the DataSource and Data Layer topics for more information about working with data in DevExtreme.

When using the PivotGrid widget as an ASP.NET MVC Control, declare the options of the PivotGridDataSource in the DataSource() method.

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("ShipCountry");
            fields.Add().Area(PivotGridArea.Row).DataField("ShipCity");
            fields.Add().Area(PivotGridArea.Row).DataField("ShipName");
            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("ShipCountry")
                        fields.Add().Area(PivotGridArea.Row).DataField("ShipCity")
                        fields.Add().Area(PivotGridArea.Row).DataField("ShipName")
                        fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count)
                    End Sub)
    End Function)
)

For information on how to configure data access in ASP.NET MVC Controls, see the Data Binding topic.

Configuration

This section describes the configuration options of the PivotGridDataSource object.

NOTE
To create a PivotGridDataSource instance that uses custom data access logic, pass the CustomStore configuration object to the PivotGridDataSource constructor as shown below.
JavaScript
var myPivotGridDataSource = new DevExpress.data.PivotGridDataSource({
    load: function(loadOptions) {
        // data loading logic
    },
    byKey: function(key) {
        // data access by key logic
    }
});

Methods

This section describes the methods used to manipulate the PivotGridDataSource object.

Events

This section describes events raised by the PivotGridDataSource object.

To handle events, use one of the following methods.