Angular PivotGrid Properties

This section describes the configuration options of the PivotGrid widget.

See Also

allowExpandAll

Allows an end-user to expand/collapse all header items within a header level.

Type:

Boolean

Default Value: false

With this option enabled, an end-user can right-click a header level and choose the corresponding context menu item to expand or collapse all header items within this level.

allowFiltering

Allows a user to filter fields by selecting or deselecting values in the popup menu.

Type:

Boolean

Default Value: false

A user can click a filter icon in the field chooser or field panel when this option is set to true to invoke a popup menu.

allowSorting

Allows an end-user to change sorting options.

Type:

Boolean

Default Value: false

With this option enabled, an end user can sort data by clicking the arrow icons in the field chooser or on the field panel.

allowSortingBySummary

Allows an end-user to sort columns by summary values.

Type:

Boolean

Default Value: false

With this option enabled, an end-user can use the context menu of a column or row header to apply sorting by summary values.

dataFieldArea

Specifies the area to which data field headers must belong.

Type:

String

Default Value: 'column'
Accepted Values: 'column' | 'row'

Data field headers appear only when more than one data field is visible. See the following image to spot the difference between the two settings of this option. DevExpress DevExtreme HTML5 PivotGrid

Use the PivotGridDataFieldArea enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Row and Column.

View Demo

dataSource

Binds the widget to data.

If you use DevExtreme ASP.NET MVC Controls, refer to the Bind Controls to Data article.

The PivotGrid is bound to data via the PivotGridDataSource, a component that allows you to sort, filter, group, and otherwise shape data. The PivotGridDataSource's underlying data access logic is isolated in the store. You use different store types for different data sources.

To bind the PivotGrid to data, assign a PivotGridDataSource to the widget's dataSource option. In the PivotGridDataSource, specify the store option depending on your data source as shown in the following list. In each case, also specify the fields[] array to configure pivot grid fields.

  • Data Array
    Assign the array to the store option. View Demo

  • OLAP Data
    Implement an XmlaStore. View Demo

  • Web API, PHP, MongoDB
    Use one of the following extensions to enable the server to process data according to the protocol DevExtreme widgets use:

    Then, use the createStore method to configure access to the server on the client as shown below. This method is part of DevExtreme.AspNet.Data.

    jQuery
    JavaScript
    $(function() {
        let serviceUrl = "https://url/to/my/service";
        $("#pivotGridContainer").dxPivotGrid({
            // ...
            dataSource: new DevExpress.data.PivotGridDataSource({
                store: DevExpress.data.AspNet.createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction"
                })
            })
        })
    });
    Angular
    app.component.ts
    app.component.html
    app.module.ts
    import { Component } from '@angular/core';
    import CustomStore from 'devextreme/data/custom_store';
    import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    
    @Component({
        selector: 'app-root',
        templateUrl: './app.component.html',
        styleUrls: ['./app.component.css']
    })
    export class AppComponent {
        store: CustomStore;
        constructor() {
            let serviceUrl = "https://url/to/my/service";
            this.pivotGridDataSource = new PivotGridDataSource({
                store: createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction"
                })
            })
        }
    }
    <dx-pivot-grid ...
        [dataSource]="pivotGridDataSource">
    </dx-pivot-grid>
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';
    
    import { DxPivotGridModule } from 'devextreme-angular';
    
    @NgModule({
        declarations: [
            AppComponent
        ],
        imports: [
            BrowserModule,
            DxPivotGridModule
        ],
        providers: [],
        bootstrap: [AppComponent]
    })
    export class AppModule { }
    Vue
    App.vue
    <template> 
        <DxPivotGrid ...
            :data-source="pivotGridDataSource" />
    </template>
    
    <script>
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
    import { DxPivotGrid } from 'devextreme-vue/pivot-grid';
    
    export default {
        components: {
            DxPivotGrid
        },
        data() {
            const serviceUrl = "https://url/to/my/service";
            const pivotGridDataSource = new PivotGridDataSource({
                store: createStore({
                    key: "ID",
                    loadUrl: serviceUrl + "/GetAction"
                })
            });
            return {
                pivotGridDataSource
            }
        }
    }
    </script>
    React
    App.js
    import React from 'react';
    import 'devextreme/dist/css/dx.common.css';
    import 'devextreme/dist/css/dx.light.css';
    
    import CustomStore from 'devextreme/data/custom_store';
    import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
    import { createStore } from 'devextreme-aspnet-data-nojquery';
    import PivotGrid from 'devextreme-react/pivot-grid';
    
    const serviceUrl = "https://url/to/my/service";
    const pivotGridDataSource = new PivotGridDataSource({
        store: createStore({
            key: "ID",
            loadUrl: serviceUrl + "/GetAction"
        })
    });
    
    class App extends React.Component {
        render() {
            return (
                <PivotGrid ...
                    dataSource={pivotGridDataSource} />
            );
        }
    }
    export default App;
  • Any other data source
    Implement a CustomStore.

