PivotGrid

A data summarization widget for multi-dimensional data analysis and data mining.

dxPivotGrid is a widget that allows you to display and analyze multi-dimensional data from a local storage or an OLAP cube. The widget is shipped with its own PivotGridDataSource data source and an additional dxPivotGridFieldChooser widget that allows an end-user to manage data displayed in the dxPivotGrid.

You can create a 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>
  • Angular
    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 Angular approach, the Knockout or Angular library is also required.

See Also

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.

fieldChooser

The Field Chooser configuration options.

focusStateEnabled

Specifies whether or not the widget can be focused.

height

Specifies the height of the widget.

hint

Specifies the text of the hint displayed for the widget.

loadPanel

The Load panel configuration options.

onCellClick

A handler for the cellClick event.

onCellPrepared

A handler for the cellPrepared event.

onContextMenuPreparing

A handler for the contextMenuPreparing event.

onDisposing

A handler for the disposing 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.

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.

tabIndex

Specifies the widget tab index.

texts

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

useNativeScrolling

Specifies whether or not the widget uses native scrolling.

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.

focus()

Sets focus on the widget.

getDataSource()

Gets the PivotGridDataSource instance.

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 exposed by this widget.

Name Description
cellClick

Fires when a user clicks a pivot grid cell.

cellPrepared

Fires after a cell has been rendered.

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.

initialized

Fires when the widget is initialized.

optionChanged

Fires after an option of the component is changed.

Pivot Grid Cell

An object containing information about the pivot grid cell.