Configuration fieldChooser

The Field Chooser configuration options.

Type: Object

A field chooser is a pivot grid element that allows an end-user to configure data displayed in the pivot grid. To invoke the field chooser, right-click any pivot grid header and select the Show Field Chooser item. You can also display dxPivotGridFieldChooser as a separate widget.

Show Example:
AngularJS
Knockout
jQuery

In this demo, the field chooser is enabled. To invoke it, click the icon in the upper-left corner of the pivot grid.

<div ng-controller="pivotGridController">
    <div style="height:610px; max-width:750px; margin:0 auto" dx-pivot-grid="pivotGridOptions"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.sales = sales;
        $scope.pivotGridOptions = {
            dataSource: {
                store: $scope.sales,
                fields: [{
                    dataField: 'region',
                    width: 120,
                    area: 'row',
                    expanded: true
                }, {
                    dataField: 'city',
                    width: 150,
                    area: 'row',
                    selector: function (data) {
                        return data.city + ' (' + data.country + ')';
                    }
                }, {
                    dataField: 'date',
                    dataType: 'date',
                    area: 'column'
                }, {
                    dataField: 'amount',
                    summaryType: 'sum',
                    format: 'currency',
                    area: 'data'
                }]
            },
            fieldChooser: { enabled: true }
        };
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this demo, the field chooser is enabled. To invoke it, click the icon in the upper-left corner of the pivot grid.

<div style="height:610px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: pivotGridOptions"></div>
var viewModel = {
    pivotGridOptions: {
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                expanded: true
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: function (data) {
                    return data.city + ' (' + data.country + ')';
                }
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: true }
    }
};

ko.applyBindings(viewModel);

In this demo, the field chooser is enabled. To invoke it, click the icon in the upper-left corner of the pivot grid.

<div id="pivotGridContainer" style="height:610px; max-width:750px; margin:0 auto"></div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: sales,
            fields: [{
                dataField: "region",
                width: 120,
                area: "row",
                expanded: true
            }, {
                dataField: "city",
                width: 150,
                area: "row",
                selector: function (data) {
                    return data.city + " (" + data.country + ")";
                }
            }, {
                dataField: "date",
                dataType: "date",
                area: "column"
            }, {
                dataField: "amount",
                summaryType: "sum",
                format: "currency",
                area: "data"
            }]
        },
        fieldChooser: { enabled: true }
    });
});

enabled

Enables or disables the field chooser.

Type: Boolean
Default Value: true

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to enable/disable the field chooser.

<div ng-controller="pivotGridController">
    <div style="height:650px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                expanded: true
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        bindingOptions: {
            'fieldChooser.enabled': 'fieldChooserEnabled'
        }
    }"></div>
    <div style="height:40px; margin-top:5px; text-align:center">
        Enable the Field Chooser:&nbsp;
        <div style="display:inline-block; vertical-align:middle" ng-model="fieldChooserEnabled" dx-switch="{
            onText: 'true',
            offText: 'false'
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.fieldChooserEnabled = true;
        $scope.cityText = function (data) {
            return data.city + ' (' + data.country + ')';
        };
        $scope.sales = sales;
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

Use the switch below the pivot grid to enable/disable the field chooser.

<div style="height:650px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row',
            expanded: true
        }, {
            dataField: 'city',
            width: 150,
            area: 'row',
            selector: function (data) {
                return data.city + ' (' + data.country + ')';
            }
        }, {
            dataField: 'date',
            dataType: 'date',
            area: 'column'
        }, {
            dataField: 'amount',
            summaryType: 'sum',
            format: 'currency',
            area: 'data'
        }]
    },
    fieldChooser: { enabled: fieldChooserEnabled }
}"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Enable the Field Chooser:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxSwitch: {
        onText: 'true',
        offText: 'false',
        value: fieldChooserEnabled
    }"></div>
</div>
var viewModel = {
    fieldChooserEnabled: ko.observable(true)
};

ko.applyBindings(viewModel);

Use the switch below the pivot grid to enable/disable the field chooser.

