DevExtreme React - 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.
jQuery
$(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
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
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
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
<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
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;
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.
@(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
Configuration
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. |
The PivotGridDataSource allows specifying CustomStore properties in its configuration object, as shown in the following code:
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ load: function (loadOptions) { // Loading data objects }, byKey: function (key) { // Retrieving a data object by key } });
Angular
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
<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
// ... 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
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
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. |
If you have technical questions, please create a support ticket in the DevExpress Support Center.