Currency Symbol is shown as null in PDF view of angularjs UI Grid

Question

I developed angularjs UI grid as below in my .netcore mvc 5 project, but when I export grid data to pdf document, currency symbols are shown as null in Total and discount columns.

when I click "Export all data as pdf" menu in top right corner of above grid, PDF document shown as below.

My source code is given below.

<environment include="Development">
    <script type="text/javascript" src="~/lib/angular.js/angular.js"></script>
    <script type="text/javascript" src="~/lib/angular-ui-grid/ui-grid.js"></script>
    <script type="text/javascript" src="~/lib/angular-ui-bootstrap/ui-bootstrap.js"></script>
    <script type="text/javascript" src="~/lib/angular-ui-bootstrap/ui-bootstrap-tpls.js"></script>
    <script type="text/javascript" src="~/lib/angular-animate/angular-animate.js"></script>
    <script type="text/javascript" src="~/lib/pdfmake/pdfmake.js"></script>
    <script type="text/javascript" src="~/lib/pdfmake/vfs_fonts.js"></script>
    <link rel="stylesheet" type="text/css" href="~/lib/angular-ui-grid/ui-grid.css" />
    <link rel="stylesheet" type="text/css" href="~/lib/angular-ui-bootstrap/ui-bootstrap-csp.css" />
</environment>
<script type="text/javascript">       

    var app = angular.module("uigridApp", ["ui.grid", "ui.grid.pagination", "ui.grid.selection", "ui.grid.exporter", "ui.bootstrap"]);

    app.controller("uigridCtrl", function ($scope, $http, uiGridConstants, $templateCache) {
        $scope.datePicker = {
           //.........................
        };
        $scope.showDatePopup = [];
        $scope.showDatePopup.push({ opened: false });
        $scope.showDatePopup.push({ opened: false });
        $templateCache.put('ui-grid/date-cell',
           // ..................
        );
        $templateCache.put('ui-grid/ui-grid-date-filter',
           // ........................
        );
        $scope.highlightFilteredHeader = function (row, rowRenderIndex, col, colRenderIndex) {
           // ..........................
        };

        $scope.orderstatus = [{value:'Order',label:'Order'},{value:'SalesOrder',label:'SalesOrder'},{value:'Cancelled',label:'Cancelled'}];
        $scope.gridOptions = {
            enableFiltering: true,
            enableSorting: true,
            paginationPageSizes: [25, 50, 75],
            paginationPageSize: 25,
            columnDefs: [
                {
                    field: 'CustomerName',
                    //.....................
                },
                {
                    field: 'OrderNo',
                    //.....................
                },
                {
                    field: 'OrderStatusText',
                   //.....................
                },
                {
                    field: 'OrderDate',
                    //.....................
                },
                {
                    field: 'Total',
                    width: '10%',
                    cellFilter: 'currency',
                    cellClass: 'gridcell-text-right',
                    filters: [
                        {
                            condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                            placeholder: 'greater than or equal'
                        },
                        {
                            condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                            placeholder: 'less than or equal'
                        }
                    ]
                },
                {
                    field: 'Discount',
                    width: '10%',
                    cellFilter: 'currency',
                    cellClass: 'gridcell-text-right',
                    filters: [
                        {
                            condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                            placeholder: 'greater than or equal'
                        },
                        {
                            condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                            placeholder: 'less than or equal'
                        }
                    ]
                },
                {
                    field: ' ',
                  //.................................
                }
            ],
            onRegisterApi: function (gridApi) {
                $scope.grid1Api = gridApi;
            },
            enableRowSelection: true,
            enableGridMenu: true,
            enableSelectAll: true,
            exporterMenuPdf: true,
            exporterMenuExcel: false,
            exporterCsvFilename: 'Orders.csv',
            exporterPdfDefaultStyle: {
                fontSize: 9
            },
            exporterPdfTableStyle: {
                margin: [4,30,30,30]
            },
            exporterPdfTableHeaderStyle: {
                fontSize: 10,
                bold: true,
                italics: true,
                color: 'red'
            },
            exporterPdfHeader: {
                text: "Orders",
                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
                };
                return docDefinition;
            },
            exporterPdfOrientation: 'portrait',
            exporterPdfPageSize: 'LETTER',
            exporterPdfMaxGridWidth: 550,
            exporterCsvLinkElement: angular.element(document.querySelectorAll(".custom-csv-link-location"))
        };
        $scope.orders = [{"EnID":"CfDJ8DxuHlHxIyNIhPR82Tv-RtJAL99wRMMRi8Pw5CY1jLx3D9Sf2Gk2yV8oktqzt8S45ryjemJVoo2h6f2M9HnmjDg1AcFl1NRMRs98tuMmfQwJvECBaMja3YTGaWiDaK63WA","ID":50,"CustomerName":"Mahesh","Total":1333.0200,"OrderDate":"2021-03-27T16:56:51.5333333","Discount":0.0000,"Due":0,"OrderNo":"ORD0000000050","IsDeleted":false,"OrderStatus":2,"OrderStatusText":"SalesOrder"},{"EnID":"CfDJ8DxuHlHxIyNIhPR82Tv-RtIbua2DTIrFBAc2PXZy5ggdno2EejZP9G7NGRK5qqVs7W4jsPLLSQLHpwQdZvqyZEOqWxCq-YIpCiqZDOFoFWCy27P3UCOLB84xxG70uukjgg","ID":51,"CustomerName":"Mahesh","Total":200.0000,"OrderDate":"2021-03-27T17:34:34.2333333","Discount":0.0000,"Due":0,"OrderNo":"ORD0000000051","IsDeleted":false,"OrderStatus":2,"OrderStatusText":"SalesOrder"},{"EnID":"CfDJ8DxuHlHxIyNIhPR82Tv-RtLLV57wItiRyN9yZ_oBF8ke-Sh6q7qpJOWOZHL1nu_RCpY656-FiuWpVN8ET1aEBnsd3FZhealb56irckvjWwOHgnBrErVVZgZJ-IRVTXMvug","ID":52,"CustomerName":"Mahesh","Total":460.0000,"OrderDate":"2021-03-27T22:11:21.88","Discount":0.0000,"Due":0,"OrderNo":"ORD0000000052","IsDeleted":false,"OrderStatus":2,"OrderStatusText":"SalesOrder"}];
        $scope.gridOptions.data = $scope.orders;
    });


