DevExtreme jQuery - PivotGridDataSource Methods
collapseAll(id)
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); pivotGridDataSource.collapseAll("Region");
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); this.pivotGridDataSource.collapseAll("Region"); } }
See Also
- expandAll(id)
- fields[].expanded
collapseHeaderItem(area, path)
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); // Collapses the second quarter of 2015 in the column area pivotGridDataSource.collapseHeaderItem("column", [2015, 2]);
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); // Collapses the second quarter of 2015 in the column area this.pivotGridDataSource.collapseHeaderItem("column", [2015, 2]); } }
See Also
- expandHeaderItem(area, path)
- fields[].expanded
createDrillDownDataSource(options)
Provides access to the facts that were used to calculate a specific summary value.
Name | Type | Description |
---|---|---|
columnPath |
A path to the cell with the summary value by columns. |
|
rowPath |
A path to the cell with the summary value by rows. |
|
dataIndex |
The index of the measure for which the summary value is calculated. |
|
maxRowCount |
Maximum number of facts to get. |
|
customColumns |
The field names to be included for each fact. |
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:
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); var drillDownDataSource = pivotGridDataSource.createDrillDownDataSource({ // Options are passed here }); drillDownDataSource.paginate(false); drillDownDataSource.load() .done(function (data) { // Process "data" here }) .fail(function (error) { // Handle the "error" here });
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; import DataSource from "devextreme/data/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; drillDownDataSource: DataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); this.drillDownDataSource = this.pivotGridDataSource.createDrillDownDataSource({ // Options are passed here }); this.drillDownDataSource.paginate(false); this.drillDownDataSource.load() .then( (data) => { /* Process "data" here */ }, (error) => { /* Handle the "error" here */ } ) } }
See Also
dispose()
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); pivotGridDataSource.dispose();
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); this.pivotGridDataSource.dispose(); } }
expandAll(id)
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); pivotGridDataSource.expandAll("Region");
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); this.pivotGridDataSource.expandAll("Region"); } }
See Also
- collapseAll(id)
- fields[].expanded
expandHeaderItem(area, path)
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); // Expands the second quarter of 2015 in the column area pivotGridDataSource.expandHeaderItem("column", [2015, 2]);
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); // Expands the second quarter of 2015 in the column area this.pivotGridDataSource.expandHeaderItem("column", [2015, 2]); } }
See Also
- collapseHeaderItem(area, path)
- fields[].expanded
field(id)
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // ... fields: [{ caption: "Sales", dataField: "amount", summaryType: "sum", area: "data" }] }); // The following commands return the same object pivotGridDataSource.field("Sales"); pivotGridDataSource.field("amount"); pivotGridDataSource.field(0);
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // ... fields: [{ caption: "Sales", dataField: "amount", summaryType: "sum", area: "data" }] }); // The following commands return the same object this.pivotGridDataSource.field("Sales"); this.pivotGridDataSource.field("amount"); this.pivotGridDataSource.field(0); } }
See Also
field(id, options)
Call the load() method to update the PivotGrid:
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // ... fields: [{ caption: "Sales", dataField: "amount", summaryType: "sum", area: "data" }] }); // Changes the "Sales" field's summaryType pivotGridDataSource.field("Sales", { summaryType: "avg" }); pivotGridDataSource.load();
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // ... fields: [{ caption: "Sales", dataField: "amount", summaryType: "sum", area: "data" }] }); // Changes the "Sales" field's summaryType this.pivotGridDataSource.field("Sales", { summaryType: "avg" }); this.pivotGridDataSource.load(); } }
fields()
Gets all the fields including those generated automatically.
All options of all the fields.
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); var pivotGridFields = pivotGridDataSource.fields();
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); let pivotGridFields = this.pivotGridDataSource.fields(); } }
See Also
fields(fields)
Specifies a new fields collection.
Call the load() method to update the PivotGrid:
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); pivotGridDataSource.fields([{ dataField: "region", area: "row" }, { dataField: "date", dataType: "date", area: "column" }, { dataField: "sales", summaryType: "sum", area: "data" }]); pivotGridDataSource.load();
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); this.pivotGridDataSource.fields([{ dataField: "region", area: "row" }, { dataField: "date", dataType: "date", area: "column" }, { dataField: "sales", summaryType: "sum", area: "data" }]); this.pivotGridDataSource.load(); } }
filter()
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // ... filter: ["age", ">", 18] }); var filterExpr = pivotGridDataSource.filter(); // returns ["age", ">", 18]
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // ... filter: ["age", ">", 18] }); let filterExpr = this.pivotGridDataSource.filter(); // returns ["age", ">", 18] } }
See Also
filter(filterExpr)
Call the load() method to update the PivotGrid:
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); pivotGridDataSource.filter(["age", ">", 18]); // or // pivotGridDataSource.filter("age", ">", 18); pivotGridDataSource.load();
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); this.pivotGridDataSource.filter(["age", ">", 18]); // or // this.pivotGridDataSource.filter("age", ">", 18); this.pivotGridDataSource.load(); } }
See Also
getAreaFields(area, collectGroups)
The area that contains the fields to get.
Pass true to return grouped fields in a single array entry or false to return them as separate entries.
The default value is false.
All the options of all the fields within the area.
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); var columnAreaFields = pivotGridDataSource.getAreaFields("column", true);
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); let columnAreaFields = this.pivotGridDataSource.getAreaFields("column", true); } }
See Also
getData()
Gets the loaded data. Another data portion is loaded every time a header item is expanded.
This method returns an object with the following structure:
{ 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 }
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 thevalues
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:
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.
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.
pivotGridDataSource.field(/* measure name */, { area: "data" });
See Also
load()
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
jQuery
var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({ // PivotGridDataSource is configured here }); pivotGridDataSource.load() .done(function (data) { // Process "data" here }) .fail(function (error) { // Handle the "error" here });
Angular
import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source"; // ... export class AppComponent { pivotGridDataSource: PivotGridDataSource; constructor() { this.pivotGridDataSource = new PivotGridDataSource({ // PivotGridDataSource is configured here }); this.pivotGridDataSource.load() .then( (data) => { /* Process "data" here */ }, (error) => { /* Handle the "error" here */ } ) } }
See Also
reload()
Clears the loaded PivotGridDataSource data and calls the load() method.
A Promise that is resolved after data is loaded. It is a native Promise or a jQuery.Promise when you use jQuery.
state()
Use the returned object as an argument of the state(state) method to restore the pivot grid state.
state(state)
Use this method to restore the pivot grid state you have saved using the state() method earlier. You can return the widget to its default state by calling this method with the empty array or null argument
If you have technical questions, please create a support ticket in the DevExpress Support Center.