Configuration

This section describes the configuration options of the PivotGrid widget.

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.

Show Example:
AngularJS
Knockout
jQuery

In this demo, the allowExpandAll option is set to true. Right-click any header level in the pivot grid to invoke the context menu that enables you to expand/collapse the corresponding header items.


                                    

                                    

In this demo, the allowExpandAll option is set to true. Right-click any header level in the pivot grid to invoke the context menu that enables you to expand/collapse the corresponding header items.


                                    

                                    

In this demo, the allowExpandAll option is set to true. Right-click any header level in the pivot grid to invoke the context menu that enables you to expand/collapse the corresponding header items.


                                    

                                    

allowFiltering

Allows an end-user to change filtering options.

Type: Boolean
Default Value: false

With this option enabled, an end user can filter data using the filter icons in the field chooser or on the field panel.

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to enable/disable the filtering feature. When this feature is enabled, invoke the field chooser and filter data using the filter icon of any row or column field there.


                                    

                                    

Use the switch below the pivot grid to enable/disable the filtering feature. When this feature is enabled, invoke the field chooser and filter data using the filter icon of any row or column field there.


                                    

                                    

Use the switch below the pivot grid to enable/disable the filtering feature. When this feature is enabled, invoke the field chooser and filter data using the filter icon of any row or column field there.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to enable/disable the sorting feature. When this feature is enabled, invoke the field chooser and sort data using the arrow icon of any row or column field there.


                                    

                                    

Use the switch below the pivot grid to enable/disable the sorting feature. When this feature is enabled, invoke the field chooser and sort data using the arrow icon of any row or column field there.


                                    

                                    

Use the switch below the pivot grid to enable/disable the sorting feature. When this feature is enabled, invoke the field chooser and sort data using the arrow icon of any row or column field there.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to enable/disable the capability to sort data by summary values. When this capability is enabled, right-click a row or column header to invoke the context menu that enables you to sort data by summary values held in this row or column.


                                    

                                    

Use the switch below the pivot grid to enable/disable the capability to sort data by summary values. When this capability is enabled, right-click a row or column header to invoke the context menu that enables you to sort data by summary values held in this row or column.


                                    

                                    

Use the switch below the pivot grid to enable/disable the capability to sort data by summary values. When this capability is enabled, right-click a row or column header to invoke the context menu that enables you to sort data by summary values held in this row or column.


                                    

                                    

dataFieldArea

Specifies the area to which data field headers must belong.

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

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

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

View Demo

dataSource

Specifies a data source for the pivot grid.

To provide data for a pivot grid, use the dataSource option. This option takes on one of the following.

  • An array of objects
    The fields of each object will be used to provide data for corresponding pivot grid fields.

  • A PivotGridDataSource or its Configuration Object
    The DataSource is an object that includes options for data sorting, grouping and filtering. The DataSource's underlying data access logic is isolated in a Store. Unlike the DataSource, a Store is a stateless object implementing a universal interface for reading and modifying data. If the Store type is not XmlaStore, the PivotGridDataSource also describes pivot grid fields.

For more information on how to implement a data source and bind it to your pivot grid, refer to the Data Binding topic.

View Demo

Show Example:
AngularJS
Knockout
jQuery

In this demo, an XmlaStore underlies the PivotGrid data source.


                                    

                                    

In this demo, an XmlaStore underlies the PivotGrid data source.


                                    

                                    

In this demo, an XmlaStore underlies the PivotGrid data source.


                                    

                                    

disabled

Specifies whether the widget responds to user interaction.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to enable/disable it.


                                    

                                    

Use the switch below the pivot grid to enable/disable it.


                                    

                                    

Use the switch below the pivot grid to enable/disable it.


                                    

                                    

elementAttr

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

Type: Object
Default Value: {}

You can configure this option in an ASP.NET MVC Control as follows:

