DevExtreme Angular - PivotGridDataSource - fields

Default Value: false

For example, a pivot grid row contains the following summary values split into three groups:

[ [1, 1, 1], [2, 2, 2], [3, 3, 3] ]

This row can be displayed differently depending on the allowCrossGroupCalculation option's value, provided that the running total is calculated by rows:

[ [1, 2, 3], [2, 4, 6], [3, 6, 9] ]    // allowCrossGroupCalculation: false
[ [1, 2, 3], [5, 7, 9], [12, 15, 18] ] // allowCrossGroupCalculation: true

allowExpandAll

Specifies whether a user can expand/collapse all items within the same column or row header level using the context menu.

Type:

Default Value: false

allowFiltering

Specifies whether a user can filter the field's values.

Type:

Default Value: false

When this option is set to true, the field's header in the field chooser and on the field panel is supplied with a filter icon. Clicking it invokes the header filter displaying all unique field values. A user applies filtering by selecting or clearing the selection of the values.

allowSorting

Specifies whether a user can change the field's sorting.

Type:

Default Value: false

When this option is set to true, clicking the field's header in the field chooser and on the field panel changes the sorting direction. An arrow icon in the header indicates the current sorting direction.

allowSortingBySummary

Specifies whether a user can sort the pivot grid by summary values instead of field values.

Type:

Default Value: false

When this option is set to true, a user can use a column header's or row header's context menu to sort the pivot grid by this column's or row's summary values.

area

Specifies the field's area.

Type:

Default Value: undefined

Accepted Values: undefined | 'column' | 'data' | 'filter' | 'row'

The field does not belong to any area if this option is undefined. However, the field's header is displayed in the field chooser, which enables the user to move this field to any area. In other cases, the field is displayed in the specified area.

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridArea enum. This enum accepts the following values: Row, Column, Data, and Filter.

areaIndex

Specifies the field's order among the other fields in the same area. Corresponds to the field's order in the fields array by default.

Type:

Default Value: undefined

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            dataField: "city",
            area: "row",
            areaIndex: 1
        }, {
            dataField: "country",
            area: "row",
            areaIndex: 0 // Countries nest cities
        },
        // ...
        ]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: "city",
                area: "row",
                areaIndex: 1
            }, {
                dataField: "country",
                area: "row",
                areaIndex: 0 // Countries nest cities
            },
            // ...
            ]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

NOTE

The field's order affects the headers's hierarchy structure and is not related to the sorting concept.

calculateCustomSummary

Specifies a custom aggregate function. Applies only if the summaryType is "custom". Cannot be used with an XmlaStore.

Type:

Function parameters:

options:

Information on the summary.

Object structure:

Name	Type	Description
summaryProcess	String	The summary value calculation stage: "start", "calculate", or "finalize".
value	any	A value to be aggregated.
totalValue	any	The total summary value.

Name

Type

Description

summaryProcess

The summary value calculation stage: "start", "calculate", or "finalize".

value

any

A value to be aggregated.

totalValue

any

The total summary value.

A summary value calculation is conducted in three stages: start, in which the totalValue is initialized, calculate, in which it is modified, and finalize, in which the totalValue is adjusted. To identify the current stage, check the value of the summaryProcess field that belongs to the function's parameter.

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            summaryType: "custom",
            calculateCustomSummary: function (options) {
                if (options.summaryProcess == "start") {
                    options.totalValue = 0;
                }
                if (options.summaryProcess == "calculate") {
                    options.totalValue += options.value;
                }
                if (options.summaryProcess == "finalize") {
                    options.totalValue = options.totalValue / 1000
                }
            }
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                // ...
                summaryType: "custom",
                calculateCustomSummary: function (options) {
                    if (options.summaryProcess == "start") {
                        options.totalValue = 0;
                    }
                    if (options.summaryProcess == "calculate") {
                        options.totalValue += options.value;
                    }
                    if (options.summaryProcess == "finalize") {
                        options.totalValue = options.totalValue / 1000
                    }
                }
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        // ...
        .Fields(fields => {
            fields.Add()
                // ...
                .SummaryType(SummaryType.Custom)
                .CalculateCustomSummary("calculateCustomSummary");
        })
    )
)

<script type="text/javascript">
    function calculateCustomSummary (options) {
        if (options.summaryProcess == "start") {
            options.totalValue = 0;
        }
        if (options.summaryProcess == "calculate") {
            options.totalValue += options.value;
        }
        if (options.summaryProcess == "finalize") {
            options.totalValue = options.totalValue / 1000
        }
    }
