DevExtreme jQuery - PivotGridDataSource Options
The PivotGridDataSource allows specifying CustomStore options 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 } }) }); } }
fields[]
This option accepts an array of objects where each object configures a single field. Each pivot grid field must be associated with a data field using the dataField option. Fields with the specified area option are displayed in the pivot grid; other fields' headers are displayed in the field chooser.
jQuery
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // ... fields: [{ dataField: "region", area: "row" }, { dataField: "date", dataType: "date", area: "column" }, { dataField: "sales", summaryType: "sum", area: "data" }] }); $("#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({ // ... fields: [{ dataField: "region", area: "row" }, { dataField: "date", dataType: "date", area: "column" }, { dataField: "sales", summaryType: "sum", area: "data" }] }); } } @NgModule({ imports: [ // ... DxPivotGridModule ], // ... })
<dx-pivot-grid [dataSource]="pivotGridDataSource"> </dx-pivot-grid>
If the retrieveFields option is true, fields configured in the fields array are accompanied by auto-generated fields that do not belong to any area. However, a user can move them to any area using the field chooser.
See Also
filter
Specifies data filtering conditions. Cannot be used with an XmlaStore.
Possible variants:
Binary filter
[ "dataField", "=", 3 ]
Unary filter
[ "!", [ "dataField", "=", 3 ] ]
Complex filter
[ [ "dataField", "=", 10 ], "and", [ [ "otherDataField", "<", 3 ], "or", [ "otherDataField", ">", 11 ] ] ]
jQuery
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // ... filter: [ "date", "startswith", "2014" ] }); $("#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({ // ... filter: [ "date", "startswith", "2014" ] }); } } @NgModule({ imports: [ // ... DxPivotGridModule ], // ... })
<dx-pivot-grid [dataSource]="pivotGridDataSource"> </dx-pivot-grid>
See Also
onChanged
jQuery
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ onChanged: function () { // Your code goes here } }); $("#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({ onChanged: () => { // Your code goes here } }); } } @NgModule({ imports: [ // ... DxPivotGridModule ], // ... })
<dx-pivot-grid [dataSource]="pivotGridDataSource"> </dx-pivot-grid>
onFieldsPrepared
A function that is executed when all fields are loaded from the store and they are ready to be displayed in the PivotGrid.
All field configurations.
jQuery
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ onFieldsPrepared: function (fields) { // Your code goes here } }); $("#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({ onFieldsPrepared: (fields) => { // Your code goes here } }); } } @NgModule({ imports: [ // ... DxPivotGridModule ], // ... })
<dx-pivot-grid [dataSource]="pivotGridDataSource"> </dx-pivot-grid>
onLoadError
jQuery
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ onLoadError: function (error) { console.log(error.message); } }); $("#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({ onLoadError: (error) => { console.log(error.message); } }); } } @NgModule({ imports: [ // ... DxPivotGridModule ], // ... })
<dx-pivot-grid [dataSource]="pivotGridDataSource"> </dx-pivot-grid>
onLoadingChanged
jQuery
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ onLoadingChanged: function (isLoading) { // Your code goes here } }); $("#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({ onLoadingChanged: (isLoading) => { // Your code goes here } }); } } @NgModule({ imports: [ // ... DxPivotGridModule ], // ... })
<dx-pivot-grid [dataSource]="pivotGridDataSource"> </dx-pivot-grid>
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.
If you disable this option, the PivotGrid contains only the fields configured in the fields array. With this option enabled, these fields are accompanied by auto-generated fields, which do not belong to any area by default and are only available in the field chooser.
See Also
store
This option accepts one of the following:
Store instance
An XmlaStore, ArrayStore, LocalStore, ODataStore, or CustomStore instance.Store configuration object
An XmlaStore, ArrayStore, LocalStore, or ODataStore configuration object. Make sure to set the type option.Array
Assigning an array to the store option automatically creates an ArrayStore in the PivotGridDataSource.
jQuery
$(function() { var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ store: new DevExpress.data.XmlaStore({ // XmlaStore instance }) // ===== or ===== store: { type: "xmla", // XmlaStore configuration object } }); $("#pivotGridContainer").dxPivotGrid({ dataSource: pivotGridDataSource }); });
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; import XmlaStore from "devextreme/ui/pivot_grid/xmla_store"; import { DxPivotGridModule } from "devextreme-angular"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ store: new XmlaStore({ // XmlaStore instance }) // ===== or ===== store: { type: "xmla", // XmlaStore configuration object } }); } } @NgModule({ imports: [ // ... DxPivotGridModule ], // ... })
<dx-pivot-grid [dataSource]="pivotGridDataSource"> </dx-pivot-grid>
See the Use CustomStore topic for information on how to implement custom data access logic.
If you have technical questions, please create a support ticket in the DevExpress Support Center.