Wrapping in pdf export

6 Replies
3 Participants

Created by
AE Ahmed Eldamity

Platform
Blazor

Platform
Blazor

Control
Grid

Created On
Sep 27, 2025 07:22 PM UTC

Last Activity On
Oct 17, 2025 02:13 PM UTC

Want to subscribe?
SIGN IN

When export pdf some rows wrapping and some rows not as shown in the screen, I can't understand the reason and how to solve

this is the code:

public static string base64Font = "AAEAAAAVAQ.....";

public static byte[] fontBytes = Convert.FromBase64String(base64Font);

public MemoryStream fontStream = new(fontBytes);

private void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args)

{

args.Style = new PdfGridCellStyle

{

Font = new PdfTrueTypeFont(fontStream, 8, PdfFontStyle.Regular),

StringFormat = new PdfStringFormat

{

TextDirection = PdfTextDirection.RightToLeft,

Alignment = PdfTextAlignment.Center,

WordWrap = PdfWordWrapType.Character,

NoClip = true

}

};

}

public async Task ExportClickHandler(MenuEventArgs args, SfGrid<T> Grid, string pageName)

{

if (args.Item.Id == "Pdf")

{

PdfTheme Theme = new()

{

Record = new()

{

FontSize = 12

}

};

var Props = new PdfExportProperties

{

FileName = $"{pageName}-{DateTime.Now.ToString().Replace(" ", "_")}.pdf",

IncludeHeaderRow = true,

ExportType = ExportType.AllPages,

IncludeTemplateColumn = true,

AllowHorizontalOverflow = false,

BeginCellLayout = new PdfGridBeginCellLayoutEventHandler(BeginCellEvent),

Theme = Theme

};

await Grid.ExportToPdfAsync(Props);

}

Attachment: rows_9ad1dac4.png

6 Replies

NP Naveen Palanivel Syncfusion Team September 30, 2025 06:47 PM UTC

Hi Ahmed Eldamity,

We reviewed your query and found that during PDF export, some rows wrap text correctly while others do not. To investigate further, we created a simple sample and tested the scenario on our end. However, we were unable to reproduce the issue. For your reference, please find the sample attached below.

Sample : https://blazorplayground.syncfusion.com/embed/hDhyjEKDSJmOmqZJ?appbar=true&editor=true&result=true&errorlist=true&theme=bootstrap5

To further investigate and validate the issue you're facing, we kindly request you to share the following details:

Please provide the code snippet of the Grid.
Share us the video demonstration of the issue with elaborately, it will be more useful to us.
Share us a simple issue replicating sample or try to modify the mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,
Naveen

AE Ahmed Eldamity October 13, 2025 08:15 PM UTC

Hello Syncfusion Support Team,

I'm currently facing an issue with text wrapping in the Syncfusion DataGrid.

Even though I have enabled wrapping for columns (using settings like AllowTextWrap="true" or setting TextWrap="Wrap" and defining appropriate column widths), the text inside the cells does not wrap — it overflows instead.

I’ve attached a screenshot showing how long text in some columns (such as Name and Email) is not wrapping properly, even though wrapping is expected.

------------------------------

<SfGrid DataSource="Customers" AllowTextWrap="true" Width="100%" @ref="Grid" ID="Grid" EnableRtl="IsRTL" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowPdfExport="true" AllowExcelExport="true">

<span class="grid-empty-message">@localizer["GridEmptyMessage"]</span>

</EmptyRecordTemplate>

</GridTemplates>

<Content>@localizer["NoRecordsSelectedMessage"]</Content>

</DialogTemplates>

</DialogButtons>

</SfDialog>

<Syncfusion.Blazor.Buttons.SfButton CssClass="e-control e-btn e-lib e-tbar-btn e-tbtn-txt p-2 grid-crud-button m-1" EnableRtl="IsRTL" title="@localizer["Add"]" OnClick="AddButton" IconCss="fa-solid fa-plus e-icons me-1 fa-lg" Content="@localizer["Add"]"></Syncfusion.Blazor.Buttons.SfButton>

</AuthorizeContent>

<Syncfusion.Blazor.Buttons.SfButton CssClass="e-control e-btn e-lib e-tbar-btn e-tbtn-txt p-2 grid-crud-button m-1" EnableRtl="IsRTL" title="@localizer["Edit"]" OnClick="EditButton" IconCss="fa-solid fa-pen e-icons me-1" Content="@localizer["Edit"]"></Syncfusion.Blazor.Buttons.SfButton>

</AuthorizeContent>

<Syncfusion.Blazor.Buttons.SfButton CssClass="e-control e-btn e-lib e-tbar-btn e-tbtn-txt p-2 grid-crud-button m-1" EnableRtl="IsRTL" title="@localizer["Delete"]" OnClick="DeleteButton" IconCss="fa-solid fa-trash e-icons me-1" Content="@localizer["Delete"]"></Syncfusion.Blazor.Buttons.SfButton>

</AuthorizeContent>

</Template>

</ToolbarItem>

<DropDownButtonEvents ItemSelected="@(args => ExportClickHandler(args, Grid))"></DropDownButtonEvents>

</DropDownMenuItems>

</SfDropDownButton>

</AuthorizeContent>

</Template>

</ToolbarItem>

</ToolbarItems>

</SfToolbar>

<GridColumn Field="@nameof(CustomerRequestBlazor.SequenceNumber)"

HeaderText="@localizer["Number"]"

TextAlign="TextAlign.Center"

AllowAdding="false"

AllowEditing="false"

Width="100">

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.Id)"

