1. Home
  2. Forum
  3. Blazor
  4. PdfExport and CSV Export not working in Template Studio 18.1.0.46 with grid

PdfExport and CSV Export not working in Template Studio 18.1.0.46 with grid

Hi everybody,

  playing around with Template Studio in 18.1.0.46 I noticed PdfExport and CscExport not working in generated Grid ServerSide. No reaction when pressing button except ExcelExport which is working fine.

I am using Microsoft Visual Studio Community 2019 Preview Version 16.6.0 Preview 5.0 and Microsoft Visual Studio Community 2019 Version 16.5.4
with Core SDK 3.1.300-preview-015135

BTW is it possible to have ExcelExport and PdfExport in the same grid (when its working) ?

   regards

       Uwe

5 Replies
VN Vignesh Natarajan Syncfusion Team May 4, 2020 05:25 AM UTC

Hi Uwe,  
 
Thanks for contacting Syncfusion support.  
 
Query: “18.1.0.46 I noticed PdfExport and CscExport not working in generated Grid ServerSide. No reaction when pressing button except ExcelExport which is working fine.” && “BTW is it possible to have ExcelExport and PdfExport in the same grid (when its working) ?” 
 
While creating a  sample using Syncfusion Template studio, by default only ExcelExport will be enabled in Grid and in its toolbar. So we need to enable PdfExport using AllowPdfExport property of Grid to export the it to Pdf format. Also we need to define the toolbar items for Pdf and Csv exporting. 
 
Refer the below code example.  
 
<SfGrid  ID="Grid" DataSource="@Orders"  @ref="Grid" AllowPaging="true" AllowFiltering="true" AllowReordering="true" AllowResizing="true" AllowExcelExport="true" AllowGrouping="true" AllowPdfExport="true" AllowSelection="true" 
              AllowSorting="true" Toolbar="@(new List<string>() { "Add", "Edit", "Delete", "Cancel", "Update","ExcelExport","CsvExport","PdfExport","Search"})" Height="315">         
        <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings> 
        <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.FilterBar"></GridFilterSettings> 
                  <GridSelectionSettings Type="Syncfusion.Blazor.Grids.SelectionType.Multiple"></GridSelectionSettings> 
        <GridEvents OnToolbarClick="ToolbarClick" TValue="Order"></GridEvents> 
. . . . . . . . . . 
    </SfGrid> 
 
 
public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)   {       if (args.Item.Id == "Grid_pdfexport")       {           this.Grid.PdfExport();       }       if (args.Item.Id == "Grid_excelexport")       {           this.Grid.ExcelExport();       }       if (args.Item.Id == "Grid_csvexport")       {           this.Grid.CsvExport();       }   }
 
 
Note: Yes, you can export same Grid to excel and pdf formats.   
 
For your convenience we have prepared a sample to export Same Grid to all three formats (Excel, PDF, CSV) which can be downloaded from below  
 
Refer our UG documentation and online demo for your reference 
 
 
 
Kindly get back to us if you have further queries.   
 
Regards, 
Vignesh Natarajan 


UH Uwe Hein May 4, 2020 10:04 AM UTC

Hi Vignesh Natarajan,

  thanks for your fast answer - I tried your sample without changing anything. CSV is working fine - trying PdfExport I got the following error. Maybe based on my German locale ?

blazor.server.js:1 [2020-05-04T09:57:46.842Z] Information: Normalizing '_blazor' to 'https://localhost:44302/_blazor'.
blazor.server.js:1 [2020-05-04T09:57:46.942Z] Information: WebSocket connected to wss://localhost:44302/_blazor?id=eO0dIfDmsxbXlWfLAiqglQ.
pdfexport-25ca01.min.js:1 Uncaught (in promise) Error: ArgumentOutOfRangeException:index, The character is not supported by the font.
    at e.items (pdfexport-25ca01.min.js:1)
    at i.getCharWidthInternal (pdfexport-25ca01.min.js:1)
    at i.getLineWidth (pdfexport-25ca01.min.js:1)
    at e.getLineWidth (pdfexport-25ca01.min.js:1)
    at e.layoutLine (pdfexport-25ca01.min.js:1)
    at e.doLayout (pdfexport-25ca01.min.js:1)
    at e.layout (pdfexport-25ca01.min.js:1)
    at e.measureWidth (pdfexport-25ca01.min.js:1)
    at e.get [as width] (pdfexport-25ca01.min.js:1)
    at e.measureColumnsWidth (pdfexport-25ca01.min.js:1)
