Configuration export

Configures client-side export.

Type: Object

When exporting is enabled, the new 'Export to Excel file' entity is added to the context menu. You can specify exporting options using this object.

NOTE: Exporting features require the JSZip library. Please add a reference to this library to your page. You can get it from the js folder of your DevExtreme Package or use the DevExpress CDN as shown below.

HTML
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.6.0/jszip.min.js"></script>
Show Example:
AngularJS
Knockout
jQuery

In this demo, click the export icon in the upper-left corner to export the pivot grid.

NOTE: This example will not work in IE9 and Safari.

<div ng-controller="pivotGridController">
    <div style="height:310px; 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"
                }, {
                    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 }
        };
    });
    
angular.element(document).ready(function () {
   angular.bootstrap(document, ['myApp']);
});

In this demo, click the export icon in the upper-left corner to export the pivot grid.

NOTE: This example will not work in IE9 and Safari.

<div style="height:310px; max-width:750px; margin:0 auto" data-bind="dxPivotGrid: pivotGridOptions"></div>
var viewModel = {
    pivotGridOptions: {
        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 }
    }
};

ko.applyBindings(viewModel);

In this demo, click the export icon in the upper-left corner to export the pivot grid.

NOTE: This example will not work in IE9 and Safari.

<div id="pivotGridContainer" style="height:310px; max-width:750px; 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 }
    });
});

enabled

Enables client-side export.

Type: Boolean
Default Value: false

Show Example:
AngularJS
Knockout
jQuery

Use the switch below the pivot grid to enable/disable the export feature.

NOTE: This example will not work in IE9 and Safari.

<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: {
            'export.enabled': 'exportEnabled'
        }
    }"></div>
    <div style="height:40px; margin-top:5px; text-align:center">
        Enable Export:&nbsp;
        <div style="display:inline-block; vertical-align:middle" ng-model="exportEnabled" dx-switch="{
            onText: 'true',
            offText: 'false'
        }"></div>
    </div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.exportEnabled = false;
        $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 export feature.

NOTE: This example will not work in IE9 and Safari.

<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: exportEnabled
    }
}"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Enable Export:&nbsp;
    <div style="display:inline-block; vertical-align:middle" data-bind="dxSwitch: {
        onText: 'true',
        offText: 'false',
        value: exportEnabled
    }"></div>
</div>
var viewModel = {
    exportEnabled: ko.observable(false)
};

ko.applyBindings(viewModel);

Use the switch below the pivot grid to enable/disable the export feature.

NOTE: This example will not work in IE9 and Safari.

<div id="pivotGridContainer" style="height:280px; max-width:750px; margin:0 auto"></div>
<div style="height:40px; margin-top:5px; text-align:center">
    Enable Export:&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"
            }, {
                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 }
    });
    
    $("#switchContainer").dxSwitch({
        onText: 'true',
        offText: 'false',
        value: false,
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('export.enabled', e.value);
        }
    });
});

fileName

Specifies a default name for the file to which grid data is exported.

Type: String
Default Value: 'PivotGrid'

Show Example:
AngularJS
Knockout
jQuery

In this demo, you can change the name of the exported file at runtime. Type any text in the text box below the pivot grid. Then, export the grid using the icon in its upper-left corner. The exported file will have the exact name you have typed.

NOTE: This example will not work in IE9 and Safari.

<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: {
            'export.fileName': 'fileName'
        }
    }"></div>
    <div style="height:40px; width:300px; margin-top:10px; margin:0 auto" ng-model="fileName" dx-text-box="{
        placeholder: 'Type a File Name in Here...'
    }"></div>
</div>
angular
    .module('myApp', ['dx'])
    .controller('pivotGridController', function ($scope) {
        $scope.fileName = undefined;
        $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 name of the exported file at runtime. Type any text in the text box below the pivot grid. Then, export the grid using the icon in its upper-left corner. The exported file will have the exact name you have typed.

NOTE: This example will not work in IE9 and Safari.

<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,
        fileName: fileName
    }
}"></div>
<div style="height:40px; width:300px; margin-top:10px; margin:0 auto" data-bind="dxTextBox: {
    placeholder: 'Type a File Name in Here...',
    value: fileName
}"></div>
var viewModel = {
    fileName: ko.observable(undefined)
};

ko.applyBindings(viewModel);

In this demo, you can change the name of the exported file at runtime. Type any text in the text box below the pivot grid. Then, export the grid using the icon in its upper-left corner. The exported file will have the exact name you have typed.

NOTE: This example will not work in IE9 and Safari.

<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 a File Name in Here...",
        onValueChanged: function (e) {
            var pivotGrid = $('#pivotGridContainer').dxPivotGrid('instance');
            pivotGrid.option('export.fileName', e.value);
        }
    });
});

proxyUrl

Specifies the URL of the server-side proxy that streams the resulting file to the end user to enable export in IE9 and Safari browsers.

Type: String
Default Value: undefined

Generally, exporting is performed using client-side API in browsers. However, the IE9 and Safari (integrated in Mac OS) browsers do not implement an API for saving files. In this instance, the PivotGrid widget can POST the content to a server-side proxy, which will stream the file back to the end user. To enable this functionality, set the export | proxyUrl option to the proxy, which will stream the file to the end user. When implementing the proxy, take the following information into account.

  • Your proxy will receive a POST request with the following parameters in the request body: fileName, contentType (the MIME type of the file) and base64 (the base-64 encoded file content).
  • The proxy should return the decoded file with the "Content-Disposition" header set to attachment; filename="".

The sample proxy implementation for ASPx-based and PHP-based web servers is presented in the DataGrid | Client-Side Export article.