PivotGrid

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

Included in: dx.web.js, dx.viz-web.js, dx.all.js
Module: ui/pivot_grid
Export: default
PivotGrid interactive configuration
Copy Code
Copy to Codepen
$("#pivotgrid").dxPivotGrid({
});

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

  • jQuery

    HTML
    <div id="pivotGrid"></div>
    JavaScript
    $(function () {
        $("#pivotGrid").dxPivotGrid({
            dataSource: {
                store: {
                    type: 'odata',
                    url: 'http://url/to/the/service',
                    key: 'OrderID',
                    keyType: 'Int32'
                },
                fields: [
                    { area: 'column', dataField: 'OrderDate', dataType: 'date' },
                    { area: 'row', dataField: 'ShipCountry' },
                    { area: 'row', dataField: 'ShipCity' },
                    { area: 'row', dataField: 'ShipName' },
                    { area: 'data', summaryType: 'count' }
                ]
            }
        });
    });
  • Angular

    HTML
    <dx-pivot-grid
        [dataSource]="{
            store: {
                type: 'odata',
                url: 'http://url/to/the/service',
                key: 'OrderID',
                keyType: 'Int32'
            },
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date'},
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }">
        </dx-pivot-grid>
  • AngularJS

    HTML
    <div dx-pivot-grid="{
        dataSource: {
            store: {
                type: 'odata',
                url: 'http://url/to/the/service',
                key: 'OrderID',
                keyType: 'Int32'
            },
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date'},
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>
  • Knockout

    HTML
    <div data-bind="dxPivotGrid: {
        dataSource: {
            store: {
                type: 'odata',
                url: 'http://url/to/the/service',
                key: 'OrderID',
                keyType: 'Int32'
            },
            fields: [
                { area: 'column', dataField: 'OrderDate', dataType: 'date' },
                { area: 'row', dataField: 'ShipCountry' },
                { area: 'row', dataField: 'ShipCity' },
                { area: 'row', dataField: 'ShipName' },
                { area: 'data', summaryType: 'count' }
            ]
        }
    }"></div>
  • ASP.NET MVC Wrappers

    Razor C#
    Razor VB
    @(Html.DevExtreme().PivotGrid()
        .ID("pivotGrid")
        .DataSource(ds => ds
            .Store(store => store.OData()
                .Url("http://url/to/the/service")
                .Key(new string[] { "OrderID" })
                .KeyType(EdmType.Int32)
            )
            .Fields(fields => {
                fields.Add().Area(PivotGridArea.Column)
                    .DataField("OrderDate")
                    .DataType(PivotGridDataType.Date);
                fields.Add().Area(PivotGridArea.Row).DataField("ShipCountry");
                fields.Add().Area(PivotGridArea.Row).DataField("ShipCity");
                fields.Add().Area(PivotGridArea.Row).DataField("ShipName");
                fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count);
            })
        )
    )
    @(Html.DevExtreme().PivotGrid() _
        .ID("pivotGrid") _
        .DataSource(Sub(ds)
            ds.Store(Function(store)
                Return store.OData() _
                    .Url("http://url/to/the/service") _
                    .Key(New String() { "OrderID" }) _
                    .KeyType(EdmType.Int32)
                End Function) _
            .Fields(Sub(fields)
                fields.Add().Area(PivotGridArea.Column) _
                    .DataField("OrderDate") _
                    .DataType(PivotGridDataType.Date)
                fields.Add().Area(PivotGridArea.Row).DataField("ShipCountry")
                fields.Add().Area(PivotGridArea.Row).DataField("ShipCity")
                fields.Add().Area(PivotGridArea.Row).DataField("ShipName")
                fields.Add().Area(PivotGridArea.Data).SummaryType(SummaryType.Count)
            End Sub)
        End Sub)
    )

Note that DevExtreme widgets require you to link the jQuery library 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 topics in the Installation section.

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

Start Tutorial View Demo Watch Video

Configuration

This section describes the configuration options of the PivotGrid widget.

Methods

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

Events

This section describes events fired by this widget.

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.