angular-ui/ui-grid

Column footer row is not exported to PDF

Open

#5,967 opened on Jan 25, 2017

View on GitHub
 (1 comment) (3 reactions) (0 assignees)JavaScript (2,496 forks)batch import
good first issue

Repository metrics

Stars
 (5,395 stars)
PR merge metrics
 (No merged PRs in 30d)

Description

I was implemented PDF eporting and found that there is no was to export column agregation footer to pdf as pdf footer or part of the table at all. E.g. I have next grid: image

$this.gridOptions = {
                    enableSorting: false,
                    enableColumnMenus: false,
                    minRowsToShow: 4,
                    showColumnFooter: true,
                    appScopeProvider: $this,
                    data: response.data,
                    enableHorizontalScrollbar: 0,
                    enableVerticalScrollbar: 0,
                    enableGridMenu: false,
                    exporterPdfDefaultStyle: { fontSize: 9 },
                    exporterPdfTableStyle: { margin: [30, 30, 30, 30] },
                    exporterPdfTableHeaderStyle: { fontSize: 10, bold: true, italics: true, color: 'white', fillColor: '#6495ED' },
                    exporterPdfHeader: { text: "Over Speeding Distribution By Amount Report", style: 'headerStyle' },
                    exporterPdfFooter: function (currentPage, pageCount) {
                        return { text: currentPage.toString() + ' of ' + pageCount.toString(), style: 'footerStyle' };
                    },
                    exporterPdfCustomFormatter: function (docDefinition) {
                        docDefinition.styles.headerStyle = { fontSize: 22, bold: true };
                        docDefinition.styles.footerStyle = { fontSize: 10, bold: true };
                        docDefinition.content[0].table.body.forEach(function (item, index, array) {
                            if (index && index != array.length - 1) {
                                item.forEach(function (cell, ind,arr) {
                                    if(!ind)
                                        arr[ind] = { text: cell, fillColor: $this.gridOptions.data[index].colors.medium,color:'white' }
                                    else
                                        arr[ind] = { text: cell, fillColor: '#FFF8DC',color:'black' }
                                });
                            }
                        });
                        return docDefinition;
                    },
                    exporterPdfOrientation: 'portrait',
                    exporterPdfPageSize: 'LETTER',
                    exporterPdfMaxGridWidth: 500,
                    onRegisterApi: function(gridApi){
                        $this.gridApi = gridApi;
                    },
                    downloadPDF: function () {
                        $this.gridApi.exporter.pdfExport(uiGridExporterConstants.VISIBLE, uiGridExporterConstants.ALL);
                    },
                    columnDefs: [
                    {
                        name: 'Occurences',
                        field: 'OVERSPEED_AMOUNT',
                        width: 100,
                        cellTemplate: '<div ng-style="colRenderIndex?{\'background-color\':\'{{grid.options.data[rowRenderIndex].colors.light}}\'}:{\'background-color\':\'{{grid.options.data[rowRenderIndex].colors.medium}}\';\'color\':\'white\'}" class="ui-grid-cell-contents" >{{COL_FIELD }}</div>'
                    },
                    {
                        name: 'Vehicles',
                        field: 'VEHCILES_COUNT',
                        width: 100,
                        cellTemplate: '<div ng-style="colRenderIndex?{\'background-color\':\'{{grid.options.data[rowRenderIndex].colors.light}}\'}:{\'background-color\':\'{{grid.options.data[rowRenderIndex].colors.medium}}\';\'color\':\'white\'}" class="ui-grid-cell-contents" >{{COL_FIELD }}</div>',
                        aggregationType: uiGridConstants.aggregationTypes.sum,
                        footerCellTemplate: '<div class="ui-grid-cell-contents" >Total: {{col.getAggregationValue()}}</div>'
                    },
                     {
                         name: '%',
                         width: '*',
                         field: 'percentage',
                         cellTemplate: '<div ng-style="colRenderIndex?{\'background-color\':\'{{grid.options.data[rowRenderIndex].colors.light}}\'}:{\'background-color\':\'{{grid.options.data[rowRenderIndex].colors.medium}}\'}" class="ui-grid-cell-contents" >{{COL_FIELD }}</div>',
                         footerCellTemplate: '<img ng-click="grid.options.downloadPDF()" class="reports" src="js/dist/css/images/reports.png"/>'
                     }
                    ]
                };

When I export this table to PDF I get: image Is this a known issue that is still not implemented or I`m doing something wrong

Contributor guide