Configuration texts

Strings that can be changed or localized in the PivotGrid widget.

Type: Object

collapseAll

The string to display as a Collapse All context menu item.

Type: String
Default Value: 'Collapse All'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Collapse All" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row or column header to invoke the context menu. The "Collapse All" item from that menu will display the specified text.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        allowExpandAll: true,
        bindingOptions: {
            'texts.collapseAll': 'collapseAllText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="collapseAllText" dx-text-box="{
        placeholder: 'Type in a Text for the `Collapse All` Menu Item...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.collapseAllText = "Collapse All";
        $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 specify the text of the "Collapse All" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row or column header to invoke the context menu. The "Collapse All" item from that menu will display the specified text.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row'
        }, {
            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: false },
    allowExpandAll: true,
    texts: { collapseAll: collapseAllText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type in a Text for the `Collapse All` Menu Item...',
    value: collapseAllText
}"></div>
var viewModel = {
    collapseAllText: ko.observable('Collapse All')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Collapse All" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row or column header to invoke the context menu. The "Collapse All" item from that menu will display the specified text.

<div id="pivotGridContainer" style="height:280px; 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"
            }, {
                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: false },
        allowExpandAll: true
    });
    
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type in a Text for the `Collapse All` Menu Item...",
        value: 'Collapse All',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.collapseAll', e.value);
        }
    });
});

expandAll

The string to display as an Expand All context menu item.

Type: String
Default Value: 'Expand All'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Expand All" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row or column header to invoke the context menu. The "Expand All" item from that menu will display the specified text.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        allowExpandAll: true,
        bindingOptions: {
            'texts.expandAll': 'expandAllText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="expandAllText" dx-text-box="{
        placeholder: 'Type in a Text for the `Expand All` Menu Item...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.expandAllText = "Expand All";
        $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 specify the text of the "Expand All" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row or column header to invoke the context menu. The "Expand All" item from that menu will display the specified text.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row'
        }, {
            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: false },
    allowExpandAll: true,
    texts: { expandAll: expandAllText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type in a Text for the `Expand All` Menu Item...',
    value: expandAllText
}"></div>
var viewModel = {
    expandAllText: ko.observable('Expand All')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Expand All" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row or column header to invoke the context menu. The "Expand All" item from that menu will display the specified text.

<div id="pivotGridContainer" style="height:280px; 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"
            }, {
                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: false },
        allowExpandAll: true
    });
    
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type in a Text for the `Expand All` Menu Item...",
        value: 'Expand All',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.expandAll', e.value);
        }
    });
});

exportToExcel

The string to display as an Export to Excel file context menu item.

Type: String
Default Value: 'Export to Excel file'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Export to Excel" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any area in the grid to invoke the context menu. The "Export to Excel" item from that menu will display the specified text.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        export: { enabled: true },
        bindingOptions: {
            'texts.exportToExcel': 'exportToExcelText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="exportToExcelText" dx-text-box="{
        placeholder: 'Type in a Text for the `Export to Excel file` Menu Item...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.exportToExcelText = "Export to Excel file";
        $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 specify the text of the "Export to Excel" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any area in the grid to invoke the context menu. The "Export to Excel" item from that menu will display the specified text.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row'
        }, {
            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: false },
    export: { enabled: true },
    texts: { exportToExcel: exportToExcelText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type in a Text for the `Export to Excel file` Menu Item...',
    value: exportToExcelText
}"></div>
var viewModel = {
    exportToExcelText: ko.observable('Export to Excel file')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Export to Excel" menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any area in the grid to invoke the context menu. The "Export to Excel" item from that menu will display the specified text.

<div id="pivotGridContainer" style="height:280px; 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"
            }, {
                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: false },
        export: { enabled: true }
    });
    
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type in a Text for the `Export to Excel file` Menu Item...",
        value: 'Export to Excel file',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.exportToExcel', e.value);
        }
    });
});

grandTotal

The string to display as a header of the Grand Total row and column.

Type: String
Default Value: 'Grand Total'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Grand Total" headers at runtime. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in both "Grand Total" headers.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        bindingOptions: {
            'texts.grandTotal': 'grandTotalText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="grandTotalText" dx-text-box="{
        placeholder: 'Type in a Text for the `Grand Total` Menu Item...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.grandTotalText = "Grand Total";
        $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 specify the text of the "Grand Total" headers at runtime. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in both "Grand Total" headers.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row'
        }, {
            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: false },
    texts: { grandTotal: grandTotalText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type in a Text for the `Grand Total` Menu Item...',
    value: grandTotalText
}"></div>
var viewModel = {
    grandTotalText: ko.observable('Grand Total')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Grand Total" headers at runtime. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in both "Grand Total" headers.

<div id="pivotGridContainer" style="height:280px; 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"
            }, {
                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: false }
    });
    
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type in a Text for the `Grand Total` Menu Item...",
        value: 'Grand Total',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.grandTotal', e.value);
        }
    });
});