HeaderText="@localizer["Id"]"

IsPrimaryKey="true"

Visible="false"

TextAlign="TextAlign.Center">

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.Name)"

HeaderText="@localizer["Name"]"

TextAlign="TextAlign.Center"

Width="100">

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.NameAr)"

HeaderText="@localizer["NameAr"]"

TextAlign="TextAlign.Center"

Width="100">

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.CountryName)"

HeaderText="@localizer["CountryName"]"

TextAlign="TextAlign.Center"

Width="100">

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.CountryNameAr)"

HeaderText="@localizer["CountryNameAr"]"

TextAlign="TextAlign.Center"

Width="100">

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.Code)"

HeaderText="@localizer["Code"]"

TextAlign="TextAlign.Center"

Width="100"

CustomAttributes="@(new Dictionary<string, object> { { "class", "hide-on-mobile-index" } })">

var con = context as CustomerRequestBlazor;

}

<span>@NumberHelper.FormatNumber(con?.Code ?? string.Empty)</span>

</Template>

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.Email)"

HeaderText="@localizer["Email"]"

TextAlign="TextAlign.Center"

Width="100">

</GridColumn>

<GridColumn Field="@nameof(CustomerRequestBlazor.IsActive)" HeaderText="@localizer["IsActive"]" AllowEditing="false" CustomAttributes="@(new Dictionary<string, object> { { "class", "not-editable" } })" Type="ColumnType.Boolean" DisplayAsCheckBox="true" TextAlign="TextAlign.Center" Width="100">

<span>@localizer["IsActive"]</span>

<span>(@SelectedForActivation)</span>

</div>

</HeaderTemplate>

var ctx = (CustomerRequestBlazor)context;

<span>@(ctx.IsActive ? localizer["Yes"] : localizer["No"])</span>

}

</Template>

</GridColumn>

<GridColumn Visible="@isDetailsVisible" HeaderText="@localizer["Details"]" CustomAttributes="@(new Dictionary<string, object> { { "class", "non-clickable-details-header" } })" AllowSorting="false" AllowFiltering="false" AllowSearching="false" TextAlign="TextAlign.Center" Width="100">

var ctx = (CustomerRequestBlazor)context;

<SfButton Title="@localizer["View"]" CssClass="btn btn-sm border-0 bg-transparent text-black non-clickable-details-header" IconCss="fa-solid fa-eye" @onclick="@(() => DetailsButton(ctx.Id))"></SfButton>

</AuthorizeContent>

}

</Template>

</GridColumn>

</AuthorizeContent>

</GridColumns>

</Template>

</GridPageSettings>

</SfGrid>

_____________________________________

public async Task ExportClickHandler(MenuEventArgs args, SfGrid<CustomerRequestBlazor> customerGrid)

{

List<GridColumn> exportColumns = [

new() { Field = "Id", HeaderText = localizer["Id"], Width = "100" },

new() { Field = "Name", HeaderText = localizer["Name"], Width = "100" },

new() { Field = "NameAr", HeaderText = localizer["NameAr"], Width = "100" },

new() { Field = "CountryName", HeaderText = localizer["CountryName"], Width = "100" },

new() { Field = "CountryNameAr", HeaderText = localizer["CountryNameAr"], Width = "100" },

new() { Field = "Code", HeaderText = localizer["Code"], Width = "100" },

new() { Field = "Email", HeaderText = localizer["Email"], Width = "100" },

new() { Field = "IsActive", HeaderText = localizer["IsActive"], Width = "100" }

];

await exportHandler.ExportClickHandler(args, customerGrid, "customers", exportColumns);

}