<div id="pivotGridContainer" style="height:650px; max-width:750px; margin:0 auto"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Enable the Field Chooser:&nbsp;
    <div id="switchContainer" style="display:inline-block; vertical-align:middle"></div>
</div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: sales,
            fields: [{
                dataField: "region",
                width: 120,
                area: "row",
                expanded: true
            }, {
                dataField: "city",
                width: 150,
                area: "row",
                selector: function (data) {
                    return data.city + " (" + data.country + ")";
                }
            }, {
                dataField: "date",
                dataType: "date",
                area: "column"
            }, {
                dataField: "amount",
                summaryType: "sum",
                format: "currency",
                area: "data"
            }]
        }
    });
    
    $("#switchContainer").dxSwitch({
        onText: 'true',
        offText: 'false',
        value: true,
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('fieldChooser.enabled', e.value);
        }
    });
});

height

Specifies the field chooser height.

Type: Number
Default Value: 600

layout

Specifies the field chooser layout.

Type: Number
Default Value: 0
Accepted Values: 0 | 1 | 2

The image below shows different layout types.

The following abbreviations are used on the image.

  • A — All Fields
  • F — Filter Fields
  • R — Row Fields
  • C — Column Fields
  • D — Data Fields
Show Example:
AngularJS
Knockout
jQuery

Use the radio group below the pivot grid to change the layout of the field chooser.

<div ng-controller="pivotGridController">
    <div style="height:650px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                expanded: true
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: true },
        onInitialized: savePivotGridInstance,
        bindingOptions: {
            'fieldChooser.layout': 'layoutNumber'
        }
    }"></div>
    <div style="height:40px; margin-top:5px; text-align:center">
        Choose the Layout of the Field Chooser:&nbsp;
        <div style="display:inline-block; vertical-align:middle" dx-radio-group="{
            dataSource: [
                { name: '0', value: 0 },
                { name: '1', value: 1 },
                { name: '2', value: 2 }
            ],
            valueExpr: 'value',
            displayExpr: 'name',
            layout: 'horizontal',
            onValueChanged: showFieldChooser,
            bindingOptions: {
                value: 'layoutNumber'
            }
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.layoutNumber = undefined;
        $scope.pivotGridInstance = {};
        $scope.cityText = function (data) {
            return data.city + ' (' + data.country + ')';
        };
        $scope.savePivotGridInstance = function (e) {
            $scope.pivotGridInstance = e.component;
        };
        $scope.showFieldChooser = function (e) {
            $scope.pivotGridInstance.getFieldChooserPopup().show();
        };
        $scope.sales = sales;
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

Use the radio group below the pivot grid to change the layout of the field chooser.

<div style="height:650px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row',
            expanded: true
        }, {
            dataField: 'city',
            width: 150,
            area: 'row',
            selector: function (data) {
                return data.city + ' (' + data.country + ')';
            }
        }, {
            dataField: 'date',
            dataType: 'date',
            area: 'column'
        }, {
            dataField: 'amount',
            summaryType: 'sum',
            format: 'currency',
            area: 'data'
        }]
    },
    fieldChooser: {
        enabled: true,
        layout: layoutNumber
    },
    onInitialized: function (e) {
        e.model.pivotGridInstance = e.component;
    }
}"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Choose the Layout of the Field Chooser:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxRadioGroup: {
        dataSource: [
            { name: '0', value: 0 },
            { name: '1', value: 1 },
            { name: '2', value: 2 }
        ],
        valueExpr: 'value',
        displayExpr: 'name',
        value: layoutNumber,
        layout: 'horizontal',
        onValueChanged: function (e) {
            pivotGridInstance.getFieldChooserPopup().show();
        }
    }"></div>
</div>
var viewModel = {
    layoutNumber: ko.observable(undefined),
    pivotGridInstance: {}
};

ko.applyBindings(viewModel);

Use the radio group below the pivot grid to change the layout of the field chooser.

<div id="pivotGridContainer" style="height:650px; max-width:750px; margin:0 auto"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Choose the Layout of the Field Chooser:&nbsp;
    <div id="radioGroupContainer" style="display:inline-block; vertical-align:middle"></div>