noData

Specifies the text displayed when a pivot grid does not contain any fields.

Type: String
Default Value: 'No data'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text displayed by the pivot grid when it contains no data. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in the grid.

<div ng-controller="pivotGridController">
    <div style="height:120px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        fieldChooser: { enabled: false },
        bindingOptions: {
            'texts.noData': 'noDataText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="noDataText" dx-text-box="{
        placeholder: 'Type in a Text for an Empty Pivot Grid...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.noDataText = "No data";
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this demo, you can specify the text displayed by the pivot grid when it contains no data. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in the grid.

<div style="height:120px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    fieldChooser: { enabled: false },
    texts: { noData: noDataText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type in a Text for an Empty Pivot Grid...',
    value: noDataText
}"></div>
var viewModel = {
    noDataText: ko.observable('No data')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text displayed by the pivot grid when it contains no data. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in the grid.

<div id="pivotGridContainer" style="height:120px; 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({
        fieldChooser: { enabled: false }
    });
    
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type in a Text for an Empty Pivot Grid...",
        value: 'No data',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.noData', e.value);
        }
    });
});

removeAllSorting

The string to display as a Remove All Sorting context menu item.

Type: String
Default Value: 'Remove All Sorting'

NOTE: This item appears in the context menu when data is sorted by summary values.

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Remove All Sorting" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any header in the grid to invoke the context menu. The "Remove All Sorting" item from that menu will display the specified text.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                sortBySummaryField: 'amount'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        bindingOptions: {
            'texts.removeAllSorting': 'removeAllSortingText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="removeAllSortingText" dx-text-box="{ }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.removeAllSortingText = "Remove All Sorting";
        $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 specify the text of the "Remove All Sorting" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any header in the grid to invoke the context menu. The "Remove All Sorting" item from that menu will display the specified text.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row',
            sortBySummaryField: 'amount'
        }, {
            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: false },
    texts: { removeAllSorting: removeAllSortingText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    value: removeAllSortingText
}"></div>
var viewModel = {
    removeAllSortingText: ko.observable('Remove All Sorting')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Remove All Sorting" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any header in the grid to invoke the context menu. The "Remove All Sorting" item from that menu will display the specified text.

<div id="pivotGridContainer" style="height:280px; 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",
                sortBySummaryField: 'amount'
            }, {
                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: false },
        allowSortingBySummary: true
    });
    
    $("#textBoxContainer").dxTextBox({
        value: 'Remove All Sorting',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.removeAllSorting', e.value);
        }
    });
});

showFieldChooser

The string to display as a Show Field Chooser context menu item.

Type: String
Default Value: 'Show Field Chooser'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Show Field Chooser" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any area in the grid to invoke the context menu. The "Show Field Chooser" item from that menu will display the specified text.

<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: {
            'texts.showFieldChooser': 'showFieldChooserText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="showFieldChooserText" dx-text-box="{ }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.showFieldChooserText = "Show 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 specify the text of the "Show Field Chooser" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any area in the grid to invoke the context menu. The "Show Field Chooser" item from that menu will display the specified text.

<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'
        }]
    },
    texts: { showFieldChooser: showFieldChooserText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    value: showFieldChooserText
}"></div>
var viewModel = {
    showFieldChooserText: ko.observable('Show Field Chooser')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Show Field Chooser" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any area in the grid to invoke the context menu. The "Show Field Chooser" item from that menu will display the specified text.

<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: 'Show Field Chooser',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.showFieldChooser', e.value);
        }
    });
});

sortColumnBySummary

The string to display as a Sort Column by Summary Value context menu item.

Type: String
Default Value: 'Sort {0} by This Column'