Razor C#
Razor VB
@(Html.DevExtreme().WidgetName()
    .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().WidgetName() _
    .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 export.

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 export requires the JSZip library. Learn where you can get it from topics in the Installation section.
Show Example:
AngularJS
Knockout
jQuery

In this demo, click the export icon in the upper-left corner to export the pivot grid. [note] This example will not work in IE9 and Safari.


                                    

                                    

In this demo, click the export icon in the upper-left corner to export the pivot grid. [note] This example will not work in IE9 and Safari.


                                    

                                    

In this demo, click the export icon in the upper-left corner to export the pivot grid. [note] This example will not work in IE9 and Safari.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

In this demo, the field chooser is enabled. To invoke it, click the icon in the upper-left corner of the pivot grid.


                                    

                                    

In this demo, the field chooser is enabled. To invoke it, click the icon in the upper-left corner of the pivot grid.


                                    

                                    

In this demo, the field chooser is enabled. To invoke it, click the icon in the upper-left corner of the pivot grid.


                                    

                                    

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

height

Specifies the widget's height.

Return Value: Number|String

The widget height.

Default Value: undefined

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

  • Number
    The height of the widget in pixels.

  • String
    A CSS-accepted measurement of height. For example, "55px", "80%", "auto", "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.

Show Example:
AngularJS
Knockout
jQuery

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

Use the radio group below the pivot grid to change the loading indicator of the load panel. To invoke the load panel after making the change, click the "Reload Data" button. The loading indicators are created on the loading.io website.


                                    

                                    

onCellClick

A handler for the cellClick event.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout approach.

area: String

The area to which the clicked cell belongs.

cellElement: jQuery

The cell's container.

The cell object.

rowIndex: Number

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

columnIndex: Number

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

columnFields: Array

Fields of the column area.

rowFields: Array

Fields of the row area.

dataFields: Array

Fields of the data area.

jQueryEvent: jQuery.Event

The jQuery event.

cancel: Boolean

Set this field to true if you need to prevent the clicked field from expansion.

Default Value: null

The cellClick event fires when a user clicks a pivot grid cell. When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find data relating to the clicked cell.

onCellPrepared

A handler for the cellPrepared event.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout approach.

area: String

The area to which the prepared cell belongs.

cellElement: jQuery

The container of the prepared cell.

The cell object.

rowIndex: Number

The position of a cell's row.

columnIndex: Number

The position of a cell's column.

Default Value: null

The cellPrepared event fires after a cell has been rendered. When implementing a handling function for this event, use the object passed to this function as its parameter. Among the fields of this object, you can find data relating to the prepared cell.

onContentReady

A handler for the contentReady event. Executed when the widget's content is ready. This handler may be executed multiple times during the widget's lifetime depending on the number of times its content changes.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout approach.

Default Value: null

onContextMenuPreparing

A handler for the contextMenuPreparing event.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout approach.

items: Array

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.

area: String

The clicked area type.

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

cellElement: jQuery

The clicked cell's container.
NOTE: Unavailable for fields in the field panel.

columnIndex: Number

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

rowIndex: Number

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

dataFields: Array

Fields in the 'data' area.

rowFields: Array

Fields in the 'row' area.

columnFields: Array

Fields in the 'column' area.

field: Object

Options of the clicked field.
NOTE: Available for fields in the field panel only.

Default Value: null

Assign a function to perform a custom action before a context menu is displayed in the grid. For instance, you can change the set of items in the menu.

onDisposing

A handler for the disposing event. Executed when the widget is removed from the DOM using the remove(), empty(), or html() jQuery methods only.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

Default Value: null

onExported

A handler for the exported event.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout approach.

Default Value: null

Assign a function to perform a custom action after the exporting of grid data is completed.

onExporting

A handler for the exporting event.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

model: Object

Data that is available for binding against the element. Available only in the Knockout approach.

fileName: String

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

cancel: Boolean

Indicates whether or not to cancel exporting.

Default Value: null

Assign a function to perform a custom action before exporting grid data.

onFileSaving

A handler for the fileSaving event.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object

The widget instance.

element: jQuery

The widget's container.

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.

data: BLOB

Exported data as a BLOB.

cancel: Boolean

To cancel file saving, assign true to this parameter.

Default Value: null

Assign a function to perform a custom action before an Excel file with exported data will be saved on the user's local storage.

onInitialized

A handler for the initialized event. Executed only once, after the widget is initialized.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
element: jQuery

The widget's container.

Default Value: null

You cannot access elements in the widget because this handler is executed before they are ready. Use the onContentReady handler instead.

onOptionChanged

A handler for the optionChanged event. Executed after an option of the widget is changed.

Type: function
Function parameters:

Information about the event.

Object structure:
component: Object
name: String

A short name of the option whose value has been changed.

fullName: String

A full name of the option whose value has been changed; contains a full hierarchy of the option.

value: any

A new value for the option.

element: jQuery

The widget's container.

model: Object

The model data. Available only if you use Knockout.

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

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridRowHeadersLayout enum. 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
});

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

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to change the visibility of the grid borders.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the grid borders.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the grid borders.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to change the visibility of the Grand Total column.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Grand Total column.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Grand Total column.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to change the visibility of the Total columns.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Total columns.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Total columns.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to change the visibility of the Grand Total row.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Grand Total row.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Grand Total row.


                                    

                                    

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.

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to change the visibility of the Total rows.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Total rows.


                                    

                                    

Use the switch below the pivot grid to change the visibility of the Total rows.


                                    

                                    

showTotalsPrior

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

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

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.

When using the widget as an ASP.NET MVC Control, specify this option using the PivotGridTotalsDisplayMode enum. This enum accepts the following values: Rows, Columns, Both and None.

Show Example:
AngularJS
Knockout
jQuery

Use the select box below the pivot grid to change the position of total rows and/or total columns.


                                    

                                    

Use the select box below the pivot grid to change the position of total rows and/or total columns.


                                    

                                    

Use the select box below the pivot grid to change the position of total rows and/or total columns.


                                    

                                    

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

useNativeScrolling

Deprecated

Use the useNative option instead.

Type: String|Boolean

visible

Specifies whether the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the widget's width.

Return Value: Number|String

The widget width.

Default Value: undefined

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

  • Number
    The width of the widget 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.