</div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: sales,
            fields: [{
                dataField: "region",
                width: 120,
                area: "row",
                expanded: true
            }, {
                dataField: "city",
                width: 150,
                area: "row",
                selector: function (data) {
                    return data.city + " (" + data.country + ")";
                }
            }, {
                dataField: "date",
                dataType: "date",
                area: "column"
            }, {
                dataField: "amount",
                summaryType: "sum",
                format: "currency",
                area: "data"
            }]
        },
        fieldChooser: { enabled: true }
    });
    
    $("#radioGroupContainer").dxRadioGroup({
        dataSource: [
            { name: '0', value: 0 },
            { name: '1', value: 1 },
            { name: '2', value: 2 }
        ],
        valueExpr: 'value',
        displayExpr: 'name',
        value: undefined,
        layout: 'horizontal',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('fieldChooser.layout', e.value);
            pivotGrid.getFieldChooserPopup().show();
        }
    });
});

texts

Strings that can be changed or localized in the pivot grid's integrated Field Chooser.

Type: Object

NOTE: Due to technical restrictions, you cannot obtain this object at runtime if you have not specified it beforehand when configuring the widget.

title

Specifies the text to display as a title of the field chooser popup window.

Type: String
Default Value: 'Field Chooser'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can change the title of the field chooser at runtime. Type any text in the text box below the pivot grid. Then, invoke the field chooser using the icon in the upper-left corner of the grid and check that the title has changed.

<div ng-controller="pivotGridController">
    <div style="height:650px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                expanded: true
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        bindingOptions: {
            'fieldChooser.title': 'fieldChooserTitle'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="fieldChooserTitle" dx-text-box="{
        placeholder: 'Type in the Field Chooser Title Here...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.fieldChooserTitle = "Field Chooser";
        $scope.cityText = function (data) {
            return data.city + ' (' + data.country + ')';
        };
        $scope.sales = sales;
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this demo, you can change the title of the field chooser at runtime. Type any text in the text box below the pivot grid. Then, invoke the field chooser using the icon in the upper-left corner of the grid and check that the title has changed.

<div style="height:650px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row',
            expanded: true
        }, {
            dataField: 'city',
            width: 150,
            area: 'row',
            selector: function (data) {
                return data.city + ' (' + data.country + ')';
            }
        }, {
            dataField: 'date',
            dataType: 'date',
            area: 'column'
        }, {
            dataField: 'amount',
            summaryType: 'sum',
            format: 'currency',
            area: 'data'
        }]
    },
    fieldChooser: { title: fieldChooserTitle }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type in the Field Chooser Title Here...',
    value: fieldChooserTitle
}"></div>
var viewModel = {
    fieldChooserTitle: ko.observable("Field Chooser")
};

ko.applyBindings(viewModel);

In this demo, you can change the title of the field chooser at runtime. Type any text in the text box below the pivot grid. Then, invoke the field chooser using the icon in the upper-left corner of the grid and check that the title has changed.

<div id="pivotGridContainer" style="height:650px; max-width:750px; margin:0 auto"></div>
<div id="textBoxContainer" style="height:40px; width:300px; margin-top:10px; margin:0 auto"></div>
$(function () {
    $("#pivotGridContainer").dxPivotGrid({
        dataSource: {
            store: sales,
            fields: [{
                dataField: "region",
                width: 120,
                area: "row",
                expanded: true
            }, {
                dataField: "city",
                width: 150,
                area: "row",
                selector: function (data) {
                    return data.city + " (" + data.country + ")";
                }
            }, {
                dataField: "date",
                dataType: "date",
                area: "column"
            }, {
                dataField: "amount",
                summaryType: "sum",
                format: "currency",
                area: "data"
            }]
        }
    });
    
    $("#textBoxContainer").dxTextBox({
        value: "Field Chooser",
        placeholder: 'Type in the Field Chooser Title Here...',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('fieldChooser.title', e.value);
        }
    });
});

width

Specifies the field chooser width.

Type: Number
Default Value: 600