PivotGridFieldChooser

A complementary widget for the PivotGrid that allows you to manage data displayed in the PivotGrid.

Included in: dx.web.js, dx.viz-web.js, dx.all.js
Export: default

The field chooser is already integrated in the PivotGrid and can be invoked using the context menu. If you need to continuously display the field chooser near the PivotGrid widget, use the PivotGridFieldChooser widget.

You can add the PivotGridFieldChooser widget using one of the following approaches.

  • jQuery

    HTML
    JavaScript
    <div id="fieldChooser"></div>
    <div id="pivotGrid"></div>
    var pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
        // ...
    });
    $(function () {
        $("#fieldChooser").dxPivotGridFieldChooser({
            dataSource: pivotGridDataSource
        });
        $("#pivotGrid").dxPivotGrid({
            dataSource: pivotGridDataSource
        });
    });
  • Angular

    HTML
    JavaScript
    <dx-pivot-grid-field-chooser [dataSource]="pivotGridDataSource"></dx-pivot-grid-field-chooser>
    <dx-pivot-grid [dataSource]="pivotGridDataSource"></dx-pivot-grid>
    export class AppComponent {
        pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
            // ...   
        });
    }
  • AngularJS

    HTML
    JavaScript
    <div ng-controller="DemoController">
        <div dx-pivot-grid-field-chooser="{
            dataSource: pivotGridDataSource
        }"></div>
        <div dx-pivot-grid="{
            dataSource: pivotGridDataSource
        }"></div>
    </div>
    angular.module('DemoApp', ['dx'])
        .controller("DemoController", function ($scope) {
            $scope.pivotGridDataSource = new DevExpress.data.PivotGridDataSource({
                // ...   
            });
        });
  • Knockout

    HTML
    JavaScript
    <div data-bind="dxPivotGridFieldChooser: {
        dataSource: pivotGridDataSource
    }"></div>
    <div data-bind="dxPivotGrid: {
        dataSource: pivotGridDataSource  
    }"></div>
    var viewModel = {
        pivotGridDataSource: new DevExpress.data.PivotGridDataSource({
            // ...
        })
    };
    ko.applyBindings(viewModel);

Both the PivotGridFieldChooser and the PivotGrid must be bound to one and the same instance of the PivotGridDataSource. Create the PivotGridDataSource individually and then assign it to both widgets as shown in the code above.

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.

View Demo

Configuration

This section describes the configuration options of the PivotGridFieldChooser widget.

Methods

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

Events

This section describes events fired by this widget.