DataGrid PDF export does not support Arabic letters and right-to-left

[Ali.S]

Hello

I encountered a problem to export PDF DatGrid of Arabic words.

The output is complete, but the Arabic words are not displayed. I tried many things, but the problem was not solved.

And the other problem is that the columns do not right to left

PdfExportProperties ExportProperties = new PdfExportProperties();

            List<GridColumn> ExportColumns = new List<GridColumn>();

            ExportColumns.Add(new GridColumn() { Field = "Date", HeaderText = "تاریخ", Width = "100", Format = "d" });

            ExportColumns.Add(new GridColumn() { Field = "TemperatureC", HeaderText = "دما سانتی گراد", Width = "120" });

            ExportColumns.Add(new GridColumn() { Field = "TemperatureF", HeaderText = "دما فارنهایت", Width = "120" });

            ExportColumns.Add(new GridColumn() { Field = "Summary", HeaderText = "نوع", TextAlign = TextAlign.Right });

            ExportProperties.IncludeTemplateColumn = true;

            ExportProperties.Columns = ExportColumns;

            await this.Grid.PdfExport(ExportProperties);

Thank you for your guidance

[Prathap Senthil]

Hi Meysam,

Greetings from Syncfusion support,

We have provided support for a limited number of fonts in our default settings. So, to export Arabic or any other language letters(True type font) to PDF format, we need to set True Type font information as base64 string to FontFamily of PdfGridFont. We have provided support for PdfTrueTypeFont in PdfExport() method.  Using this we can export the different font to pdf format from Grid. To apply your custom TTF, you need to set it as a base64 string for the FontFamily. Additionally, you can achieve Arabic text in the header text by using the Theme.Header = RecordThemeStyle in the pdf toolbar click event and using the pdfheadercell info event to change the direction to right to left.we have included the code snippet and sample for you reference.

  Syncfusion.PdfExport.PdfStringFormat StringFormat = new Syncfusion.PdfExport.PdfStringFormat()

        {

            TextDirection = Syncfusion.PdfExport.PdfTextDirection.RightToLeft,

            Alignment = Syncfusion.PdfExport.PdfTextAlignment.Right,

        };

    public void PdfHeaderQueryCellInfoHandler(PdfHeaderQueryCellInfoEventArgs args)

    {

 

        if (args.Column.Field == "Freight")

        {

 

            args.Cell.Value = "دما فارنهایت";

            args.Cell.StringFormat = StringFormat;

 

 

 

        }

    }
  public async Task ToolbarClickHandler(Syncfusion.Blazor.Navigations.ClickEventArgs args)

   {

        if (args.Item.Id == "Grid_pdfexport")  //Id is combination of Grid's ID and itemname

        {

            PdfExportProperties ExportProperties = new PdfExportProperties();

 

            PdfTheme Theme = new PdfTheme();

            PdfThemeStyle RecordThemeStyle = new PdfThemeStyle()

                {
Font = new PdfGridFont() { IsTrueType = true, FontSize = 11, FontFamily = "AAEAAAAO……..”
};

            Theme.Record = RecordThemeStyle;

            Theme.Header = RecordThemeStyle;

            ExportProperties.Theme = Theme;

 

            PdfHeader Header = new PdfHeader()

                {

                    FromTop = 0,

                    Height = 130,

 

                };

            List<GridColumn> ExportColumns = new List<GridColumn>();

#pragma warning disable BL0005

            ExportColumns.Add(new GridColumn() { Field = "Freight", HeaderText = "دما فارنهایت", Width = "100" });

            ExportColumns.Add(new GridColumn() { Field = "OrderDate", HeaderText = "Date", Width = "120", Format = "d" });

            ExportColumns.Add(new GridColumn() { Field = "CustomerID", HeaderText = "Customer Name", Width = "120", Format = "C2", TextAlign = TextAlign.Right });

#pragma warning restore BL0005

            ExportProperties.Columns = ExportColumns;

            ExportProperties.Header = Header;

            await this.DefaultGrid.PdfExport(ExportProperties);

        }

    }

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/czech  )
2. Then convert the TTF file into base64 string (https://www.giftofspeed.com/base64-encoder/).
3. Finally apply the base64 string to pdfTrupetypeFont

Refer our UG documentation for your reference.

https://blazor.syncfusion.com/documentation/datagrid/pdf-export/#theme

Regards,
Prathap s

Attachment: BlazorDataGrid_acdb556.zip

[Ali.S]

Hello

Thank you for your attention and time to answer.

Your answer was great and solved most of the problem. In your example, the Arabic font problem is solved in the column titles, but in the rows, if the text is Arabic, it is displayed, but the letters are written separately from each other and vice versa.

If possible, suggest the method to solve this problem.

I am attaching the output image that I tested on your project.

Thanks & Regards

Attachment: fonttest_2399e651.rar

[Prathap Senthil]

Thanks for the update!

Based on your reported issue, we recommend using the PdfQueryCellInfoEvent to change the direction to right-to-left. Please see the code snippet and sample provided below for your reference:

<GridEvents OnToolbarClick="ToolbarClickHandler" PdfQueryCellInfoEvent="PdfQueryCellInfoHandler" PdfHeaderQueryCellInfoEvent="PdfHeaderQueryCellInfoHandler" TValue="Order"></GridEvents>

public void PdfQueryCellInfoHandler(PdfQueryCellInfoEventArgs<Order> args)

    {

        if(args.Column.Field == "CustomerID")

        {

           

            args.Cell.StringFormat = StringFormat;

        }

       

    }

 

Documentation: https://blazor.syncfusion.com/documentation/datagrid/events#pdfquerycellinfoevent

Attachment: BlazorDataGrid_9761e7dd.zip