DevExtreme Angular - PivotGridDataSource Properties

This section describes properties that configure the PivotGridDataSource.

NOTE

The PivotGridDataSource allows specifying CustomStore properties in its configuration object, as shown in the following code:

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
  • }
  • })
  • });
  • }
  • }

fields[]

Configures pivot grid fields.

Type:

Array<Object>

Default Value: undefined

This property 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 property. Fields with the specified area property are displayed in the pivot grid; other fields' headers are displayed in the field chooser.

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({
  • // ...
  • 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 property 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.

View Demo

See Also

filter

Specifies data filtering conditions. Cannot be used with an XmlaStore.

Possible variants:

  • Binary filter
    Supported operators: "=", "<>", ">", ">=", "<", "<=", "startswith", "endswith", "contains", "notcontains".
    Example:

    • [ "dataField", "=", 3 ]
  • Unary filter
    Supported operators: binary operators, "!".
    Example:

    • [ "!", [ "dataField", "=", 3 ] ]
  • Complex filter
    Supported operators: binary and unary operators, "and", "or".
    Example:

    • [
    • [ "dataField", "=", 10 ],
    • "and",
    • [
    • [ "anotherDataField", "<", 3 ],
    • "or",
    • [ "anotherDataField", ">", 11 ]
    • ]
    • ]
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({
  • // ...
  • filter: [ "date", "startswith", "2014" ]
  • });
  • }
  • }
  •  
  • @NgModule({
  • imports: [
  • // ...
  • DxPivotGridModule
  • ],
  • // ...
  • })
  • <dx-pivot-grid
  • [dataSource]="pivotGridDataSource">
  • </dx-pivot-grid>
See Also

onChanged

A function that is executed after data is successfully loaded.

Type:

Function

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({
  • 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.

Type:

Function

Function parameters:

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({
  • onFieldsPrepared: (fields) => {
  • // Your code goes here
  • }
  • });
  • }
  • }
  •  
  • @NgModule({
  • imports: [
  • // ...
  • DxPivotGridModule
  • ],
  • // ...
  • })
  • <dx-pivot-grid
  • [dataSource]="pivotGridDataSource">
  • </dx-pivot-grid>

onLoadError

A function that is executed when data loading fails.

Type:

Function

Function parameters:
error:

Object

The error.

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({
  • onLoadError: (error) => {
  • console.log(error.message);
  • }
  • });
  • }
  • }
  •  
  • @NgModule({
  • imports: [
  • // ...
  • DxPivotGridModule
  • ],
  • // ...
  • })
  • <dx-pivot-grid
  • [dataSource]="pivotGridDataSource">
  • </dx-pivot-grid>

onLoadingChanged

A function that is executed when the data loading status changes.

Type:

Function

Function parameters:
isLoading:

Boolean

Indicates whether data is being loaded.

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({
  • onLoadingChanged: (isLoading) => {
  • // Your code goes here
  • }
  • });
  • }
  • }
  •  
  • @NgModule({
  • imports: [
  • // ...
  • DxPivotGridModule
  • ],
  • // ...
  • })
  • <dx-pivot-grid
  • [dataSource]="pivotGridDataSource">
  • </dx-pivot-grid>

paginate

Specifies whether the PivotGridDataSource should load data in portions. Can be used only with an XmlaStore.

Type:

Boolean

Default Value: false

Paging has the following specifics:

View Demo

remoteOperations

Specifies whether the data processing operations (filtering, grouping, summary calculation) should be performed on the server.

Type:

Boolean

Default Value: false

If you enable this property, the PivotGrid sends several requests to load data. At first launch, the UI component sends a request to get the data structure. It contains the following loadOptions:

JavaScript
  • {
  • skip: 0,
  • take: 20
  • }

The server should return an array of data objects. It may contain a single object if this object reflects the entire data structure.

Subsequent requests are different and contain the following loadOptions:

JavaScript
  • {
  • filter: [
  • [ "dataFieldName1", "operator", "value" ],
  • "and", // "or"
  • [ "dataFieldName2", "operator", "value" ],
  • // Filter for date fields
  • // The following date components are supported:
  • // year, month (from 1 to 12), day, dayOfWeek (from 0 to 6)
  • // ['dateField.year', '>', '2000'],
  • // "and", // "or"
  • // ['dateField.dayOfWeek', '=', '4']
  • // ...
  • ],
  • group: [
  • // Group expression for numbers
  • { selector: "dataFieldName1", groupInterval: 100, desc: false },
  • // Group expression for dates
  • { selector: "dataFieldName2", groupInterval: "year", desc: false },
  • { selector: "dataFieldName2", groupInterval: "month", desc: false },
  • // Group expression for strings
  • { selector: "dataFieldName3", desc: true },
  • // ...
  • ],
  • totalSummary: [
  • { selector: "dataFieldName1", summaryType: "sum" },
  • { selector: "dataFieldName2", summaryType: "min" },
  • // ...
  • ],
  • groupSummary: [
  • { selector: "dataFieldName1", summaryType: "sum" },
  • { selector: "dataFieldName2", summaryType: "min" },
  • // ...
  • ]
  • }

Refer to the Server-Side Data Processing article for more information on how DevExtreme components communicate with the server.

View Demo

See Also

retrieveFields

Specifies whether to auto-generate pivot grid fields from the store's data.

Type:

Boolean

Default Value: true

If you disable this property, the PivotGrid contains only the fields configured in the fields array. With this property 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

Configures the DataSource's underlying store.

Type:

Store

|

Store Configuration

|

XmlaStore

|

XmlaStore Configuration

|

Object

|

Array<Object>

This property 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 property.

  • Array
    Assigning an array to the store property automatically creates an ArrayStore in the PivotGridDataSource.

TypeScript
HTML
  • 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.