DevExtreme Vue - PivotGridDataSource Methods

This section describes methods that control the PivotGridDataSource.

collapseAll(id)

Collapses all header items of a field with the specified identifier.

Parameters:
id:

Number

|

String

The field's name, dataField, caption, or index in the fields array.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • pivotGridDataSource.collapseAll('Region');
  • },
  • // ...
  • }
  • </script>
See Also

collapseHeaderItem(area, path)

Collapses a specific header item.

Parameters:
area:

String

The area that contains the header item to collapse.

path:

Array<String | Number | Date>

A path to the header item.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • // Collapses the second quarter of 2015 in the column area
  • pivotGridDataSource.collapseHeaderItem('column', [2015, 2]);
  • },
  • // ...
  • }
  • </script>
See Also

createDrillDownDataSource(options)

Provides access to the facts that were used to calculate a specific summary value.

Parameters:
options:

Object

Configuration object.

Object structure:
Name Type Description
columnPath

Array<String | Number | Date>

A path to the cell with the summary value by columns.

customColumns

Array<String>

The field names to be included for each fact.

dataIndex

Number

The index of the measure for which the summary value is calculated.

maxRowCount

Number

Maximum number of facts to get.

rowPath

Array<String | Number | Date>

A path to the cell with the summary value by rows.

Return Value:

DataSource

A drill-down data source.

NOTE

Data in the drill-down data source is paginated by default. Only the items on the first page are loaded when you call the load() method. To get all the items, turn the pagination off:

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • this.drillDownDataSource = pivotGridDataSource.createDrillDownDataSource({
  • // Options are passed here
  • });
  •  
  • this.drillDownDataSource.paginate(false);
  •  
  • this.drillDownDataSource.load()
  • .then(
  • (data) => { /* Process "data" here */ },
  • (error) => { /* Handle the "error" here */ }
  • )
  • },
  • // ...
  • }
  • </script>

View Demo View on GitHub

See Also

dispose()

Disposes of all the resources allocated to the PivotGridDataSource instance.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • beforeDestroy() {
  • pivotGridDataSource.dispose();
  • },
  • // ...
  • }
  • </script>
NOTE
Do not call this method if the UI component created the PivotGridDataSource instance.

expandAll(id)

Expands all the header items of a field with the specified identifier.

Parameters:
id:

Number

|

String

The field's name, caption, dataField, or index in the fields array.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • pivotGridDataSource.expandAll('Region');
  • },
  • // ...
  • }
  • </script>
See Also

expandHeaderItem(area, path)

Expands a specific header item.

Parameters:
area:

String

The area that contains the header item to expand.

path:

Array<Object>

A path to the header item.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • // Expands the second quarter of 2015 in the column area
  • pivotGridDataSource.expandHeaderItem('column', [2015, 2]);
  • },
  • // ...
  • }
  • </script>
See Also

field(id)

Gets all the properties of a field with the specified identifier.

Parameters:
id:

Number

|

String

The field's name, caption, dataField, or index in the fields array.

Return Value:

Object

The field's options.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // ...
  • fields: [{
  • caption: 'Sales',
  • dataField: 'amount',
  • summaryType: 'sum',
  • area: 'data'
  • }]
  • });
  •  
  • export default {
  • mounted() {
  • // The following commands return the same object
  • pivotGridDataSource.field('Sales');
  • pivotGridDataSource.field('amount');
  • pivotGridDataSource.field(0);
  • },
  • // ...
  • }
  • </script>
See Also

field(id, options)

Updates field options' values.

Parameters:
id:

Number

|

String

The field's name, caption, dataField, or index in the fields array.

options:

Object

The options with their new values.

Call the load() method to update the PivotGrid:

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • // Changes the "Sales" field's summaryType
  • pivotGridDataSource.field('Sales', { summaryType: 'avg' });
  • pivotGridDataSource.load();
  • },
  • // ...
  • }
  • </script>

fields()

Gets all the fields including those generated automatically.

Return Value:

Array<PivotGrid Field>

All options of all the fields.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • this.pivotGridFields = pivotGridDataSource.fields();
  • },
  • // ...
  • }
  • </script>
See Also

fields(fields)

Specifies a new fields collection.

Parameters:

New fields.

Call the load() method to update the PivotGrid:

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • pivotGridDataSource.fields([{
  • dataField: 'region',
  • area: 'row'
  • }, {
  • dataField: 'date',
  • dataType: 'date',
  • area: 'column'
  • }, {
  • dataField: 'sales',
  • summaryType: 'sum',
  • area: 'data'
  • }]);
  •  
  • pivotGridDataSource.load();
  • },
  • // ...
  • }
  • </script>

filter()

Gets the filter property's value. Does not affect an XmlaStore.

Return Value:

Object

A filter expression.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // ...
  • filter: ['age', '>', 18]
  • });
  •  
  • export default {
  • mounted() {
  • this.filterExpr = pivotGridDataSource.filter(); // returns ["age", ">", 18]
  • },
  • // ...
  • }
  • </script>
See Also

filter(filterExpr)

Sets the filter property's value. Does not affect an XmlaStore.

Parameters:
filterExpr:

Object

A filter expression. Pass null to clear filtering settings.

Call the reload() method to update the PivotGrid:

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • pivotGridDataSource.filter(['age', '>', 18]);
  • // or
  • // pivotGridDataSource.filter('age', '>', 18);
  •  
  • pivotGridDataSource.reload();
  • },
  • // ...
  • }
  • </script>
See Also

getAreaFields(area, collectGroups)

Gets all the fields within an area.

Parameters:
area:

String

The area that contains the fields to get.

collectGroups:

Boolean

Pass true to return grouped fields in a single array entry or false to return them as separate entries.
The default value is false.

