Configuration

This section describes the configuration options of the dxPivotGrid 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.

allowFiltering

Allows an end-user to change filtering options.

Type: Boolean
Default Value: false

With this option enabled, an end-user can filter pivot grid data using the filter icons in the Field Chooser.

allowSorting

Allows an end-user to change sorting options.

Type: Boolean
Default Value: false

With this option enabled, an end-user can sort pivot grid data by clicking the arrow icons in the Field Chooser.

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.

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.

disabled

A Boolean value specifying whether or not the widget can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the widget at runtime.

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 dxPivotGridFieldChooser as a separate widget.

focusStateEnabled

Specifies whether or not the widget can be focused.

Type: Boolean
Default Value: false

height

Specifies the height of the widget.

Type: Number|String|function
Return Value: Number|String

The widget height.

Default Value: undefined

The option can hold a value of the following types.

  • number
    The height of the widget in pixels

  • string
    A CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit")

  • function
    A function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; })

hint

Specifies the text of the hint displayed for the widget.

Type: String
Default Value: undefined

loadPanel

The Load panel configuration options.

Type: Object

A load panel is displayed until data is fully loaded to the pivot grid.

onCellClick

A handler for the cellClick event.

Type: function(e)
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 and AngularJS approaches.

area: String

The clicked area type.

cellElement: jQuery

The jQuery element of the clicked cell.

The clicked 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.

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(e)
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 and AngularJS approaches.

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.

onContextMenuPreparing

A handler for the contextMenuPreparing event.

Type: function(e)
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 and AngularJS approaches.

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 dxContextMenu default item template.

area: String

The clicked area type.

The cell that has been clicked to invoke the context menu.

cellElement: jQuery

The clicked cell's container.

columnIndex: Number

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

rowIndex: Number

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

dataFields: Array

Fields in the 'data' area.

rowFields: Array

Fields in the 'row' area.

columnFields: Array

Fields in the 'column' area.

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.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget instance.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

Default Value: null

onInitialized

A handler for the initialized event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget instance.

element: jQuery

An HTML element of the widget.

Default Value: null

Assign a function to perform a custom action when the widget is initialized.

onOptionChanged

A handler for the optionChanged event.

Type: function
Function parameters:

Provides function parameters.

Object structure:
component: Object

Provides access to the widget instance.

name: String

Specifies the name of the option whose value is changed.

fullName: String

Specifies a full name of the option whose value is changed. The full name is formed by concatenating the names of the options that are presented in the hierarchy of the given option. The names are delimited by commas.

value: any

Specifies a new value for the option.

element: jQuery

An HTML element of the widget.

model: Object

Provides access to the data that is available for binding against the element. Available only in the Knockout and AngularJS approaches.

Default Value: null

Assign a function to perform a custom action after an option of the component is changed.

rtlEnabled

Specifies whether or not the current component supports a right-to-left representation.

Type: Boolean
Default Value: false

If you need to switch the display of this DevExtreme component to right-to-left, enable a specifically designed configuration option - rtlEnabled. When this option is set to true, the text flows from right to left, and the layout the component's elements is reversed. To switch the entire application/site to a right-to-left representation, use the static DevExpress.rtlEnabled field.

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.

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.

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.

showRowTotals

Specifies whether to display the Total rows.

Type: Boolean
Default Value: true

Total rows show the summary values calculated for all previous hierarchy levels starting with the deepest expanded one.

tabIndex

Specifies the widget tab index.

Type: Number
Default Value: 0

texts

Strings that can be changed or localized in the dxPivotGrid widget.

Type: Object

useNativeScrolling

Specifies whether or not the widget uses native scrolling.

Type: String|Boolean
Default Value: 'auto'

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Return Value: Number|String

The widget width.

Default Value: undefined

The option can hold a value of the following types.

  • numeric
    The widget width in pixels.
  • string
    A CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit").
  • function
    The function returning the widget width. For example, see the following code.

    JavaScript
    width: function () { 
        return baseWidth - 10 + "%";
    }