</script>

NOTE

The this keyword refers to the field's configuration.

calculateSummaryValue

Specifies a custom post-processing function for summary values.

Type:

Function parameters:

e:

Summary Cell

The cell whose summary value is being processed.

Return Value:

The cell's new summary value.

Default Value: undefined

This and other post-processing functions allow you to perform additional calculations on each summary value and take into account neighboring cells' summary values.

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            calculateSummaryValue: function (summaryCell) {
                // Your code goes here
            }
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                // ...
                calculateSummaryValue: function (summaryCell) {
                    // Your code goes here
                }
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        // ...
        .Fields(fields => {
            fields.Add()
                // ...
                .CalculateSummaryValue("calculateSummaryValue");
        })
    )
)

<script type="text/javascript">
    function calculateSummaryValue (summaryCell) {
        // Your code goes here
    }
</script>

NOTE

The this keyword refers to the field's configuration.

caption

Specifies the field's caption to be displayed in the field chooser and on the field panel.

Type:

Default Value: undefined

customizeText

Customizes the text displayed in summary cells.

Type:

Function parameters:

cellInfo:

Information on the current cell.

Object structure:

Name	Type	Description
value	String \| Number \| Date	The cell's raw value.
valueText	String	The formatted value converted to a string.

Name

Type

Description

value

|

|

Date

The cell's raw value.

valueText

The formatted value converted to a string.

Return Value:

The text for the cell to display.

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            customizeText: function (cellInfo) {
                // Your code goes here
            }
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                // ...
                customizeText: function (cellInfo) {
                    // Your code goes here
                }
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        // ...
        .Fields(fields => {
            fields.Add()
                // ...
                .CustomizeText("customizeText");
        })
    )
)

<script type="text/javascript">
    function customizeText (cellInfo) {
        // Your code goes here
    }
</script>

NOTE

The this keyword refers to the field's configuration.

dataField

Specifies which data source field provides data for the pivot grid field.

Type:

Default Value: undefined

dataType

Casts field values to a specific data type.

Type:

Default Value: undefined

Accepted Values: 'date' | 'number' | 'string'

If your data source stores, for example, numbers or dates as strings, specify the proper type using this option. Date-time values stored as strings should have one of the following formats: "yyyy/MM/dd", "yyyy/MM/dd HH:mm:ss", "yyyy-MM-ddTHH:mm:ssx", or "yyyy-MM-ddTHH:mm:ss".

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridDataType enum. This enum accepts the following values: String, Number, and Date.

displayFolder

Specifies the name of the folder in which the field is located when displayed in the field chooser.

Type:

Default Value: undefined

expanded

Specifies whether to expand all items within the field's header level.

Type:

Default Value: false

filterType

Specifies whether a user changes the current filter by including (selecting) or excluding (clearing the selection of) values.

Type:

Default Value: 'include'

Accepted Values: 'exclude' | 'include'

This option accepts the following values:

include
Values in the header filter are unselected initially. Users change the filter by selecting the values.
exclude
All values in the header filter are selected initially. Users changes the filter by clearing the selection of certain values.

When using the widget as an ASP.NET MVC Control, specify this option using the FilterType enum. This enum accepts the following values: Include and Exclude.

filterValues

Specifies the values by which the field is filtered.

Type:

Array<any>

Default Value: undefined

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            filterType: "exclude",
            filterValues: [[2015], [2016]]
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                // ...
                filterType: "exclude",
                filterValues: [[2015], [2016]]
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

format

Formats field values before they are displayed.

Type:

Format

Default Value: ''

See the format section for details on accepted values.

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            format: {
                type: "largeNumber",
                precision: 2
            },
            // ===== or a shorter version =====
            format: "largeNumber"
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                // ...
                format: {
                    type: "largeNumber",
                    precision: 2
                },
                // ===== or a shorter version =====
                format: "largeNumber"
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        // ...
        .Fields(fields => {
            fields.Add()
                // ...
                .Format(f => f
                    .Type(Format.LargeNumber)
                    .Precision(2)
                )
                // ===== or a shorter version =====
                .Format(Format.LargeNumber)
        })
    )
)

groupIndex

Specifies the field's index within its group.

Type:

Default Value: undefined

groupInterval