You can call the getDataSource() method to access the PivotGridDataSource instance associated with the PivotGrid.

NOTE

Please review the following notes about data binding:

  • If the PivotGrid widget gets data from a server, enable remoteOperations to notify the widget that the server performs data processing operations.

  • Data field names should not contain the following characters: ., ,, :, [, and ].

  • PivotGridDataSource and stores provide methods to process and update data. However, the methods do not allow you to perform particular tasks (for example, replace the entire dataset, reconfigure data access at runtime). For such tasks, create a new PivotGridDataSource and assign it to the dataSource option as shown in the articles about changing options in jQuery, Angular, React, and Vue.

disabled

Specifies whether the widget responds to user interaction.

Type:

Boolean

Default Value: false

elementAttr

Specifies the attributes to be attached to the widget's root element.

Type:

Object

Default Value: {}

jQuery
$(function(){
    $("#pivotGridContainer").dxPivotGrid({
        // ...
        elementAttr: {
            id: "elementId",
            class: "class-name"
        }
    });
});
Angular
HTML
TypeScript
<dx-pivot-grid ...
    [elementAttr]="{ id: 'elementId', class: 'class-name' }">
</dx-pivot-grid>
import { DxPivotGridModule } from "devextreme-angular";
// ...
export class AppComponent {
    // ...
}
@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})
ASP.NET MVC Controls
Razor C#
Razor VB
@(Html.DevExtreme().PivotGrid()
    .ElementAttr("class", "class-name")
    // ===== or =====
    .ElementAttr(new {
        @id = "elementId",
        @class = "class-name"
    })
    // ===== or =====
    .ElementAttr(new Dictionary<string, object>() {
        { "id", "elementId" },
        { "class", "class-name" }
    })

)
@(Html.DevExtreme().PivotGrid() _
    .ElementAttr("class", "class-name")
    ' ===== or =====
    .ElementAttr(New With {
        .id = "elementId",
        .class = "class-name"
    })
    ' ===== or =====
    .ElementAttr(New Dictionary(Of String, Object) From {
        { "id", "elementId" },
        { "class", "class-name" }
    })
)

export

Configures client-side exporting.

Type:

Object

When exporting is enabled, the new "Export to Excel file" entity is added to the context menu. You can specify exporting options using this object.

NOTE
Client-side exporting requires the JSZip library. Learn where you can get it from topics in the Installation section.

fieldChooser

The Field Chooser configuration options.

Type:

Object

A field chooser is a pivot grid element that allows an end-user to configure data displayed in the pivot grid. To invoke the field chooser, right-click any pivot grid header and select the Show Field Chooser item. You can also display PivotGridFieldChooser as a separate widget.

View Demo

fieldPanel

Configures the field panel.

Type:

Object

The field panel is a component that displays the fields involved in the calculation of grid summaries. It consists of four field areas: column, row, data and filter. Each area holds fields of the corresponding type.

By default, the field panel is hidden. To make it visible, assign true to the visible property. To control the visibility of an individual field area, change the showColumnFields, showRowFields, showDataFields or showFilterFields property respectively.

The field panel partially covers the functionality provided by the field chooser. For example, the user can reorder fields within a single field area or even between them. This capability is controlled by the value of the allowFieldDragging property.

In addition, if the allowSorting and allowFiltering options are true, the user can apply sorting and filtering to fields directly from the field panel.

View Demo

headerFilter

Configures the header filter feature.

Type:

Object

A header filter allows a user to filter individual field's values by including or excluding them from the applied filter. Clicking a header filter icon in the field chooser or the field panel invokes a popup menu displaying all the unique field values.

DevExtreme HTML5 JavaScript jQuery Angular Knockout Widget Pivot Grid Header Filter

Assign true to the allowFiltering option to make the icons visible. To customize a specific field's header filter, use the field's headerFilter object.

The user's filtering preferences are saved in the filterValues option. The header filter's Select All checkbox changes the filterType option.

See Also

height

Specifies the widget's height.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's height.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The height in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    height: function() {
        return window.innerHeight / 1.5;
    }

hideEmptySummaryCells

Specifies whether or not to hide rows and columns with no data.

Type:

Boolean

Default Value: true

hint

Specifies text for a hint that appears when a user pauses on the widget.

Type:

String

Default Value: undefined

loadPanel

Specifies options configuring the load panel.

Type:

Object