NOTE: This item appears in the context menu when sorting by summary values is enabled.

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Sort Column by Summary Value" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any column header in the grid to invoke the context menu. The "Sort Column by Summary Value" item from that menu will display the specified text.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                sortBySummaryField: 'amount'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        allowSortingBySummary: true,
        bindingOptions: {
            'texts.sortColumnBySummary': 'sortColumnBySummaryText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="sortColumnBySummaryText" dx-text-box="{ }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.sortColumnBySummaryText = "Sort {0} by This Column";
        $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 specify the text of the "Sort Column by Summary Value" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any column header in the grid to invoke the context menu. The "Sort Column by Summary Value" item from that menu will display the specified text.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row',
            sortBySummaryField: 'amount'
        }, {
            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: false },
    allowSortingBySummary: true,
    texts: { sortColumnBySummary: sortColumnBySummaryText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    value: sortColumnBySummaryText
}"></div>
var viewModel = {
    sortColumnBySummaryText: ko.observable('Sort {0} by This Column')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Sort Column by Summary Value" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any column header in the grid to invoke the context menu. The "Sort Column by Summary Value" item from that menu will display the specified text.

<div id="pivotGridContainer" style="height:280px; 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",
                sortBySummaryField: 'amount'
            }, {
                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: false },
        allowSortingBySummary: true
    });
    
    $("#textBoxContainer").dxTextBox({
        value: 'Sort {0} by This Column',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.sortColumnBySummary', e.value);
        }
    });
});

sortRowBySummary

The string to display as a Sort Row by Summary Value context menu item.

Type: String
Default Value: 'Sort {0} by This Row'

NOTE: This item appears in the context menu when sorting by summary values is enabled.

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Sort Row by Summary Value" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row header in the grid to invoke the context menu. The "Sort Row by Summary Value" item from that menu will display the specified text.

<div ng-controller="pivotGridController">
    <div style="height:280px; max-width:750px; margin:0 auto" dx-pivot-grid="{
        dataSource: {
            store: sales,
            fields: [{
                dataField: 'region',
                width: 120,
                area: 'row',
                sortBySummaryField: 'amount'
            }, {
                dataField: 'city',
                width: 150,
                area: 'row',
                selector: cityText
            }, {
                dataField: 'date',
                dataType: 'date',
                area: 'column'
            }, {
                dataField: 'amount',
                summaryType: 'sum',
                format: 'currency',
                area: 'data'
            }]
        },
        fieldChooser: { enabled: false },
        allowSortingBySummary: true,
        bindingOptions: {
            'texts.sortRowBySummary': 'sortRowBySummaryText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="sortRowBySummaryText" dx-text-box="{ }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.sortRowBySummaryText = "Sort {0} by This Row";
        $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 specify the text of the "Sort Row by Summary Value" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row header in the grid to invoke the context menu. The "Sort Row by Summary Value" item from that menu will display the specified text.

<div style="height:280px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: {
    dataSource: {
        store: sales,
        fields: [{
            dataField: 'region',
            width: 120,
            area: 'row',
            sortBySummaryField: 'amount'
        }, {
            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: false },
    allowSortingBySummary: true,
    texts: { sortRowBySummary: sortRowBySummaryText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    value: sortRowBySummaryText
}"></div>
var viewModel = {
    sortRowBySummaryText: ko.observable('Sort {0} by This Row')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Sort Row by Summary Value" context menu item at runtime. Type any text in the text box below the pivot grid. Then, right-click any row header in the grid to invoke the context menu. The "Sort Row by Summary Value" item from that menu will display the specified text.

<div id="pivotGridContainer" style="height:280px; 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",
                sortBySummaryField: 'amount'
            }, {
                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: false },
        allowSortingBySummary: true
    });
    
    $("#textBoxContainer").dxTextBox({
        value: 'Sort {0} by This Row',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.sortRowBySummary', e.value);
        }
    });
});

total

The string to display as a header of the Total row and column.

Type: String
Default Value: '{0} Total'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can specify the text of the "Total" headers at runtime. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in "Total" row and column headers.

<div ng-controller="pivotGridController">
    <div style="height:370px; 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: false },
        bindingOptions: {
            'texts.total': 'totalText'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="totalText" dx-text-box="{
        placeholder: 'Type in a Text for the `Total` Menu Item...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.totalText = "{0} Total";
        $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 specify the text of the "Total" headers at runtime. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in "Total" row and column headers.

<div style="height:370px; 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: false },
    texts: { total: totalText }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type in a Text for the `Total` Menu Item...',
    value: totalText
}"></div>
var viewModel = {
    totalText: ko.observable('{0} Total')
};

ko.applyBindings(viewModel);

In this demo, you can specify the text of the "Total" headers at runtime. Type any text in the text box below the pivot grid and make the text box lose focus. The specified text will immediately appear in "Total" row and column headers.

<div id="pivotGridContainer" style="height:370px; 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"
            }]
        },
        fieldChooser: { enabled: false }
    });
    
    $("#textBoxContainer").dxTextBox({
        placeholder: "Type in a Text for the `Total` Menu Item...",
        value: '{0} Total',
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('texts.total', e.value);
        }
    });
});