</script>

<style type="text/css">
    .myGrid {
        width: 100%;
        height: 550px;
    }
</style>

<div ng-app="uigridApp">
    <div ng-controller="uigridCtrl">
        <div ui-grid="gridOptions" ui-grid-pagination ui-grid-auto-resize ui-grid-selection ui-grid-exporter class="myGrid"></div>
    </div>
</div>

Please give a solution for this issue.

Answer 1

Add a function to format the currency values with the correct symbol and currency code. You can use the cellTemplate property in your column definitions to apply this formatting.

function formatCurrency(row, grid, options) {
    var currencySymbol = '$'; 
    var currencyCode = 'USD';
    return currencySymbol + row.entity[options.colDef.name] + ' ' + currencyCode;
}

Update your column definitions like that :

$scope.gridOptions.columnDefs = [
    {
        field: 'CustomerName',
        // ...
    },
    {
        field: 'OrderNo',
        // ...
    },
    {
        field: 'OrderStatusText',
        // ...
    },
    {
        field: 'OrderDate',
        // ...
    },
    {
        field: 'Total',
        width: '10%',
        cellTemplate: '<div>{{COL_FIELD | currency:"$"}}</div>',
        cellClass: 'gridcell-text-right',
        filters: [
            {
                condition: uiGridConstants.filter.GREATER_THAN_OR_EQUAL,
                placeholder: 'greater than or equal'
            },
            {
                condition: uiGridConstants.filter.LESS_THAN_OR_EQUAL,
                placeholder: 'less than or equal'
            }
        ]
    },