When PivotGrid operates with a large number of records or uses a remote storage as a data source, loading data takes time. As data is being prepared, PivotGrid displays a load panel.

The load panel consists of a pane, a loading indicator and a text. You can specify whether the pane or loading indicator must be displayed using the showPane or showIndicator options respectively. The text displayed by the load panel can be specified using the text option. Also, you can change the height or width of the load panel using the corresponding options of the loadPanel configuration object.

Since the grid load panel is practically the DevExtreme LoadPanel widget, you can specify any option belonging to this widget in the loadPanel object.

onCellClick

A function that is executed when a pivot grid cell is clicked or tapped.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
area

String

The area to which the clicked cell belongs.

cancel

Boolean

Allows you to cancel field expansion.

cell

PivotGrid Cell

The cell properties.

cellElement

HTMLElement | jQuery

The cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

columnFields

Array<PivotGrid Field>

The column area's fields.

columnIndex

Number

The index of the column to which the clicked cell belongs.

component

PivotGrid

The widget instance.

dataFields

Array<PivotGrid Field>

The data area's fields.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

event

Event (jQuery or EventObject)

The event that caused the function to execute. It is a dxEvent or a jQuery.Event when you use jQuery.

jQueryEvent

jQuery.Event

Use 'event' instead.

The jQuery event that caused the handler execution. Deprecated in favor of the event field.

model

Object

The model data. Available only if Knockout is used.

rowFields

Array<PivotGrid Field>

The row area's fields.

rowIndex

Number

The index of the row to which the clicked cell belongs.

Default Value: null

onCellPrepared

A function that is executed after a pivot grid cell is created.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
area

String

The area to which the prepared cell belongs.

cell

PivotGrid Cell

The cell properties.

cellElement

HTMLElement | jQuery

The prepared cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

columnIndex

Number

The position of a cell's column.

component

PivotGrid

The widget instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if Knockout is used.

rowIndex

Number

The position of a cell's row.

Default Value: null

onContentReady

A function that is executed when the widget's content is ready and each time the content is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

PivotGrid

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only when using Knockout.

Default Value: null

onContextMenuPreparing

A function that is executed before the context menu is rendered.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
area

String

The clicked area's type.

cell

PivotGrid Cell

The cell that has been clicked to invoke the context menu.
Unavailable for fields in the field panel.

cellElement

HTMLElement | jQuery

The clicked cell's container. It is an HTML Element or a jQuery Element when you use jQuery.

Unavailable for fields in the field panel.

columnFields

Array<PivotGrid Field>

Fields in the "column" area.

columnIndex

Number

The index of the column to which the clicked cell belongs.
Unavailable for fields in the field panel.

component

PivotGrid

The widget's instance.

dataFields

Array<PivotGrid Field>

Fields in the "data" area.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

field

PivotGrid Field

This field's configuration.
Available for fields in the field panel only.

items

Array<Object>

An array of items to be displayed by the context menu. The item objects must have the fields that are used by the ContextMenu default item template.

model

Object

The model data. Available only if Knockout is used.

rowFields

Array<PivotGrid Field>

Fields in the "row" area.

rowIndex

Number

The index of the row to which the clicked cell belongs.
Unavailable for fields in the field panel.

Default Value: null

onDisposing

A function that is executed before the widget is disposed of.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

PivotGrid

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if you use Knockout.

Default Value: null

onExported

A function that is executed after data is exported.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

PivotGrid

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

model

Object

The model data. Available only if Knockout is used.

Default Value: null

onExporting

A function that is executed before data is exported.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel exporting.

component

PivotGrid

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

fileName

String

The name of the file to which data is about to be exported.

model

Object

The model data. Available only if Knockout is used.

Default Value: null

onFileSaving

A function that is executed before a file with exported data is saved to the user's local storage.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
cancel

Boolean

Allows you to cancel file saving.

component

PivotGrid

The widget's instance.

data

BLOB

Exported data as a BLOB.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

fileName

String

The name of the file to be saved.

format

String

The format of the file to be saved. Equals 'EXCEL' for an Excel file.

Default Value: null

onInitialized

A function used in JavaScript frameworks to save the widget instance.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
component

PivotGrid

The widget's instance.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

Default Value: null

See Also

onOptionChanged

A function that is executed after a widget option is changed.

Type:

Function

Function parameters:
e:

Object

Information about the event.

Object structure:
Name Type Description
model

Object

The model data. Available only if you use Knockout.

fullName

String

The path to the modified option that includes all parent options.

element

HTMLElement | jQuery

The widget's container. It is an HTML Element or a jQuery Element when you use jQuery.

component

PivotGrid

The widget's instance.

name

String