e.items @ pdfexport-25ca01.min.js:1
i.getCharWidthInternal @ pdfexport-25ca01.min.js:1
i.getLineWidth @ pdfexport-25ca01.min.js:1
e.getLineWidth @ pdfexport-25ca01.min.js:1
e.layoutLine @ pdfexport-25ca01.min.js:1
e.doLayout @ pdfexport-25ca01.min.js:1
e.layout @ pdfexport-25ca01.min.js:1
e.measureWidth @ pdfexport-25ca01.min.js:1
get @ pdfexport-25ca01.min.js:1
e.measureColumnsWidth @ pdfexport-25ca01.min.js:1
i.layoutInternal @ pdfexport-25ca01.min.js:1
t.Layouter @ pdfexport-25ca01.min.js:1
e.layout @ pdfexport-25ca01.min.js:1
t.drawHelper @ pdfexport-25ca01.min.js:1
t.drawHelper @ pdfexport-25ca01.min.js:1
e.draw @ pdfexport-25ca01.min.js:1
(anonymous) @ grids-25ca01.min.js:1
Promise.then (async)
(anonymous) @ grids-25ca01.min.js:1
Promise.then (async)
(anonymous) @ grids-25ca01.min.js:1
t.Map @ grids-25ca01.min.js:1
r.pdfExport @ grids-25ca01.min.js:1
(anonymous) @ syncfusion-blazor.min.js:1
u @ syncfusion-blazor.min.js:1
(anonymous) @ syncfusion-blazor.min.js:1
forEach.e.<computed> @ syncfusion-blazor.min.js:1
r @ syncfusion-blazor.min.js:1
s @ syncfusion-blazor.min.js:1
(anonymous) @ syncfusion-blazor.min.js:1
(anonymous) @ syncfusion-blazor.min.js:1
(anonymous) @ syncfusion-blazor.min.js:1
(anonymous) @ blazor.server.js:8
beginInvokeJSFromDotNet @ blazor.server.js:8
(anonymous) @ blazor.server.js:1
e.invokeClientMethod @ blazor.server.js:1
e.processIncomingData @ blazor.server.js:1
connection.onreceive @ blazor.server.js:1
i.onmessage @ blazor.server.js:1

I created another grid app on my own without Template Studio. Here all exports work OK.

    regards

      Uwe


VN Vignesh Natarajan Syncfusion Team May 5, 2020 06:18 AM UTC

Hi Uwe,  
 
Thanks for the update.  
 
Query: “I created another grid app on my own without Template Studio. Here all exports work OK.” 
 
We are glad to hear that you have achieved your requirement using our solution. Kindly get back to us if you have further queries.  
 
Query: “CSV is working fine - trying PdfExport I got the following error. Maybe based on my German locale ?” 
 
We have ran the attached sample and we are not able to reproduce the reported issue at our end. In the attached sample, we have not applied any localization.  
 
If you are still facing the issue kindly share the replication procedure of the issue along with Video demonstration.   
 
Regards,
Vignesh Natarajan 


UH Uwe Hein May 5, 2020 08:35 AM UTC

Hi Vignesh,

  sorry - I was not clear with my text. Running your sample with pdf export I get:

pdfexport-25ca01.min.js:1 Uncaught (in promise) Error: ArgumentOutOfRangeException:index, The character is not supported by the font.

So I thought it might refer to my german operating system (Win 10 prof 1909) causing these problems. This is what I meant with "german locale". 

Found the error ...

Pdf Export is OK when changing Freight to a string. There seems to be a problem with the Double? Type and the german operating system in pdf export. Maybe you consider different data generation for Template Studio to avoid this error. 

    regards

       Uwe

VN Vignesh Natarajan Syncfusion Team May 6, 2020 09:50 AM UTC

Hi Uwe,  
 
Thanks for sharing the details and your suggestion.  
 
Query: “So I thought it might refer to my german operating system (Win 10 prof 1909) causing these problems. This is what I meant with "german locale". ” 
 
We are able to reproduce the reported issue in the provided sample after changing the currency format to german (“€”). While exporting the Grid to PDF format some characters will not be considered as its default language is en-US. This can be overcome by defining True Type font information as base64 string to PdfTrueTypeFont option while exporting. Refer the below code example.  
 
public void ToolbarClick(Syncfusion.Blazor.Navigations.ClickEventArgs args)        {            if (args.Item.Id == "Grid_pdfexport")            {                PdfExportProperties ExportProperties = new PdfExportProperties();                PdfTheme Theme = new PdfTheme();                PdfThemeStyle RecordThemeStyle = new PdfThemeStyle()                {                    FontColor = "#64FA50",                    FontName = "Calibri",                    FontSize = 17,                    Font = new PdfGridFont() { IsTrueType = true, FontStyle = "Italic", FontSize = 8, FontFamily = "AAEAAA…. /gAtAdUALQIDYQNrA3IDqgAA" },/*you fonts famiy in form of base64string*/                                };            Theme.Record = RecordThemeStyle;            ExportProperties.Theme = Theme;            this.Grid.PdfExport(ExportProperties);        }        if (args.Item.Id == "Grid_excelexport")        {            this.Grid.ExcelExport();        }        if (args.Item.Id == "Grid_csvexport")        {            this.Grid.CsvExport();        }    }
 
 
Note : We request you to use the corresponding custom font base64 string in your application, based on your requirement. Please follow the below steps to get the base64 string for the custom font. 
  1. Download TTF file for the corresponding (custom) font (https://www.fontsquirrel.com/fonts/list/language/german  )
  2. Then convert the TTF file into base64 string (https://www.giftofspeed.com/base64-encoder/).
  3. Finally apply the base64 string to pdfTrupetypeFont.
 
For your convenience we have modified the same sample to export in Pdf format. Kindy download the sample from below  
 
 
Refer our UG documentation for your reference 
 
 
Kindly get back to us if you have further queries  
 
Regards, 
Vignesh Natarajan 


Loader.
Up arrow icon