Specifies how the field's values are combined into groups for the headers. Cannot be used with an XmlaStore.

Type:

|

Default Value: undefined

Accepted Values: 'day' | 'dayOfWeek' | 'month' | 'quarter' | 'year'

If the field's values are dates, specify this option with one of the accepted string values.

If the field's values are numbers, specify this option with a number that designates a step with which groups should be generated.

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridGroupInterval enum. This enum accepts the following values: Year, Quarter, Month, DayOfWeek, and Day.

groupName

Specifies the name of the field's group.

Type:

Default Value: undefined

headerFilter

Configures the field's header filter.

Type:

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            allowFiltering: true,
            headerFilter: {
                allowSearch: true
            }
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                // ...
                allowFiltering: true,
                headerFilter: {
                    allowSearch: true
                }
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

isMeasure

Specifies whether the field should be treated as a measure (a field providing data for calculation).

Type:

Default Value: undefined

There are no restrictions for rearranging fields in the areas using the field chooser. However, we recommend restricting measures to the data area by setting their isMeasure option to true. You can also set this option to false for a non-measure field to prohibit placing it in the data area.

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            dataField: "sales",
            area: "data",
            isMeasure: true
        }, {
            dataField: "date",
            dataType: "date",
            area: "column",
            isMeasure: false
        },
        // ...
        ]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: "sales",
                area: "data",
                isMeasure: true
            }, {
                dataField: "date",
                dataType: "date",
                area: "column",
                isMeasure: false
            },
            // ...
            ]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

name

Specifies the field's identifier.

Type:

Default Value: undefined

Set this option to refer to the field in code, for example, when changing field options.

precision

Use the format.precision option instead.

Specifies a precision for formatted field values.

Type:

Default Value: undefined

runningTotal

Specifies whether to calculate the running total by rows or by columns.

Type:

Default Value: undefined

Accepted Values: 'column' | 'row'

For example, a pivot grid row contains the following summary values:

[ 3, 3, 3, 3, 3 ]

If the runningTotal option is set to "row", each value in this row is added to the previous value:

[ 3, 6, 9, 12, 15 ]

This also applies to columns if the runningTotal option is set to "column".

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridRunningTotalMode enum. This enum accepts the following values: Row and Column.

selector

Specifies a function that combines the field's values into groups for the headers. Cannot be used with an XmlaStore or remote operations.

Type:

Default Value: undefined

This function is an alternative to the groupInterval option and should return a group name that corresponds to a data object. The function's parameter represents this data object. For example, the selector function in the following code groups birth dates by decades:

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            caption: "Birth Decade",
            area: "column",
            selector: function (data) {
                var birthDate = new Date(data.birthDate);
                return Math.floor(birthDate.getFullYear() / 10) * 10;
            }
        }]
    });
});

Angular

TypeScript

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            // ...
            fields: [{
                caption: "Birth Decade",
                area: "column",
                selector: function (data) {
                    let birthDate = new Date(data.birthDate);
                    return Math.floor(birthDate.getFullYear() / 10) * 10;
                }
            }]
        });
    }
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        // ...
        .Fields(fields => {
            fields.Add()
                .Caption("Birth Decade")
                .Area(PivotGridArea.Column)
                .Selector("groupByDecade")
        })
    )
)

<script type="text/javascript">
    function groupByDecade (data) {
        var birthDate = new Date(data.birthDate);
        return Math.floor(birthDate.getFullYear() / 10) * 10;
    }
</script>

Another example: a selector that places values below and over 1000 into different groups:

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            caption: "Amount",
            area: "column",
            selector: function (data) {
                return data.amount > 1000 ? "> 1000" : "< 1000"
            }
        }]
    });
});

Angular

TypeScript

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            // ...
            fields: [{
                caption: "Amount",
                area: "column",
                selector: function (data) {
                    return data.amount > 1000 ? "> 1000" : "< 1000"
                }
            }]
        });
    }
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        // ...
        .Fields(fields => {
            fields.Add()
                .Caption("Amount")
                .Area(PivotGridArea.Column)
                .Selector("classifyValues")
        })
    )
)

<script type="text/javascript">
    function classifyValues (data) {
        return data.amount > 1000 ? "> 1000" : "< 1000"
    }
</script>

NOTE

The selector function cannot be used with remote operations. Instead, create a calculated data field on the server and bind a pivot grid field to it.

NOTE

The this keyword refers to the field's configuration.

showGrandTotals

