PivotGrid

The dxPivotGrid is a widget that allows you to display and analyze multi-dimensional data from a local storage or an OLAP cube.

PivotGrid interactive configuration
Copy Code
Copy to Codepen
$("#pivotgrid").dxPivotGrid({
});

                    

You can create the dxPivotGrid widget using one of the following approaches.

  • jQuery
    Use the dxPivotGrid jQuery plug-in.

    HTML
    <div id="pivotGridContainer"></div>
    JavaScript
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    });
  • Knockout
    Add a div element and apply the dxPivotGrid binding to this element.

    HTML
    <div data-bind="dxPivotGrid: {
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>
  • AngularJS
    Add a div element and apply the dx-pivot-grid directive to this element.

    HTML
    <div dx-pivot-grid="{
        dataSource: {
            store: orders,
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'year' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'quarter' },
                { area: 'column', dataField: 'OrderDate', dataType: 'date', groupInterval: 'month' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>

Note that DevExtreme widgets require you to link the jQuery and Globalize libraries to your application. If you use the Knockout or AngularJS approach, the Knockout or AngularJS library is also required. For detailed information on linking these libraries to your project, refer to the Installation article.

To provide data for the dxPivotGrid widget, specify a data source. dxPivotGrid accepts the PivotGridDataSource data source only. You can pass its configuration to the dataSource field without creating the separate PivotGridDataSource object as shown above.

View Demo

Watch Video

Configuration

This section describes the configuration options of the dxPivotGrid widget.

Name Description
allowExpandAll

Allows an end-user to expand/collapse all header items within a header level.

allowFiltering

Allows an end-user to change filtering options.

allowSorting

Allows an end-user to change sorting options.

allowSortingBySummary

Allows an end-user to sort columns by summary values.

dataSource

Specifies a data source for the pivot grid.

disabled

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

export

Specifies options for exporting pivot grid data.

fieldChooser

The Field Chooser configuration options.

focusStateEnabled

Specifies whether or not the widget can be focused.

height

Specifies the height of the widget.

hideEmptySummaryCells

Specifies whether or not to hide rows and columns with no data.

hint

Specifies the text of the hint displayed for the widget.

loadPanel

Specifies options configuring the load panel.

onCellClick

A handler for the cellClick event.

onCellPrepared

A handler for the cellPrepared event.

onContentReady

A handler for the contentReady event.

onContextMenuPreparing

A handler for the contextMenuPreparing event.

onDisposing

A handler for the disposing event.

onExported

A handler for the exported event.

onExporting

A handler for the exporting event.

onFileSaving

A handler for the fileSaving event.

onInitialized

A handler for the initialized event.

onOptionChanged

A handler for the optionChanged event.

rtlEnabled

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

scrolling

A configuration object specifying scrolling options.

showBorders

Specifies whether the outer borders of the grid are visible or not.

showColumnGrandTotals

Specifies whether to display the Grand Total column.

showColumnTotals

Specifies whether to display the Total columns.

showRowGrandTotals

Specifies whether to display the Grand Total row.

showRowTotals

Specifies whether to display the Total rows.

showTotalsPrior

Specifies where to show the total rows or columns.

stateStoring

A configuration object specifying options related to state storing.

tabIndex

Specifies the widget tab index.

texts

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

visible

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

width

Specifies the width of the widget.

Methods

This section describes the methods that can be used to manipulate the dxPivotGrid widget.

Name Description
beginUpdate()

Prevents the component from refreshing until the endUpdate method is called.

defaultOptions(rule)

Specifies the device-dependent default configuration options for this component.

element()

Returns the root HTML element of the widget.

endUpdate()

Enables the component to refresh after the beginUpdate method call.

exportToExcel()

Exports pivot grid data to the Excel file.

focus()

Sets focus on the widget.

getDataSource()

Gets the PivotGridDataSource instance.

getFieldChooserPopup()

Gets the dxPopup instance of the field chooser window.

instance()

Returns an instance of this component class.

off(eventName)

Detaches all event handlers from the specified event.

off(eventName, eventHandler)

Detaches a particular event handler from the specified event.

on(eventName, eventHandler)

Subscribes to a specified event.

on(events)

Subscribes to the specified events.

option()

Returns the configuration options of this component.

option(optionName)

Gets the value of the specified configuration option of this component.

option(optionName, optionValue)

Sets a value to the specified configuration option of this component.

option(options)

Sets one or more options of this component.

registerKeyHandler(key, handler)

Registers a handler when a specified key is pressed.

repaint()

Redraws the widget.

updateDimensions()

Updates the widget to the size of its content.

Events

This section describes events fired by this widget.

Name Description
cellClick

Fires when a user clicks a pivot grid cell.

cellPrepared

Fires after a cell has been rendered.

contentReady

Fires when widget content is ready.

contextMenuPreparing

Fires before displaying a context menu that is invoked on one of the pivot grid's header or row cells.

disposing

Fires when the widget is being removed.

exported

Fires after the exporting of grid data is completed.

exporting

Fires before exporting grid data.

fileSaving

Fires before the grid saves an Excel file with exported data on the user's local storage.

initialized

Fires when the widget is initialized.

optionChanged

Fires after an option of the component is changed.

Summary Cell

An object exposing methods that manipulate a summary cell and provide access to its neighboring cells.

Pivot Grid Cell

An object containing information about the pivot grid cell.