Return Value:

Array<PivotGrid Field>

All the options of all the fields within the area.

App.vue
  • <script>
  • import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';
  •  
  • const pivotGridDataSource = new PivotGridDataSource({
  • // PivotGridDataSource is configured here
  • });
  •  
  • export default {
  • mounted() {
  • this.columnAreaFields = pivotGridDataSource.getAreaFields('column', true);
  • },
  • // ...
  • }
  • </script>
See Also

getData()

Gets the loaded data. Another data portion is loaded every time a header item is expanded.

Return Value:

Object

The loaded data.

This method returns an object with the following structure:

JavaScript
  • {
  • rows: [{
  • index: /* Row 1 index */,
  • text: /* Row 1 caption */,
  • value: /* Row 1 value */
  • }, {
  • index: /* Row 2 index */,
  • text: /* Row 2 caption */,
  • value: /* Row 2 value */,
  • children: [{
  • index: /* Row 2.1 index */,
  • text: /* Row 2.1 caption */,
  • value: /* Row 2.1 value */,
  • children: [ /* Level 3 and deeper */ ]
  • },
  • // ...
  • ]
  • },
  • // ...
  • ],
  • columns: [{
  • index: /* Column 1 index */,
  • text: /* Column 1 caption */,
  • value: /* Column 1 value */
  • }, {
  • index: /* Column 2 index */,
  • text: /* Column 2 caption */,
  • value: /* Column 2 value */,
  • children: [{
  • index: /* Column 2.1 index */,
  • text: /* Column 2.1 caption */,
  • value: /* Column 2.1 value */,
  • children: [ /* Level 3 and deeper */ ]
  • },
  • // ...
  • ]
  • },
  • // ...
  • ],
  • values: [
  • [
  • [
  • /* Measure 1 summary value 1 */,
  • /* Measure 2 summary value 1 */,
  • // ...
  • ],
  • [
  • /* Measure 1 summary value 2 */,
  • /* Measure 2 summary value 2 */,
  • // ...
  • ],
  • // ...
  • ],
  • // ...
  • ],
  • grandTotalRowIndex: 0,
  • grandTotalColumnIndex: 0
  •  
  • }
NOTE
"Measure" refers to a pivot grid field in the data area.

The object mentioned above contains three arrays: rows, columns, and values. Objects in the rows and columns arrays describe header items in the row and column areas and contain the following fields:

  • index - the index of the row/column that contains the header item; used to find a summary value in the values array;
  • value - the field value from the data source that corresponds to the header item;
  • text - the header item's caption;
  • children - an optional array that contains lower-level header items.

The values array contains summary values. Each of them has three indexes. To get a summary value, use the following pattern:

JavaScript
  • var value = values[/* row index */][/* column index */][/* measure index */];

You can pass grandTotalRowIndex and grandTotalColumnIndex as row index and column index to get grand total values.

NOTE

If you use the XmlaStore and your data area is empty, this method returns the default measure values. They are hidden from the UI until you place the default measure in the data area using the field(id, options) method. The default measure is specified on the OLAP server.

JavaScript
  • pivotGridDataSource.field(/* measure name */, { area: "data" });
See Also

isLoading()

Checks whether the PivotGridDataSource is loading data.

Return Value:

Boolean

true if data is being loaded; otherwise false.

load()

Starts loading data.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

App.vue
  
<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const pivotGridDataSource = new PivotGridDataSource({
    // PivotGridDataSource is configured here
});

export default {
    mounted() {
        pivotGridDataSource.load()
            .then(
                (data) => { /* Process "data" here */ },
                (error) => { /* Handle the "error" here */ }
            );
    },
    // ...
}
</script>
See Also

off(eventName)

Detaches all event handlers from a single event.

Parameters:
eventName:

String

The event's name.

Return Value:

PivotGridDataSource

The object for which this method is called.

See Also

off(eventName, eventHandler)

Detaches a particular event handler from a single event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

PivotGridDataSource

The object for which this method is called.

See Also

on(eventName, eventHandler)

Subscribes to an event.

Parameters:
eventName:

String

The event's name.

eventHandler:

Function

The event's handler.

Return Value:

PivotGridDataSource

The object for which this method is called.

Use this method to subscribe to one of the events listed in the Events section.

See Also

on(events)

Subscribes to events.

Parameters:
events:

Object

Events with their handlers: { "eventName1": handler1, "eventName2": handler2, ...}

Return Value:

PivotGridDataSource

The object for which this method is called.

Use this method to subscribe to several events with one method call. Available events are listed in the Events section.

See Also

reload()

Clears the loaded PivotGridDataSource data and calls the load() method.

Return Value:

Promise<any> (jQuery or native)

A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.

state()

Gets the current PivotGridDataSource state. Part of the PivotGrid UI component's state storing feature.

Return Value:

Object

The PivotGridDataSource state - fields configuration, filters, expanded headers, etc.

App.vue
  
<script>
import PivotGridDataSource from 'devextreme/ui/pivot_grid/data_source';

const pivotGridDataSource = new PivotGridDataSource({
    // PivotGridDataSource is configured here
});

export default {
    mounted() {
        // Get the state
        let pivotGridState = pivotGridDataSource.state();

        // Set the state
        pivotGridDataSource.state(pivotGridState);

        // Reset to the default state
        pivotGridDataSource.state({});
        // ===== or =====
        pivotGridDataSource.state(null);
    },
    // ...
}
</script>

View Demo

state(state)

Sets the PivotGridDataSource state. Part of the PivotGrid UI component's state storing feature.

Parameters:
state:

Object

The state returned by the state() method. Pass null to reset the state to default.

Refer to the state() method's description for an example.

View Demo