_____________________________________

using EIT_ERP_Blazor.Handlers;

using Syncfusion.Blazor.Grids;

using Syncfusion.Blazor.SplitButtons;

using Syncfusion.PdfExport;

using System.Globalization;

namespace EIT_ERP_Blazor.Services.Shared;

public class ExportHandler<T> : IExportHandler<T>

{

public static string base64Font = "AAEAAAA....";

public static byte[] fontBytes = Convert.FromBase64String(base64Font);

public MemoryStream fontStream = new(fontBytes);

private bool IsRTL { get; set; } = CultureInfo.CurrentCulture.TwoLetterISOLanguageName == "ar";

private void BeginCellEvent(object sender, PdfGridBeginCellLayoutEventArgs args)

{

args.Style = new PdfGridCellStyle

{

Font = new PdfTrueTypeFont(fontStream, 8, PdfFontStyle.Regular),

StringFormat = new PdfStringFormat

{

TextDirection = PdfTextDirection.RightToLeft,

Alignment = PdfTextAlignment.Center,

WordWrap = PdfWordWrapType.Character,

NoClip = true

}

};

}

bool IsFirstExport = true;

public async Task ExportClickHandler(MenuEventArgs args, SfGrid<T> Grid, string pageName, List<GridColumn> exportColumns)

{

if (args.Item.Id == "Pdf")

{

PdfTheme Theme = new()

{

Record = new()

{

FontSize = 12

}

};

var Props = new PdfExportProperties

{

FileName = $"{pageName}-{DateTime.Now.ToString().Replace(" ", "_")}.pdf",

IncludeHeaderRow = true,

ExportType = ExportType.AllPages,

IncludeTemplateColumn = true,

AllowHorizontalOverflow = false,

BeginCellLayout = new PdfGridBeginCellLayoutEventHandler(BeginCellEvent),

Theme = Theme,

Columns = exportColumns

};

await Grid.ExportToPdfAsync(Props);

}

else if (args.Item.Id == "Excel")

{

var ExportProperties = new ExcelExportProperties

{

FileName = $"{pageName}-{DateTime.Now.ToString().Replace(" ", "_")}.xlsx",

ExportType = ExportType.AllPages

};

await Grid.ExportToExcelAsync(ExportProperties);

}

Attachment: grid_97cf5075.png

NP Naveen Palanivel Syncfusion Team October 14, 2025 11:39 AM UTC

Hi Ahmed Eldamity,

Thank you for the code snippet.

Based on code snippet, we created a sample to investigate further and tested the scenario on our end. However, we were unable to reproduce the reported issue. For your reference, please find the sample attached below.

To further investigate and validate the issue you're facing, we kindly request you to share the following details:

Share us the video demonstration of the issue with elaborately, it will be more useful to us.
Share us a simple issue replicating sample or try to modify the mentioned sample.

The above-requested details will be very helpful for us to validate the reported query at our end and provide the solution as early as possible.

Regards,
Naveen

Attachment: DataGridServerAppNet9_cf01a20f.zip

AE Ahmed Eldamity October 16, 2025 11:37 AM UTC

Hi Naveen Palanivel,

I think the problem in font, your font make Arabic text not completed and the font I used make wrapping not apply on all cells. I shared screen on pdf file export it from your project. it write "لولايا لمتحد" instead of "الولايات المتحدة" so how I solve the problem.

Attachment: Screenshot_20251016_143604_c9f2ca17.png

AE Ahmed Eldamity October 16, 2025 11:37 AM UTC

Hi Naveen Palanivel,

GR Guhanathan Ramanathan Syncfusion Team October 17, 2025 02:13 PM UTC

Hi ,

Kindly share the font you're currently using and also provide a reproducible sample where the issue occurs, so we can investigate why wrapping isn't applied consistently across all cells in the PDF export.

Regards,

Guhanathan R

Need More Help?

Get personalized assistance from our support team.

Contact Support

6 Replies
3 Participants
Want to subscribe?
SIGN IN
Created by
AE Ahmed Eldamity
Platform
Blazor
Control
Grid
Created On
Sep 27, 2025 07:22 PM UTC
Last Activity On
Oct 17, 2025 02:13 PM UTC

Need More Help?

Get personalized assistance from our support team.

Contact Support