Specifies whether to display the field's grand totals. Applies only if the field is in the data area.

Type:

Default Value: true

showTotals

Specifies whether to display the field's totals. Applies only if the field is in the data area.

Type:

Default Value: true

NOTE

Setting this option to false hides the field's totals and summary values - only the grand totals are displayed. Set the showValues option to true to display summary values.

showValues

Specifies whether to display the field's summary values. Applies only if the field is in the data area. Inherits the showTotals' value by default.

Type:

Default Value: undefined

sortBy

Specifies how the field's values in the headers should be sorted.

Type:

Default Value: undefined

Accepted Values: 'displayText' | 'value' | 'none'

Dimension attributes have a value and a display text. For example, a "Month" attribute's display text can be "January", "February", ..., "December"; its values can be 1, 2, ..., 12. "January" is first when sorting by values, and "April" is first when sorting by display text. No sorting is applied when setting the sortBy option to "none".

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridSortBy enum. This enum accepts the following values: DisplayText, Value, and None.

sortBySummaryField

Sorts the field's values in the headers by the specified measure's summary values. Accepts the measure's name, caption, dataField, or index in the fields array.

Type:

Default Value: undefined

This and the sortBySummaryPath options can be used together to sort the field's values by a specific column's or row's summary values. If sortBySummaryPath is unspecified, the field's values are sorted by the specified measure's grand totals, as it is with the Region field's values in the following code:

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            caption: "Sales",
            dataField: "sales",
            area: "data",
            isMeasure: true,
            summaryType: "sum"
        }, {
            caption: "Region",
            dataField: "region",
            area: "row",
            sortBySummaryField: "Sales"
        },
        // ...
        ]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                caption: "Sales",
                dataField: "sales",
                area: "data",
                isMeasure: true,
                summaryType: "sum"
            }, {
                caption: "Region",
                dataField: "region",
                area: "row",
                sortBySummaryField: "Sales"
            },
            // ...
            ]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

sortBySummaryPath

Specifies a path to the column or row whose summary values should be used to sort the field's values in the headers.

Type:

Array<Number | String>

Default Value: undefined

This and the sortBySummaryField options are applied together. If this option is not specified, the field's values are sorted by the grand totals of the measure that sortBySummaryField specifies.

In the following example, geographic regions displayed in the row header are sorted by sales in the second quarter of 2015:

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            caption: "Sales",
            dataField: "sales",
            area: "data",
            isMeasure: true,
            summaryType: "sum"
        }, {
            caption: "Date",
            dataField: "date",
            dataType: "date",
            area: "column"
        }, {
            caption: "Region",
            dataField: "region",
            area: "row",
            sortBySummaryField: "Sales",
            sortBySummaryPath: [2015, 2]
        }]
    });

    $("#pivotGridContainer").dxPivotGrid({
        dataSource: pivotGridDataSource
    });
});

Angular

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: [{
                caption: "Sales",
                dataField: "sales",
                area: "data",
                isMeasure: true,
                summaryType: "sum"
            }, {
                caption: "Date",
                dataField: "date",
                dataType: "date",
                area: "column"
            }, {
                caption: "Region",
                dataField: "region",
                area: "row",
                sortBySummaryField: "Sales",
                sortBySummaryPath: [2015, 2]
            }]
        });
    }
}

@NgModule({
    imports: [
        // ...
        DxPivotGridModule
    ],
    // ...
})

<dx-pivot-grid
    [dataSource]="pivotGridDataSource">
</dx-pivot-grid>

sortingMethod

Specifies a custom comparison function that sorts the field's values in the headers.

Type:

Function parameters:

a:

A field value to be compared.

Object structure:

Name	Type	Description
value	String \| Number	The field value.
children	Array<any>	The field value's children; available only when the corresponding header item is expanded.

Name

Type

Description

value

|

The field value.

children

Array<any>

The field value's children; available only when the corresponding header item is expanded.

b:

A field value to be compared.

Object structure:

Name	Type	Description
value	String \| Number	The field value.
children	Array<any>	The field value's children; available only when the corresponding header item is expanded.

Name

Type

Description

value

|

The field value.

children

Array<any>

The field value's children; available only when the corresponding header item is expanded.

Return Value:

Specifies whether a goes before b.

Default Value: undefined

This function accepts two field values and should return a number indicating their sort order:

Less than zero
a goes before b.
Zero
a and b remain unchanged relative to each other.
Greater than zero
a goes after b.

