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/ui/pivot_grid/data_source"
Type:
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
- ASP.NET MVC Controls - Data Binding
Configuration
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. |
Was this topic helpful?
Feel free toshare topic-related thoughts here.
Ifyou have technical questions, please create asupport ticket inthe DevExpress Support Center.
Thank you for the feedback!
