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

See Also

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