1. Home
  2. Forum
  3. JavaScript - EJ 2
  4. Grid PDF Export Issues and PDF column layout

Grid PDF Export Issues and PDF column layout

We are using Grid control in one of the web pages in our portal. We are having below issues with the export to PDF.

     1. We have defined two of the columns of type 'datetime'. So when we try to export it to pdf, the console displays the below error.   
          Error: Format options or type given must be invalid   
 
         The export to excel works fine. But pdf never works.

    2. The exported PDF does not display all the columns in a single page. It spans across multiple pages. We need all the columns to be displayed in a single page.

I have uploaded the zip file. Please run index.html to fix the issues. I have also included Export (36).pdf as part of zip.
 

Attachment: BrokerPortal_60b77f47.zip

7 Replies
BS Balaji Sekar Syncfusion Team February 19, 2020 01:00 PM UTC

Hi Naveen, 
 
Greetings from Syncfusion. 
 
Query#1: Error: Format options or type given must be invalid 
 
We have analyzed your query and the attached sample and we found that the AcceptedDate and SubmittedDate  values are not parsed as date object and which caused the script error while parsing the data. We have formatted the  column format  as object instead of string format  because the PdfExport component does not supports the string type date format  and date values are not parsed in the PDFExport component so  we have used the queryCellInfo method to parse the number values into date object hence it resolved the script error. 
 
Query#2: The exported PDF does not display all the columns in a single page. It spans across multiple pages. 
 
The above mentioned solution resolved the query#2 also. We have shared the sample for your reference. 
 
Index.js 
 
function customiseCell(args) { 

if( args.column.field === 'SubmittedDate' || args.column.field === 'AcceptedDate' ){                              if((args.data.SubmittedDate) && typeof(args.data.SubmittedDate)=== 'number'){ 
args.data.SubmittedDate= new Date(args.data.SubmittedDate); 
} 
if(args.data.AcceptedDate && typeof(args.data.AcceptedDate)=== 'number'){ 
args.data.AcceptedDate = new Date(args.data.AcceptedDate); 
} 

} 

var grid = new ej.grids.Grid({ 
dataSource:  new ej.data.DataUtil.parse.parseJson(employeeData), 
gridLines: 'Both', 
allowPaging: true, 
allowSorting: true, 
allowTextWrap: true, 
allowExcelExport: true, 
allowPdfExport: true, 
toolbar: ['Search','ExcelExport','PdfExport'], 
queryCellInfo: customiseCell, 
}) 
 
 
Please get back to us if you need further assistance. 
 
Regards, 
Balaji Sekar. 


NR NAVEEN RAAJU February 19, 2020 06:08 PM UTC

Thanks for the response. The export to PDF works after making the below change.

However, the export to pdf does not work when the displayed grid has more than one page. I can see the below error in the console.

ej2.min.js:10 Uncaught (in promise) TypeError: e.getDate is not a function

One more issue is , the exported PDF does not display all the columns in a single page. It spans across multiple pages. Please take a look at 'Export (36).pdf'.  We need all the columns to be fit in a single page.

I have attached the source code. Please run index.html to replicate the issue.

Attachment: BrokerPortal_d0fecef7.zip

DR Dhivya Rajendran Syncfusion Team February 20, 2020 09:22 AM UTC

Hi Naveen, 

Thanks for your update. 
 
Query#1: ej2.min.js:10 Uncaught (in promise) TypeError: e.getDate is not a function 
 
We have analyzed your query and found that the main issue for this script error is you have not converted the date objects for AcceptedDate and SubmittedDate column. We suggest you to convert date as date object to resolve the script error. In which we have converted the AcceptedDate and SubmittedDate column values into date objects in dataBound event. 

Query#2: the exported PDF does not display all the columns in a single page.  
  
By default when the number of the columns increases the width of the total column will exceeds the pdf total width to print the columns. Hence we have changed the width of the each column using pdfQueryCellInfo  in that we have taken  PDFGrid columns  and changed the width of the each column to print them in a single page. 

Code Snippet: 
Index.js 
 
var grid = new ej.grids.Grid({ 
dataSource:  employeeData, 
gridLines: 'Both', 
allowPaging: true, 
allowSorting: true, 
allowTextWrap: true, 
allowExcelExport: true, 
allowPdfExport: true, 
toolbar: ['Search','ExcelExport','PdfExport'], 
queryCellInfo: customiseCell, 
excelQueryCellInfo: excelQueryCellInfo, 
pdfQueryCellInfo : pdfexport, 
dataBound:function(args){ 
this.dataSource.filter((data)=>{ 
if((data.SubmittedDate) && typeof(data.SubmittedDate)=== 'number'){ 
data.SubmittedDate= new Date(data.SubmittedDate); 
} 
if(data.AcceptedDate && typeof(data.AcceptedDate)=== 'number'){ 
data.AcceptedDate = new Date(data.AcceptedDate); 
} 
}); 
} 

function pdfexport(args){ 
var count = 0; 
var width = [30,75,45,75,80,45,60,60,40] 
var pdfcol = args.cell.gridRow.pdfGrid.columns; 
var gridCol = grid.getVisibleColumns(); 
if(flag){ 
gridCol.filter((args)=>{ 
pdfcol.getColumn(count).width = width[count]; 
count++; 
}); 
flag = false; 
} 
} 
 
 
 
Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


NR NAVEEN RAAJU February 20, 2020 09:26 PM UTC

Thanks much for the quick turnaround. The solution works fine as expected.

I just need one more functionality . We are using the grid in one of the web pages . The grid will display huge amount of data from backend and it might take few seconds to load the grid. We have few other options to reload the grid dynamically on the page .So if there is any functionality in the grid control to display some loading icon when data is being retrieved and rendered, it will be nice.

DR Dhivya Rajendran Syncfusion Team February 21, 2020 01:14 PM UTC

Hi Naveen, 

Thanks for your update. 

Query : there is any functionality in the grid control to display some loading icon when data is being retrieved and rendered, it will be nice. 

By default, we have method to show and hide spinner in Grid. You can show the spinner by calling the showSpinner method and to hide the spinner you can call hideSpinner method. We have prepared sample in which we have used the load event and at initial state we have not set any data source to grid hence we have used the ajax function to fetch data and in the success of the ajax we have assigned the data source to the grid. we have shown the spinner at the  start of the load event and hidden the spinner in the success of the ajax function. We have shared the sample for your reference. 

Code Snippet: 
Index.js 
 
load: function (args) { 
    grid.showSpinner(); 
    var ajax = new ej.base.Ajax("https://ej2services.syncfusion.com/production/web-services/api/Orders", "GET"); 
    ajax.send(); 
    ajax.onSuccess = function (result) { 
      grid.dataSource = new ej.data.DataManager({ 
        url: hostUrl + 'api/Orders', 
        adaptor: new ej.data.WebApiAdaptor(), 
        crossDomain: true 
      }); 
      grid.hideSpinner(); 
     
    } 
  }, 


Please get back to us if you need further assistance. 

Regards, 
R.Dhivya 


NR NAVEEN RAAJU February 21, 2020 04:18 PM UTC

Thanks for the assistance. Much appreciated. All the issues are resolved.

DR Dhivya Rajendran Syncfusion Team February 24, 2020 09:23 AM UTC

Hi Naveen, 

Thanks for your update. 

We are happy to hear that the provided suggestion was helpful to resolve the reported problems. Please get back to us if you require further assistance from us. 

Regards, 
R.Dhivya  


Loader.
Up arrow icon