Inside this function, you can access the field's configuration using the this keyword:

jQuery

JavaScript

$(function() {
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
        fields: [{
            // ...
            sortingMethod: function (a, b) {
                var fieldSortOrder = this.sortOrder;
                // ...
            }
        },
        // ...
        ]
    });
});

Angular

TypeScript

import PivotGridDataSource from "devextreme/ui/pivot_grid/data_source";
// ...
export class AppComponent {
    pivotGridDataSource: PivotGridDataSource;
    constructor() {
        this.pivotGridDataSource = new PivotGridDataSource({
            // ...
            fields: [{
                // ...
                sortingMethod: function (a, b) {
                    let fieldSortOrder = this.sortOrder;
                    // ...
                }
            },
            // ...
            ]
        });
    }
}

ASP.NET MVC Controls

Razor C#

@(Html.DevExtreme().PivotGrid()
    .DataSource(ds => ds
        // ...
        .Fields(fields => {
            fields.Add()
                // ...
                .SortingMethod("sortingMethod");
        })
    )
)

<script type="text/javascript">
    function sortingMethod (a, b) {
        var fieldSortOrder = this.sortOrder;
        // ...
    }
</script>

NOTE

The this keyword refers to the field's configuration.

sortOrder

Specifies the field values' sorting order.

Type:

Default Value: 'asc'

Accepted Values: 'asc' | 'desc'

When using the widget as an ASP.NET MVC Control, specify this option using the SortOrder enum. This enum accepts the following values: Asc and Desc.

summaryDisplayMode

Specifies a predefined post-processing function. Does not apply when the calculateSummaryValue option is set.

Type:

Default Value: undefined

Post-processing functions allow you to perform additional calculations on each summary value and take into account neighboring cells' summary values.

The following list describes the available post-processing functions. These functions apply to one summary value at a time. This value is referred to as the "current value" in the descriptions.

"absoluteVariation"
Calculates the absolute difference between the current and previous value in a row. Starts from the second value in the row because the first does not have a previous value.
"percentVariation"
Same as the absolute variation, but the difference is calculated as a percentage.
"percentOfColumnTotal"
Calculates the current value as a percentage in one of the column's intermediate totals or the column's grand total when there are no expanded rows.
"percentOfRowTotal"
Calculates the current value as a percentage in one of the row's intermediate totals or the row's grand total when there are no expanded columns.
"percentOfColumnGrandTotal"
Calculates the current value as a percentage in the column's grand total.
"percentOfRowGrandTotal"
Calculates the current value as a percentage in the row's grand total.
"percentOfGrandTotal"
Calculates the current value as a percentage in the grand total of the entire pivot grid.

You can implement the capability to select the post-processing function at runtime using instructions from the Runtime Summary Type Selection article.

To specify a custom post-processing function, use the calculateSummaryValue option.

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridSummaryDisplayMode enum. This enum accepts the following values: AbsoluteVariation, PercentVariation, PercentOfColumnTotal, PercentOfRowTotal, PercentOfColumnGrandTotal, PercentOfRowGrandTotal, and PercentOfGrandTotal.

summaryType

Specifies how to aggregate the field's data. Cannot be used with an XmlaStore.

Type:

Default Value: 'count'

Accepted Values: 'avg' | 'count' | 'custom' | 'max' | 'min' | 'sum'

The summary type defines how to calculate the summary values that are displayed in the pivot grid's cells. The calculation is performed on a subset of facts that correspond to each field value in three areas (column, row, and filter).

The following list describes available summary types:

"sum"
Calculates the sum of all fact values.
"min"
Calculates the minimum fact value.
"max"
Calculates the maximum fact value.
"avg"
Calculates the average of all fact values.
"count"
Calculates the number of facts.
"custom"
Applies a custom aggregate function specified in the calculateCustomSummary option.

You can implement the capability to select the summary type at runtime using instructions from the Runtime Summary Type Selection article.

When using the widget as an ASP.NET MVC Control, specify this option using the SummaryType enum. This enum accepts the following values: Sum, Min, Max, Avg, Count, and Custom.

visible

Specifies whether the field is visible in the pivot grid and field chooser.

Type:

Default Value: true

width

Specifies the field's width in pixels when the field is displayed in the pivot grid.

Type:

Default Value: undefined

wordWrapEnabled

Specifies whether text that does not fit into a header item should be wrapped.

Type: