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

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

You can add the dxPivotGridFieldChooser 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 dxPivotGrid 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 dxPivotGrid using the getDataSource() method as shown below.

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

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 dxPivotGridFieldChooser widget, specify the same dataSource as its dxPivotGrid has. The easiest way is to get the data source from the dxPivotGrid widget and assign it to the dataSource field.

View Demo


This section describes the configuration options of the dxPivotGridFieldChooser widget.


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


This section describes events fired by this widget.