The modified option if it belongs to the first level. Otherwise, the first-level option it is nested into.

value any

The modified option's new value.

Default Value: null

rowHeaderLayout

Specifies the layout of items in the row header.

Type:

String

Default Value: 'standard'
Accepted Values: 'standard' | 'tree'

Frequently, items in the row header have a hierarchical structure. By default, these items are arranged in a line occupying a significant amount of space. If the area assigned to PivotGrid is limited, use a more compact tree layout. The image below illustrates the difference between standard and tree layouts. DevExpress DevExtreme HTML5 PivotGrid

Use the PivotGridRowHeadersLayout enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Standard and Tree.

View Demo

rtlEnabled

Switches the widget to a right-to-left representation.

Type:

Boolean

Default Value: false

When this option is set to true, the widget text flows from right to left, and the layout of elements is reversed. To switch the entire application/site to the right-to-left representation, assign true to the rtlEnabled field of the object passed to the DevExpress.config(config) method.

JavaScript
DevExpress.config({
    rtlEnabled: true
});
See Also

scrolling

A configuration object specifying scrolling options.

Type:

Object

The PivotGrid widget enables an end-user to scroll grid records. To specify required scrolling behavior, use the mode property of the scrolling configuration object.

View Demo

showBorders

Specifies whether the outer borders of the grid are visible or not.

Type:

Boolean

Default Value: false

showColumnGrandTotals

Specifies whether to display the Grand Total column.

Type:

Boolean

Default Value: true

Grand Total column displays the summary values of an entire row.

showColumnTotals

Specifies whether to display the Total columns.

Type:

Boolean

Default Value: true

Total columns show the summary values calculated for all previous hierarchy levels starting with the deepest expanded one.

showRowGrandTotals

Specifies whether to display the Grand Total row.

Type:

Boolean

Default Value: true

Grand Total row displays the summary values of an entire column.

showRowTotals

Specifies whether to display the Total rows. Applies only if rowHeaderLayout is "standard".

Type:

Boolean

Default Value: true

Total rows show the summary values calculated for all previous hierarchy levels starting with the deepest expanded one.

showTotalsPrior

Specifies where to show the total rows or columns. Applies only if rowHeaderLayout is "standard".

Type:

String

Default Value: 'none'
Accepted Values: 'both' | 'columns' | 'none' | 'rows'

By default, total rows and columns are shown after data (columns at the right side, rows at the bottom). You can place total rows, total columns or both before data using this option.

Use the PivotGridTotalsDisplayMode enum to specify this option when the widget is used as an ASP.NET MVC 5 Control or a DevExtreme-Based ASP.NET Core Control. This enum accepts the following values: Rows, Columns, Both, and None.

stateStoring

A configuration object specifying options related to state storing.

Type:

Object

At runtime, end-users may adjust pivot grid settings to their needs. By default, these settings disappear when the pivot grid disposes (for example, on page reload) and the pivot grid appears in its original configuration. If user settings need to be saved and then restored, enable client-side state storing for the grid by setting the stateStoring.enabled option to true. The pivot grid state will be saved under a specified storage key. The saving operation is conducted after a certain amount of time has passed since the last change of the state. To specify the amount of time in milliseconds, use the savingTimeout option.

PivotGrid supports various types of state storing. The type of storage that will suit your needs best depends on the supposed lifetime of user-specified pivot grid settings. For more information about state storing types, refer to the type option description.

The PivotGridDataSource provides the state method. Use it to get or change the pivot grid state at runtime. Call this method without arguments to obtain the pivot grid state. When you need to set the pivot grid state, call this method with the state object as its argument. You can also return the widget to its default state by calling the state method with the empty object or null argument.

View Demo

tabIndex

Specifies the number of the element when the Tab key is used for navigating.

Type:

Number

Default Value: 0

The value of this option will be passed to the tabindex attribute of the HTML element that underlies the widget.

texts

Strings that can be changed or localized in the PivotGrid widget.

Type:

Object

visible

Specifies whether the widget is visible.

Type:

Boolean

Default Value: true

width

Specifies the widget's width.

Type:

Number

|

String

|

Function

Return Value:

Number

|

String

The widget's width.

Default Value: undefined

This option accepts a value of one of the following types:

  • Number
    The width in pixels.

  • String
    A CSS-accepted measurement of width. For example, "55px", "80%", "auto", "inherit".

  • Function
    A function returning either of the above. For example:

    JavaScript
    width: function() {
        return window.innerWidth / 1.5;
    }

wordWrapEnabled

Specifies whether long text in header items should be wrapped.

Type:

Boolean

Default Value: true

See Also
  • PivotGridDataSource.fields.wordWrapEnabled - applies word wrap to a specific field.