DevExtreme v23.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Free Trial Buy
    Your search did not match any results.
    Pivot Grid

    Integrated Field Chooser

    The field chooser allows users to manage pivot grid fields. You can configure the field chooser integrated into the PivotGrid or use it as a standalone component. This example demonstrates the integrated field chooser. To open the field chooser window, click the icon in the top-left corner or right-click a row or column header and select Show Field Chooser from the context menu.

    Enable the Integrated Field Chooser

    The integrated field chooser is configured in the fieldChooser object. To enable the field chooser, set the object's enabled property to true. This setting adds the Field Chooser icon to the PivotGrid and the Show Field Chooser command to the context menu.

    Organize Fields

    The field chooser window displays five field sections:

    • Row Fields
    • Column Fields
    • Data Fields
    • Filter Fields
    • All Fields

    You can use the fieldChooser.layout property to arrange the sections in different ways.

    The All Fields section includes fields declared in the fields[] array and auto-generated fields as shown in this demo. If you want to hide the auto-generated fields, disable the dataSource.retrieveFields property. You can also hide any particular field if you disable its visible property.

    You can enable hierarchical display in the All Fields section. Specify the same displayFolder for the fields that should be grouped together. In this demo, the hierarchy is built on the server.

    Users can drag and drop fields between the sections. When users move a field to the Row, Column, Data, or Filter Fields section, the PivotGrid adds this field to the corresponding area. To do the same programmatically, specify the field's area property. If a field is intended to be moved to the Data Fields section only, enable the field's isMeasure property, and vice versa: disable the isMeasure property for fields that should never be in the Data Fields section. In this demo, these restrictions are specified on the server.

    After a user finishes moving fields between sections, the changes can either be applied immediately or after the user clicks OK. Use the fieldChooser.applyChangesMode property to set the desired mode. In this demo, you can change this property at runtime.

    Enable Search

    Users can search in the All Fields section if you enable the fieldChooser.allowSearch property as shown in this demo. In addition, you can specify the searchTimeout property to delay the search.

    See more Hide details
    Prev Demo Next Demo

    jQuery

    Angular

    Vue

    React

    AngularJS

    ASP.NET Core

    ASP.NET MVC

    Backend API
    Copy to CodePen
    Apply
    Reset
    $(() => { const salesPivotGrid = $('#sales').dxPivotGrid({ allowSortingBySummary: true, allowSorting: true, allowFiltering: true, showBorders: true, height: 470, fieldChooser: { enabled: true, applyChangesMode: 'instantly', allowSearch: true, }, dataSource: { fields: [ { dataField: '[Product].[Category]', area: 'row' }, { dataField: '[Product].[Subcategory]', area: 'row', headerFilter: { search: { enabled: true, }, }, }, { dataField: '[Ship Date].[Calendar Year]', area: 'column' }, { dataField: '[Ship Date].[Month of Year]', area: 'column' }, { dataField: '[Measures].[Customer Count]', area: 'data' }, ], store: { type: 'xmla', url: 'https://demos.devexpress.com/Services/OLAP/msmdpump.dll', catalog: 'Adventure Works DW Standard Edition', cube: 'Adventure Works', }, }, }).dxPivotGrid('instance'); $('#applyChangesMode').dxSelectBox({ items: ['instantly', 'onDemand'], inputAttr: { 'aria-label': 'Apply Changes Mode' }, width: 180, value: 'instantly', onValueChanged(data) { salesPivotGrid.option('fieldChooser.applyChangesMode', data.value); }, }); });
    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script>window.jQuery || document.write(decodeURIComponent('%3Cscript src="js/jquery.min.js"%3E%3C/script%3E'))</script> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/23.1.5/css/dx.light.css" /> <script src="https://cdn3.devexpress.com/jslib/23.1.5/js/dx.all.js"></script> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="index.js"></script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="sales"></div> <div class="options"> <div class="caption">Options</div> <div class="option"> <span>Apply Changes Mode:</span> <div id="applyChangesMode"></div> </div> </div> </div> </body> </html>
    .options { padding: 20px; background-color: rgba(191, 191, 191, 0.15); margin-top: 20px; } .caption { font-size: 18px; font-weight: 500; } .option { margin-top: 10px; } #applyChangesMode { margin-top: 5px; }