PivotGridFieldChooser

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

See Also

• Handle Events - jQuery
• Handle Events - AngularJS
• Handle Events - Knockout