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

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

The field chooser is already integrated in 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
    Use the dxPivotGridFieldChooser jQuery plug-in.

    <div id="fieldChooserContainer"></div>
    <div id="pivotGridContainer"></div>
        dataSource: pivotGridDataSource
  • Knockout
    Add a div element and apply the dxPivotGridFieldChooser binding to this element.

    <div data-bind="dxPivotGridFieldChooser: { dataSource: pivotGridDataSource }"></div>
  • AngularJS
    Add a div element and apply the dx-pivot-grid-field-chooser directive to this element.

    <div dx-pivot-grid-field-chooser="{ dataSource: pivotGridDataSource }"></div>

The pivot grid data source can be acquired from PivotGrid using the getDataSource() method as shown below.

var pivotGridDataSource = $('#pivotGridContainer').dxPivotGrid('instance').getDataSource();

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 Installation article.

To provide data for the PivotGridFieldChooser widget, specify the same dataSource as its PivotGrid has. The easiest way is to get the data source from the PivotGrid widget and assign it to the dataSource field.

View Demo


This section describes the configuration options of the PivotGridFieldChooser widget.


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


This section describes events fired by this widget.