Methods

This section describes the methods that can be used to manipulate the PivotGrid widget.

beginUpdate()

Prevents the widget from refreshing until the endUpdate() method is called.

The beginUpdate() and endUpdate() methods prevent the widget from excessive updates when you are changing multiple widget settings at once. After the beginUpdate() method is called, the widget does not update its UI until the endUpdate() method is called.

bindChart(chart, integrationOptions)

Binds a Chart to the PivotGrid.

Parameters:

chart:

String

|

jQuery

|

Object

The Chart to be bound to the PivotGrid.
Accepts the Chart's instance, jQuery element or container selector.

integrationOptions:

Object

The Chart's configuration.

Object structure:

inverted:

Boolean

Default Value: false.
If true, row field values go to the chart arguments and column field values form series. If false - vice versa.

dataFieldsDisplayMode:

String

Default Value: "splitAxes".
Accepts one of the following values.

"singleAxis" - values of all data fields are displayed on a single value axis.
"splitAxes" - each data field gets an individual value axis. Applies only if putDataFieldsInto is "series".
"splitPanes" - each data field gets an individual pane. Applies only if putDataFieldsInto is "series".

Applies only if the PivotGrid contains several data fields.

putDataFieldsInto:

String

Default Value: "series".
Accepts one of the following values.

"args" - data fields go to the chart arguments.
"series" - data fields go to the chart series.

alternateDataFields:

Boolean

Default Value: true.
Specifies whether to alternate data fields in the resulting chart or not.
Applies only if the PivotGrid contains several data fields.

processCell:

function

Allows you to process cell data before the Chart visualizes it.

customizeChart:

function

Allows you to customize the Chart's appearance.

customizeSeries:

function

Allows you to customize the series.

Return Value:

function

| null

Unbinds the Chart. If null, then binding failed.

Main article: Integration with Chart

View Demo

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

Parameters:

rule:

Object

The component's default device options.

Object structure:

device:

Device

|

Array<Device>

|

function

Device parameters.
When specifying a function, get information about the current device from the argument. Return true if the options should be applied to the device.

options:

Object

Options to be applied.

The defaultOptions method is a static method supported by the widget class. The following code demonstrates how to specify default options for all instances of the PivotGrid widget in an application executed on the desktop.

jQuery

JavaScript

DevExpress.ui.dxPivotGrid.defaultOptions({ 
    device: { deviceType: "desktop" },
    options: {
        // Here go the PivotGrid options
    }
});

Angular

TypeScript

import PivotGrid from 'devextreme/ui/pivot_grid';
// ...
export class AppComponent {
    constructor () {
        PivotGrid.defaultOptions({
            device: { deviceType: "desktop" },
            options: {
                // Here go the PivotGrid options
            }
        });
    }
}

dispose()

Disposes of all the resources allocated to the PivotGrid instance.

The following code disposes of an PivotGrid instance that corresponds to the element ID (or reference variable in Angular) and removes the element from the DOM:

jQuery

JavaScript

$("#myPivotGrid").dxPivotGrid("dispose");
$("#myPivotGrid").remove();

Angular

HTML

<dx-pivot-grid #pivotGridVar id="myPivotGrid"></dx-pivot-grid>

TypeScript

import { ..., ViewChild } from "@angular/core";
import { DxPivotGridComponent } from "devextreme-angular";
// ...
export class AppComponent {
    @ViewChild("pivotGridVar") pivotGrid: DxPivotGridComponent;

    removePivotGrid (e) {
        this.pivotGrid.instance.dispose();
        document.getElementById("myPivotGrid").remove();
    }
}

element()

Gets the root widget element.

Return Value:

Element (jQuery or HTML)

An HTML element or a jQuery element when you use jQuery.

endUpdate()

Refreshes the widget after a call of the beginUpdate() method.

Main article: beginUpdate()

exportToExcel()

Exports pivot grid data to the Excel file.

focus()

Sets focus on the widget.

getDataSource()

Gets the PivotGridDataSource instance.

Return Value:

PivotGridDataSource

The PivotGridDataSource instance.

This method is commonly used to link the pivot grid with the PivotGridFieldChooser widget.

getFieldChooserPopup()

Gets the Popup instance of the field chooser window.

Return Value:

Popup

The Popup instance.

Use this method to show and hide the field chooser window programmatically. The code below demonstrates how you can display the field chooser from code.

JavaScript

pivotGrid.getFieldChooserPopup().show();

getInstance(element)

Gets the instance of a widget found using its DOM node.

Parameters:

element:

DOM Node

|

jQuery

The widget's container.

Return Value:

Object

The widget's instance.

The following code gets the PivotGrid instance found in an element with ID myPivotGrid:

// Modular approach
import PivotGrid from 'devextreme/ui/pivot_grid';
...
let element = document.getElementById("myPivotGrid");
let instance = PivotGrid.getInstance(element) as PivotGrid;

// Non-modular approach
let element = document.getElementById("myPivotGrid");
let instance = DevExpress.ui.dxPivotGrid.getInstance(element);