From c4ad473549401f04ead2855720161b708380d757 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 13 Mar 2025 19:10:39 +0200 Subject: [PATCH 01/28] chore(grid): refactor export notes --- _contentTemplates/grid/export.md | 13 +------- components/grid/export/csv.md | 17 +++++------ components/grid/export/excel.md | 21 ++++++------- components/grid/export/overview.md | 49 ++++++++++++++++++++++++++++++ components/grid/export/pdf.md | 36 ++++++++++++---------- 5 files changed, 87 insertions(+), 49 deletions(-) create mode 100644 components/grid/export/overview.md diff --git a/_contentTemplates/grid/export.md b/_contentTemplates/grid/export.md index 5689069db9..1f0990feb0 100644 --- a/_contentTemplates/grid/export.md +++ b/_contentTemplates/grid/export.md @@ -1,20 +1,8 @@ #export-common-notes -* `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in exported format and these string values are the most common ones used in data and macros. -* Date and number formats are exported with the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. -* The Grid exports only `` instances. Other types of columns are not exported, for example command, checkbox, hierarchy, group and row-drag columns. -* If the Grid is using `OnRead` and is exporting all pages, it will fire an additional `OnRead` event at the time of exporting, with a request `PageSize` of `0`. This will enable the component to obtain all data. -* With Server-side Blazor, the file may become larger than the default SignalR connection limit, and this can disconnect the client and result in an error. Generally, this requires quite a lot of data to happen, but you may need to increase the size limit of the connection in the `ConfigureServices` method of your `Startup.cs` file, for example: - -````C#.skip-repl -services.AddServerSideBlazor().AddHubOptions(o => -{ - o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB -}); -```` * With Client-side Blazor (WebAssembly), all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. This means that while the file is being generated, the UI will be unresponsive, so you may want to show a loading sign to the user through the `OnClick` handler of the command button, something like: @@ -76,3 +64,4 @@ services.AddServerSideBlazor().AddHubOptions(o => } ```` #end + \ No newline at end of file diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md index 676526bebb..2e6d52907f 100644 --- a/components/grid/export/csv.md +++ b/components/grid/export/csv.md @@ -5,7 +5,7 @@ description: Export to CSV the Grid for Blazor. slug: grid-export-csv tags: telerik,blazor,grid,export,csv published: True -position: 1 +position: 3 --- # Grid CSV Export @@ -17,6 +17,7 @@ When you click the Export button, your browser will receive the resulting file. #### In This Article - [Basics](#basics) + - [Limitations](#limitations) - [Programmatic Export](#programmatic-export) - [Customization](#customization) - [Notes](#notes) @@ -41,6 +42,8 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp | `FileName` | `string` | The name of the file. The grid will add the `.csv` extension for you. | | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. | +> Before enabling the export feature, ensure you are familiar with [its specifics](slug:grid-export-overview#how-it-works). + >caption Export the Grid to CSV - Example ````RAZOR @@ -99,6 +102,10 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp } ```` +## Limitations + +* Column widths are not applied because a CSV document does not have such a concept. You can use any units in the grid itself, they will not be reflected in the exported document. If you need to add such structure, consider [exporting to an Excel file](slug:grid-export-excel). + ## Programmatic Export You can programmatically invoke the export feature of the Grid, by using the following methods exposed on the `@ref` of the Grid: @@ -198,14 +205,6 @@ For more advanced customizations (such as coloring the headers, bolding the titl [Read more about how to customize the exported file...](slug:grid-export-events) -## Notes - -The CSV export has the following specifics: - -* Column widths are not applied because a CSV document does not have such a concept. You can use any units in the grid itself, they will not be reflected in the exported document. If you need to add such structure, consider [exporting to an Excel file](slug:grid-export-excel). -* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own Excel file. Find a project example on how to generate your own exported file. - -@[template](/_contentTemplates/grid/export.md#export-common-notes) ## See Also diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index 01db7bcbf3..3174491066 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -5,7 +5,7 @@ description: Export to Excel the Grid for Blazor. slug: grid-export-excel tags: telerik,blazor,grid,export,excel published: True -position: 1 +position: 5 --- # Grid Excel Export @@ -18,9 +18,9 @@ When you click the Export button, your browser will receive the resulting file. #### In This Article - [Basics](#basics) + - [Requirements](#requirements) - [Programmatic Export](#programmatic-export) - [Customization](#customization) - - [Notes](#notes) ## Basics @@ -41,6 +41,8 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE | `FileName` | `string` | The name of the file. The grid will add the `.xslx` extension for you. | | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. | +> Before enabling the export feature, ensure you are familiar with [its specifics](slug:grid-export-overview#how-it-works). + >caption Export the Grid to Excel - Example ````RAZOR @@ -99,6 +101,11 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE } ```` + +## Requirements + +* If you are setting `Width` to the columns, use only `px`. Excel does not understand units different than `px` and if you use them (such as `rem` or `%`), it will fail to parse them and will render a collapsed (hidden) column with zero width. + ## Programmatic Export You can programmatically invoke the export feature of the Grid, by using the following methods exposed on the `@ref` of the Grid: @@ -199,16 +206,6 @@ For more advanced customization (such as coloring the headers or bolding the tit Read more about how to [customize the exported file](slug:grid-export-events). -## Notes - -The Excel export has the following specifics: - -* Excel does not understand units different than `px` for the column `Width`, and if you use them (such as `rem` or `%`), it will fail to parse them and will render a collapsed (hidden) column with zero width. -* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own Excel file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). - -@[template](/_contentTemplates/grid/export.md#export-common-notes) - - ## See Also * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md new file mode 100644 index 0000000000..9be406f411 --- /dev/null +++ b/components/grid/export/overview.md @@ -0,0 +1,49 @@ +--- +title: Overview +page_title: Grid - Export Overview +description: Export basics for the Grid for Blazor. +slug: grid-export-overview +tags: telerik, blazor, grid, export +published: True +position: 1 +--- + +# Blazor Grid Export + +The Grid for Blazor provides a built-in functionality to export the data to: +* [CSV](slug:grid-export-csv) +* [Excel](slug:grid-export-excel) +* [PDF](slug:grid-export-pdf) + +Before proceeding to the dedicated export articles, ensure you are familiar with the following specifics: + + + +## How It Works + +* If the Grid is using `OnRead` and is exporting all pages, it will fire an additional `OnRead` event at the time of exporting, with a request `PageSize` of `0`. This will enable the component to obtain all data. + +## Requirements + +* With Server-side Blazor, the file may become larger than the default SignalR connection limit, and this can disconnect the client and result in an error. Generally, this requires quite a lot of data to happen, but you may need to increase the size limit of the connection in the `ConfigureServices` method of your `Startup.cs` file, for example: + +````C#.skip-repl +services.AddServerSideBlazor().AddHubOptions(o => +{ + o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB +}); +```` + +## Limitations + +* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own PDF file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). + +* `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in exported format and these string values are the most common ones used in data and macros. + +* Date and number formats are exported with the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). + +* The Grid exports only `` instances. Other types of columns are not exported, for example command, checkbox, hierarchy, group and row-drag columns. + +## Customization + +The Grid allows customizing the exported files - determine the desired data to be exported, changing the number/date formats and more. For such customizations, [handle the export events](slug: grid-export-events) \ No newline at end of file diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index df542016f9..0b06a17a52 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -5,7 +5,7 @@ description: Export to PDF the Grid for Blazor. slug: grid-export-pdf tags: telerik,blazor,grid,export,pdf published: True -position: 1 +position: 7 --- # Grid PDF Export @@ -17,9 +17,11 @@ When you click the Export button, your browser will receive the resulting file. #### In This Article - [Basics](#basics) + - [How It Works](#how-it-works) + - [Requirements](#requirements) + - [Limitations](#limitations) - [Programmatic Export](#programmatic-export) - [Customization](#customization) - - [Notes](#notes) - [Custom Export](#custom-export) ## Basics @@ -43,6 +45,8 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp | `PaperSize` | `GridPdfExportPaperSize` enum
(`A4`) | The size of the paper for the exported file. | | `PageOrientation` | `GridPdfExportPageOrientation` enum
(`Portrait`)| The orientation of the page—portrait or landscape. | +> Before enabling the export feature, ensure you are familiar with [its specifics](slug:grid-export-overview#how-it-works). + >caption Export the Grid to PDF ````RAZOR @@ -103,6 +107,20 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp } ```` +## How It Works + +* For performance reasons, the PDF export mechanism draws each cell value on a single line. Any content that does not fit in the available space will be clipped. Text wrapping and PDF column resizing is not supported. +* Exporting to PDF in UI for Blazor is different from exporting in Kendo jQuery, where the full HTML is exported. The Blazor export to PDF will export the Grid to a table, similar to an Excel table. If you want [to export to PDF as HTML, you can use a custom approach](#custom-export). + +## Requirements + +* PDF export requires pixel widths for all columns. Widths in other units such as `%` or `em` cannot be translated correctly and the respective columns will collapse in the exported PDF file. The column widths for the PDF export can differ from the ones in the Grid configuration for the web browser. To set column widths for the PDF file only, use the `Width` property of the [`OnBeforeExportEventArgs.Columns`](slug:grid-export-events#for-pdf-export) members. +* Provide appropriate `PaperSize` and `PageOrientation` properties. For example, if you want to render 20 columns (100px each) in an A4 sheet, then this will yield unexpected results. The column dimensions in a PDF file are fixed, thus they cannot be resized as in Excel, which requires the developer to ensure proper export dimensions. + +## Limitations + +* Some PDF fonts do not include Cyrillic or other non-Latin characters. In such cases, [load a compatible font explicitly](https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider). + ## Programmatic Export You can programmatically invoke the export feature of the Grid, by using the following methods exposed on the `@ref` of the Grid: @@ -200,20 +218,6 @@ For more advanced customization the Grid lets you get the `MemoryStream` of the Read more about how to [customize the exported file](slug:grid-export-events). -## Notes - -The PDF export has the following specifics: - -* PDF export requires pixel widths for all columns. Widths in other units such as `%` or `em` cannot be translated correctly and the respective columns will collapse in the exported PDF file. The column widths for the PDF export can differ from the ones in the Grid configuration for the web browser. To set column widths for the PDF file only, use the `Width` property of the [`OnBeforeExportEventArgs.Columns`](slug:grid-export-events#for-pdf-export) members. -* For performance reasons, the PDF export mechanism draws each cell value on a single line. Any content that does not fit in the available space will be clipped. Text wrapping and PDF column resizing is not supported. -* Provide appropriate `PaperSize` and `PageOrientation` properties. For example, if you want to render 20 columns (100px each) in an A4 sheet, then this will yield unexpected results. The column dimensions in a PDF file are fixed, thus they cannot be resized as in Excel, which requires the developer to ensure proper export dimensions. -* Exporting to PDF in UI for Blazor is different from exporting in Kendo jQuery, where the full HTML is exported. The Blazor export to PDF will export the Grid to a table, similar to an Excel table. If you want [to export to PDF as HTML, you can use a custom approach](#custom-export). -* Some PDF fonts do not include Cyrillic or other non-Latin characters. In such cases, [load a compatible font explicitly](https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider). -* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own PDF file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). - -@[template](/_contentTemplates/grid/export.md#export-common-notes) - - ## Custom Export If you want to have full control over the PDF export, you can perform it with a custom approach. From 6ccf96fde112897806ffdd5f5f718b926751a93f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Mon, 17 Mar 2025 19:20:43 +0200 Subject: [PATCH 02/28] chore(Grid): add kb for showing loader during export --- _contentTemplates/grid/export.md | 67 ---------- components/grid/export/csv.md | 13 +- components/grid/export/excel.md | 1 + components/grid/export/overview.md | 1 + components/grid/export/pdf.md | 1 + .../grid-show-loader-while-exporting | 120 ++++++++++++++++++ 6 files changed, 130 insertions(+), 73 deletions(-) delete mode 100644 _contentTemplates/grid/export.md create mode 100644 knowledge-base/grid-show-loader-while-exporting diff --git a/_contentTemplates/grid/export.md b/_contentTemplates/grid/export.md deleted file mode 100644 index 1f0990feb0..0000000000 --- a/_contentTemplates/grid/export.md +++ /dev/null @@ -1,67 +0,0 @@ -#export-common-notes - - - - - -* With Client-side Blazor (WebAssembly), all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. This means that while the file is being generated, the UI will be unresponsive, so you may want to show a loading sign to the user through the `OnClick` handler of the command button, something like: - -````RAZOR.skip-repl Component -@* Exporting a lot of rows can be slow in a WebAssembly app more so than in a server-side app, and it blocks the UI *@ - - - - Export to Excel - Export to CSV - - - - - - - - - Please wait... - We are exporting your data, your file will download shortly. - - -@code { - bool isExporting { get; set; } - - async Task ShowLoadingSign() - { - isExporting = true; - StateHasChanged(); - // This won't work for server-side Blazor, the UI will render immediately after the delay and the loading sign will only flicker - await Task.Delay(50); - isExporting = false; - } - - List GridData { get; set; } - - protected override void OnInitialized() - { - GridData = Enumerable.Range(1, 1000).Select(x => new SampleData - { - ProductId = x, - ProductName = $"Product {x}", - UnitsInStock = x * 2, - Price = 3.14159m * x, - Discontinued = x % 4 == 0, - FirstReleaseDate = DateTime.Now.AddDays(-x) - }).ToList(); - } - - public class SampleData - { - public int ProductId { get; set; } - public string ProductName { get; set; } - public int UnitsInStock { get; set; } - public decimal Price { get; set; } - public bool Discontinued { get; set; } - public DateTime FirstReleaseDate { get; set; } - } -} -```` -#end - \ No newline at end of file diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md index 2e6d52907f..0f83ab9a9c 100644 --- a/components/grid/export/csv.md +++ b/components/grid/export/csv.md @@ -208,9 +208,10 @@ For more advanced customizations (such as coloring the headers, bolding the titl ## See Also - * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) - * [Custom cell formatting of the exported file with RadSpreadProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadprocessing) - * [Custom cell formatting of the exported file with RadSpreadStreamProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadstreamprocessing) - * [Format numbers and dates in the exported CSV file from the Grid](slug:grid-kb-number-formatting-of-the-csv-export) - * [Change the default CSV delimiter (comma) during Grid export](slug:grid-kb-csv-export-change-field-delimiter) - * [Blazor Grid](slug:grid-overview) +* [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) +* [Custom cell formatting of the exported file with RadSpreadProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadprocessing) +* [Custom cell formatting of the exported file with RadSpreadStreamProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadstreamprocessing) +* [Format numbers and dates in the exported CSV file from the Grid](slug:grid-kb-number-formatting-of-the-csv-export) +* [Change the default CSV delimiter (comma) during Grid export](slug:grid-kb-csv-export-change-field-delimiter) +* [Sowing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting) +* [Blazor Grid](slug:grid-overview) diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index 3174491066..953c5409f3 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -211,4 +211,5 @@ Read more about how to [customize the exported file](slug:grid-export-events). * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) * [Custom Cell Formatting of the Exported File with RadSpreadProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadprocessing) * [Custom Cell Formatting of the Exported File with RadSpreadStreamProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadstreamprocessing) + * [Sowing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting) * [Blazor Grid](slug:grid-overview) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 9be406f411..4993549012 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -22,6 +22,7 @@ Before proceeding to the dedicated export articles, ensure you are familiar with ## How It Works * If the Grid is using `OnRead` and is exporting all pages, it will fire an additional `OnRead` event at the time of exporting, with a request `PageSize` of `0`. This will enable the component to obtain all data. +* The time for export will be longer if the Grid has a lot of records and/or in Client-side Blazor (WebAssembly) where all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. While the file is being generated, the UI will be unresponsive, so you may want to [show a loading sign to the user during the export process](slug: grid-kb-show-loader-while-exporting). ## Requirements diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index 0b06a17a52..2a993487ec 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -232,3 +232,4 @@ The following sample projects show two ways to implement a PDF export * [Blazor Grid](slug:grid-overview) * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) +* [Sowing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting) diff --git a/knowledge-base/grid-show-loader-while-exporting b/knowledge-base/grid-show-loader-while-exporting new file mode 100644 index 0000000000..5678973842 --- /dev/null +++ b/knowledge-base/grid-show-loader-while-exporting @@ -0,0 +1,120 @@ +--- +title: Showing a Loader While Exporting the Grid +description: Learn how to display a LoaderContainer over the Blazor Grid while it is exporting the items to Excel, CSV or PDF +type: how-to +page_title: How to Show a Loader While Exporting the Grid +slug: grid-kb-show-loader-while-exporting +tags: grid, blazor, loader, loadercontainer, export, excel, csv, pdf +res_type: kb +ticketid: +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +I have many items in the Grid and the export to Excel, CSV or PDF takes a while. Is it possible to show a loader while the Grid is exporting to prevent the user from interacting with the component during this time? + +## Solution + +To display a loader over the Grid during the Excel, CSV or PDF export, follow the steps below: + +1. Choose the deired UI for the Loader (this article shows the first two options): + 1. A [LoaderContainer](slug: loadercontainer-overview). Place the LoaderContainer component placed in a container together with the Grid and add `position:relative` style on this container to ensure the LoaderContainer covers only the Grid. + 1. A modal [Window](slug:) with a [Loader](slug: loader-overview) component inside. + 1. Your custom loader. +1. Handle the [`OnBeforeExport` event](slug: grid-export-events#onbeforeexport) of the Grid to show the loader (set the loader's visibility to `true`). +1. Handle the [`OnAfterExport` event](slug: grid-export-events#onafterexport) of the Grid to hide the loader (set the loader's visibility to `false`). + +>caption Show a Loader during Grid export + +````RAZOR +@* Option 1.1. - a LoaderContainer *@ + +
+ + + + Export to Excel + + + + + + + + + + +
+ +@* Option 1.2. - a modal Window with a Loader component inside. *@ + +@* + Please wait... + + + We are exporting your data, your file will download shortly. + + *@ + +@code { + private bool isExporting { get; set; } + + private bool ExportAllPages { get; set; } = true; + + private List GridData { get; set; } + + private async Task OnExcelBeforeExport(GridBeforeExcelExportEventArgs args) + { + isExporting = true; + + // Release the UI thread so the loading indicator can be rendered + await Task.Delay(1); + } + + private async Task OnExcelAfterExport(GridAfterExcelExportEventArgs args) + { + isExporting = false; + } + + protected override void OnInitialized() + { + GridData = Enumerable.Range(1, 100000).Select(x => new SampleData + { + ProductId = x, + ProductName = $"Product {x}", + UnitsInStock = x * 2, + Price = 3.14159m * x, + Discontinued = x % 4 == 0, + }).ToList(); + } + + public class SampleData + { + public int ProductId { get; set; } + public string ProductName { get; set; } + public int UnitsInStock { get; set; } + public decimal Price { get; set; } + public bool Discontinued { get; set; } + } +} +```` + + +## See Also + +* [Grid Export Overview](slug: grid-export-overview) +* [Grid Export to CSV](slug: grid-export-csv) +* [Grid Export to Excel](slug: grid-export-excel) +* [Grid Export to PDF](slug: grid-export-pdf) +* [Grid Export Events](slug: grid-export-events) From 8e4a9763071570f85f16e1720c6c624bae6202ac Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Wed, 19 Mar 2025 19:26:52 +0200 Subject: [PATCH 03/28] chore(grid): kb for load cyrillic fonts when exporting to pdf --- .../grid-load-cyrillic-fonts-in-pdf-export.md | 30 +++++++++++++++++++ 1 file changed, 30 insertions(+) create mode 100644 knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md diff --git a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md new file mode 100644 index 0000000000..7aeec0bd80 --- /dev/null +++ b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md @@ -0,0 +1,30 @@ +--- +title: Loading Cyrillic Fonts When Exporting the Grid to PDF +description: How to lLoad Cyrillic fonts when exporting the Blazor Grid to PDF? +type: how-to +page_title: Loading Cyrillic Fonts When Exporting the Grid to PDF +slug: grid-kb-load-cyrillic-fonts-in-pdf-export +position: +tags: +res_type: kb +--- + +## Environment + + + + + + + + +
ProductGrid for Blazor
+ +## Description + +My Grid uses a Cyrillic font but when I export it to PDF the text is missing. How to ensure the text will be properly included in the exported PDF file when using a Cyrillic font? +How to load data on demand when you have Hierarchy Grid? + +## Solution + +Some PDF fonts do not have Cyrillic (or other alphabets) characters. In such cases, you can load the fonts explicitly. \ No newline at end of file From 295ab27d8bf71031767a761611da4317328fdd17 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 20 Mar 2025 19:04:37 +0200 Subject: [PATCH 04/28] chore(grid): add example for loading cyrillic fonts --- components/grid/export/pdf.md | 1 + .../grid-load-cyrillic-fonts-in-pdf-export.md | 119 +++++++++++++++++- 2 files changed, 119 insertions(+), 1 deletion(-) diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index 2a993487ec..0dcfd9abf2 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -233,3 +233,4 @@ The following sample projects show two ways to implement a PDF export * [Blazor Grid](slug:grid-overview) * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) * [Sowing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting) +* [Loading Cyrillic Fonts When Exporting the Grid to PDF](slug:grid-kb-load-cyrillic-fonts-in-pdf-export) \ No newline at end of file diff --git a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md index 7aeec0bd80..ead23de3ea 100644 --- a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md +++ b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md @@ -27,4 +27,121 @@ How to load data on demand when you have Hierarchy Grid? ## Solution -Some PDF fonts do not have Cyrillic (or other alphabets) characters. In such cases, you can load the fonts explicitly. \ No newline at end of file +Some PDF fonts do not have Cyrillic (or other alphabets) characters. In such cases, you can load the fonts explicitly, so the proper texts appear in the exported Grid to PDF. + +For that purpose, use the Document Processing libraries to [implement FontsProvider](https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider) and load your desired font. + +The snippet below shows how to load an example Cyrillic font, so the Grid can properly export the data in Bulgarian language (that uses Cyrillic characters) to a PDF document. If you load a file called file called "helvetica-cyrillic.ttf" in the `wwwroot` folder of your application, the export will work out of the box. + +>caption Load Cyrillic font for PDF export + +````RAZOR +@using System.Globalization +@using Telerik.Documents.Core.Fonts +@using Telerik.Windows.Documents.Extensibility +@using Telerik.Windows.Documents.Core.Fonts + +@inject IWebHostEnvironment HostEnvironment + + + + Експортирай в PDF + + + + + + + + + + + + + + + + + +@code { + private IEnumerable GridData { get; set; } + + private FontsProviderBase FontsProvider { get; set; } + + private bool ExportAllPages { get; set; } + + protected async override Task OnInitializedAsync() + { + var culture = new CultureInfo("bg-BG"); + CultureInfo.DefaultThreadCurrentCulture = culture; + CultureInfo.DefaultThreadCurrentUICulture = culture; + + InitFontsProvider(); + + GridData = Enumerable.Range(1, 100).Select(x => new Product + { + ProductId = x, + ProductName = $"Продукт {x}", + UnitsInStock = (short)(x * 2), + UnitPrice = 3.15m * x, + Discontinued = x % 4 == 0 ? "да" : "не", + }).ToList(); + } + + private void InitFontsProvider() + { + FontsProvider = FixedExtensibilityManager.FontsProvider; + var fontsProvider = new BlazorFontsProvider() + { + HostEnvironment = HostEnvironment + }; + FixedExtensibilityManager.FontsProvider = fontsProvider; + } + + public class BlazorFontsProvider : FontsProviderBase + { + public IWebHostEnvironment HostEnvironment { get; set; } + + public override byte[] GetFontData(FontProperties fontProperties) + { + // the code can be obtained from the Telerik DPL documentation + // https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider + + var fontFileName = fontProperties.FontFamilyName + ".ttf"; + var path = Path.Combine(HostEnvironment?.WebRootPath); + // add this file to an appropriate folder, e.g. "wwwroot" + fontFileName = "helvetica-cyrillic.ttf"; + + var directory = new DirectoryInfo(path); + var fontFiles = directory.GetFiles(); + var fontFile = fontFiles.FirstOrDefault(f => f.Name.Equals(fontFileName, StringComparison.InvariantCultureIgnoreCase)); + + if (fontFile != null) + { + var targetPath = fontFile.FullName; + + using (FileStream fileStream = System.IO.File.OpenRead(targetPath)) + { + using (MemoryStream memoryStream = new MemoryStream()) + { + fileStream.CopyTo(memoryStream); + return memoryStream.ToArray(); + } + } + } + + return null; + } + } + + public class Product + { + public int ProductId { get; set; } + public string ProductName { get; set; } + public int UnitsInStock { get; set; } + public decimal UnitPrice { get; set; } + public string Discontinued { get; set; } + } +} +```` \ No newline at end of file From 335ed00aba3865c7f2eb9da3880c3c1fb69c4b28 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Thu, 20 Mar 2025 19:25:05 +0200 Subject: [PATCH 05/28] chore(grid): updates --- components/grid/export/csv.md | 1 - components/grid/export/overview.md | 17 +++++++++++------ components/grid/export/pdf.md | 4 ++-- ...ting => grid-show-loader-while-exporting.md} | 0 4 files changed, 13 insertions(+), 9 deletions(-) rename knowledge-base/{grid-show-loader-while-exporting => grid-show-loader-while-exporting.md} (100%) diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md index 0f83ab9a9c..9cfe411dd5 100644 --- a/components/grid/export/csv.md +++ b/components/grid/export/csv.md @@ -20,7 +20,6 @@ When you click the Export button, your browser will receive the resulting file. - [Limitations](#limitations) - [Programmatic Export](#programmatic-export) - [Customization](#customization) - - [Notes](#notes) - [See Also](#see-also) ## Basics diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 4993549012..5b0d8dd269 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -17,12 +17,10 @@ The Grid for Blazor provides a built-in functionality to export the data to: Before proceeding to the dedicated export articles, ensure you are familiar with the following specifics: - - -## How It Works +## How the Export Works * If the Grid is using `OnRead` and is exporting all pages, it will fire an additional `OnRead` event at the time of exporting, with a request `PageSize` of `0`. This will enable the component to obtain all data. -* The time for export will be longer if the Grid has a lot of records and/or in Client-side Blazor (WebAssembly) where all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. While the file is being generated, the UI will be unresponsive, so you may want to [show a loading sign to the user during the export process](slug: grid-kb-show-loader-while-exporting). +* The time for export will be longer if the Grid has a lot of records and/or in Client-side Blazor (WebAssembly) where all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. While the file is being generated, the UI will be unresponsive, so you may want to [show a loading sign to the user during the export process](slug:grid-kb-show-loader-while-exporting). ## Requirements @@ -37,7 +35,7 @@ services.AddServerSideBlazor().AddHubOptions(o => ## Limitations -* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own PDF file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). +* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). * `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in exported format and these string values are the most common ones used in data and macros. @@ -47,4 +45,11 @@ services.AddServerSideBlazor().AddHubOptions(o => ## Customization -The Grid allows customizing the exported files - determine the desired data to be exported, changing the number/date formats and more. For such customizations, [handle the export events](slug: grid-export-events) \ No newline at end of file +The Grid allows customizing the exported files - determine the desired data to be exported, changing the number/date formats and more. For such customizations, [handle the export events](slug:grid-export-events). + +## See Also + +* [Grid Export to CSV](slug:grid-export-csv) +* [Grid Export to Excel](slug:grid-export-excel) +* [Grid Export to PDF](slug:grid-export-pdf) +* [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index 0dcfd9abf2..ac8025fb38 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -107,7 +107,7 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp } ```` -## How It Works +## How the Export Works * For performance reasons, the PDF export mechanism draws each cell value on a single line. Any content that does not fit in the available space will be clipped. Text wrapping and PDF column resizing is not supported. * Exporting to PDF in UI for Blazor is different from exporting in Kendo jQuery, where the full HTML is exported. The Blazor export to PDF will export the Grid to a table, similar to an Excel table. If you want [to export to PDF as HTML, you can use a custom approach](#custom-export). @@ -119,7 +119,7 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp ## Limitations -* Some PDF fonts do not include Cyrillic or other non-Latin characters. In such cases, [load a compatible font explicitly](https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider). +* Some PDF fonts do not include Cyrillic or other non-Latin characters. In such cases, [load a compatible font explicitly](slug:grid-kb-load-cyrillic-fonts-in-pdf-export). ## Programmatic Export diff --git a/knowledge-base/grid-show-loader-while-exporting b/knowledge-base/grid-show-loader-while-exporting.md similarity index 100% rename from knowledge-base/grid-show-loader-while-exporting rename to knowledge-base/grid-show-loader-while-exporting.md From 5888605409b4c5484ad784a0691e9f90cffaf100 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:16:40 +0200 Subject: [PATCH 06/28] Update components/grid/export/excel.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/export/excel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index 953c5409f3..def04f2032 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -104,7 +104,7 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE ## Requirements -* If you are setting `Width` to the columns, use only `px`. Excel does not understand units different than `px` and if you use them (such as `rem` or `%`), it will fail to parse them and will render a collapsed (hidden) column with zero width. +* When setting column `Width`, use only `px`. Excel cannot parse units different than `px` (e.g., `rem` or `%`) and renders a collapsed (hidden) column with zero width. This is an Excel limitation. ## Programmatic Export From fd026d7faf418b1865ee339ba118fd73062116b5 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:16:56 +0200 Subject: [PATCH 07/28] Update knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md index ead23de3ea..72f8b0173c 100644 --- a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md +++ b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md @@ -31,7 +31,7 @@ Some PDF fonts do not have Cyrillic (or other alphabets) characters. In such cas For that purpose, use the Document Processing libraries to [implement FontsProvider](https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider) and load your desired font. -The snippet below shows how to load an example Cyrillic font, so the Grid can properly export the data in Bulgarian language (that uses Cyrillic characters) to a PDF document. If you load a file called file called "helvetica-cyrillic.ttf" in the `wwwroot` folder of your application, the export will work out of the box. +The snippet below shows how to load an example Cyrillic font, so the Grid can properly export the data in Bulgarian language (that uses Cyrillic characters) to a PDF document. If you load a `helvetica-cyrillic.ttf` file in the `wwwroot` folder of your application, the export will work out of the box. >caption Load Cyrillic font for PDF export From 8ad94ebdaf4efd6f9bc0538ccd057f912aab4fd1 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:17:16 +0200 Subject: [PATCH 08/28] Update knowledge-base/grid-show-loader-while-exporting.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-show-loader-while-exporting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-show-loader-while-exporting.md b/knowledge-base/grid-show-loader-while-exporting.md index 5678973842..fa217f809c 100644 --- a/knowledge-base/grid-show-loader-while-exporting.md +++ b/knowledge-base/grid-show-loader-while-exporting.md @@ -1,6 +1,6 @@ --- title: Showing a Loader While Exporting the Grid -description: Learn how to display a LoaderContainer over the Blazor Grid while it is exporting the items to Excel, CSV or PDF +description: Learn how to display a LoaderContainer over the Blazor Grid while it is exporting the items to Excel, CSV or PDF. type: how-to page_title: How to Show a Loader While Exporting the Grid slug: grid-kb-show-loader-while-exporting From 0c4e3b06ffd3b21f06e73b63cb5910b57a3903d5 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:17:33 +0200 Subject: [PATCH 09/28] Update knowledge-base/grid-show-loader-while-exporting.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-show-loader-while-exporting.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-show-loader-while-exporting.md b/knowledge-base/grid-show-loader-while-exporting.md index fa217f809c..c9b5d3ac67 100644 --- a/knowledge-base/grid-show-loader-while-exporting.md +++ b/knowledge-base/grid-show-loader-while-exporting.md @@ -29,7 +29,7 @@ I have many items in the Grid and the export to Excel, CSV or PDF takes a while. To display a loader over the Grid during the Excel, CSV or PDF export, follow the steps below: 1. Choose the deired UI for the Loader (this article shows the first two options): - 1. A [LoaderContainer](slug: loadercontainer-overview). Place the LoaderContainer component placed in a container together with the Grid and add `position:relative` style on this container to ensure the LoaderContainer covers only the Grid. + 1. A [LoaderContainer](slug: loadercontainer-overview). Place the LoaderContainer component in a container together with the Grid and add `position:relative` style on this container to ensure the LoaderContainer covers only the Grid. 1. A modal [Window](slug:) with a [Loader](slug: loader-overview) component inside. 1. Your custom loader. 1. Handle the [`OnBeforeExport` event](slug: grid-export-events#onbeforeexport) of the Grid to show the loader (set the loader's visibility to `true`). From 69016f76fdc560ec66930c5f069e90362d53b4e8 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:17:55 +0200 Subject: [PATCH 10/28] Update components/grid/export/excel.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/export/excel.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index def04f2032..74a798b60a 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -211,5 +211,5 @@ Read more about how to [customize the exported file](slug:grid-export-events). * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) * [Custom Cell Formatting of the Exported File with RadSpreadProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadprocessing) * [Custom Cell Formatting of the Exported File with RadSpreadStreamProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadstreamprocessing) - * [Sowing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting) + * [Showing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting) * [Blazor Grid](slug:grid-overview) From 3d2bbed98edf84d12ec8a2d8361e8d9256d638c6 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:19:08 +0200 Subject: [PATCH 11/28] Update components/grid/export/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 5b0d8dd269..0cfe27ce97 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -37,7 +37,7 @@ services.AddServerSideBlazor().AddHubOptions(o => * Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). -* `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in exported format and these string values are the most common ones used in data and macros. +* `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in the exported formats and these string values are the most common ones used in data and macros. * Date and number formats are exported with the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). From 5dbd55dbfb841885ed759b8f1209ea1ff73b4b76 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:19:46 +0200 Subject: [PATCH 12/28] Update components/grid/export/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 0cfe27ce97..6590f63071 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -39,7 +39,7 @@ services.AddServerSideBlazor().AddHubOptions(o => * `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in the exported formats and these string values are the most common ones used in data and macros. -* Date and number formats are exported with the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). +* Date and number formats are exported in the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). * The Grid exports only `` instances. Other types of columns are not exported, for example command, checkbox, hierarchy, group and row-drag columns. From 602de2740b537551415a8650f4f47b0d6a916bcb Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:20:07 +0200 Subject: [PATCH 13/28] Update components/grid/export/overview.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 6590f63071..7d7207e69e 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -41,7 +41,7 @@ services.AddServerSideBlazor().AddHubOptions(o => * Date and number formats are exported in the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). -* The Grid exports only `` instances. Other types of columns are not exported, for example command, checkbox, hierarchy, group and row-drag columns. +* The Grid exports only `` instances. Other types of columns are not exported (for example: command, checkbox, hierarchy, group and row-drag columns). ## Customization From 30447e5e1a128572b35b6c2eadb5e07dd35d67c7 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:20:33 +0200 Subject: [PATCH 14/28] Update knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md index 72f8b0173c..60411eab52 100644 --- a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md +++ b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md @@ -1,6 +1,6 @@ --- title: Loading Cyrillic Fonts When Exporting the Grid to PDF -description: How to lLoad Cyrillic fonts when exporting the Blazor Grid to PDF? +description: How to load Cyrillic fonts when exporting the Blazor Grid to PDF? type: how-to page_title: Loading Cyrillic Fonts When Exporting the Grid to PDF slug: grid-kb-load-cyrillic-fonts-in-pdf-export From ea445ab5cedafdb2283c538f6c27c044f0cfe91e Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:21:28 +0200 Subject: [PATCH 15/28] Update components/grid/export/pdf.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- components/grid/export/pdf.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index ac8025fb38..b5d6ab9457 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -110,7 +110,7 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp ## How the Export Works * For performance reasons, the PDF export mechanism draws each cell value on a single line. Any content that does not fit in the available space will be clipped. Text wrapping and PDF column resizing is not supported. -* Exporting to PDF in UI for Blazor is different from exporting in Kendo jQuery, where the full HTML is exported. The Blazor export to PDF will export the Grid to a table, similar to an Excel table. If you want [to export to PDF as HTML, you can use a custom approach](#custom-export). +* The UI for Blazor PDF export will export the Grid to a table and will not export the full HTML. This behavior is different from when exporting in Kendo UI for jQuery. [To export to PDF as HTML, you can use a custom approach](#custom-export). ## Requirements From 963063d639fb5102330128a1ebad5e6c28e999fa Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 12:21:51 +0200 Subject: [PATCH 16/28] Update knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md Co-authored-by: Iva Stefanova Koevska-Atanasova --- knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md index 60411eab52..d1472881c7 100644 --- a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md +++ b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md @@ -29,7 +29,7 @@ How to load data on demand when you have Hierarchy Grid? Some PDF fonts do not have Cyrillic (or other alphabets) characters. In such cases, you can load the fonts explicitly, so the proper texts appear in the exported Grid to PDF. -For that purpose, use the Document Processing libraries to [implement FontsProvider](https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider) and load your desired font. +For that purpose, use the Document Processing libraries to [implement a FontsProvider](https://docs.telerik.com/devtools/document-processing/knowledge-base/pdfprocessing-implement-fontsprovider) and load your desired font. The snippet below shows how to load an example Cyrillic font, so the Grid can properly export the data in Bulgarian language (that uses Cyrillic characters) to a PDF document. If you load a `helvetica-cyrillic.ttf` file in the `wwwroot` folder of your application, the export will work out of the box. From 727746611f782212a910a400b3ab9a830bc2a1ae Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 25 Mar 2025 13:01:29 +0200 Subject: [PATCH 17/28] chore(grid): address feedback --- components/grid/export/csv.md | 6 ++++-- components/grid/export/excel.md | 4 +++- components/grid/export/overview.md | 17 ++++++++++++----- components/grid/export/pdf.md | 12 +++++++++--- .../grid-load-cyrillic-fonts-in-pdf-export.md | 8 ++++++-- .../grid-show-loader-while-exporting.md | 2 +- 6 files changed, 35 insertions(+), 14 deletions(-) diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md index 9cfe411dd5..4624fb316a 100644 --- a/components/grid/export/csv.md +++ b/components/grid/export/csv.md @@ -41,7 +41,7 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp | `FileName` | `string` | The name of the file. The grid will add the `.csv` extension for you. | | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. | -> Before enabling the export feature, ensure you are familiar with [its specifics](slug:grid-export-overview#how-it-works). +> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). >caption Export the Grid to CSV - Example @@ -103,7 +103,9 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp ## Limitations -* Column widths are not applied because a CSV document does not have such a concept. You can use any units in the grid itself, they will not be reflected in the exported document. If you need to add such structure, consider [exporting to an Excel file](slug:grid-export-excel). +The CSV export has the following limitation: + +* Column widths are not applied because a CSV document does not have such a concept. You can use any units in the grid itself, they will not be reflected in the exported document.
If you need to export columns with specific widths, consider [exporting to an Excel file](slug:grid-export-excel). ## Programmatic Export diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index 74a798b60a..84e4065096 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -41,7 +41,7 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE | `FileName` | `string` | The name of the file. The grid will add the `.xslx` extension for you. | | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. | -> Before enabling the export feature, ensure you are familiar with [its specifics](slug:grid-export-overview#how-it-works). +> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). >caption Export the Grid to Excel - Example @@ -104,6 +104,8 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE ## Requirements +The Excel export has the following requirement: + * When setting column `Width`, use only `px`. Excel cannot parse units different than `px` (e.g., `rem` or `%`) and renders a collapsed (hidden) column with zero width. This is an Excel limitation. ## Programmatic Export diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 7d7207e69e..a4a83617da 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -19,11 +19,19 @@ Before proceeding to the dedicated export articles, ensure you are familiar with ## How the Export Works +The Grid export feature has the following specifics: + * If the Grid is using `OnRead` and is exporting all pages, it will fire an additional `OnRead` event at the time of exporting, with a request `PageSize` of `0`. This will enable the component to obtain all data. -* The time for export will be longer if the Grid has a lot of records and/or in Client-side Blazor (WebAssembly) where all the code runs in the browser and, at the time of writing, is considerably slower than server-side Blazor, and it only has one actual thread. While the file is being generated, the UI will be unresponsive, so you may want to [show a loading sign to the user during the export process](slug:grid-kb-show-loader-while-exporting). +* The time for export will be longer if: + * The Grid has a lot of records and/or + * The Grid is in a Client-side Blazor (WebAssembly) where all the code runs in the browser. At the time of writing, it is considerably slower than server-side Blazor, and it only has one actual thread. + +>tip While the file is being generated, the UI will be unresponsive, so you may want to [show a loading sign to the user during the export process](slug:grid-kb-show-loader-while-exporting). ## Requirements +The Grid export feature has the following requirements: + * With Server-side Blazor, the file may become larger than the default SignalR connection limit, and this can disconnect the client and result in an error. Generally, this requires quite a lot of data to happen, but you may need to increase the size limit of the connection in the `ConfigureServices` method of your `Startup.cs` file, for example: ````C#.skip-repl @@ -35,17 +43,16 @@ services.AddServerSideBlazor().AddHubOptions(o => ## Limitations -* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it will be ignored. The headers will be the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). +The Grid export feature has the following limitations: +* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it is be ignored. The headers are the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). * `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in the exported formats and these string values are the most common ones used in data and macros. - * Date and number formats are exported in the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). - * The Grid exports only `` instances. Other types of columns are not exported (for example: command, checkbox, hierarchy, group and row-drag columns). ## Customization -The Grid allows customizing the exported files - determine the desired data to be exported, changing the number/date formats and more. For such customizations, [handle the export events](slug:grid-export-events). +The Grid allows customization of the exported files - determine the desired data to be exported, changing the number/date formats and more. For such customizations, [handle the export events](slug:grid-export-events). ## See Also diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index b5d6ab9457..671d76aaf0 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -17,7 +17,7 @@ When you click the Export button, your browser will receive the resulting file. #### In This Article - [Basics](#basics) - - [How It Works](#how-it-works) + - [How the Export Works](#how-the-export-works) - [Requirements](#requirements) - [Limitations](#limitations) - [Programmatic Export](#programmatic-export) @@ -45,7 +45,7 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp | `PaperSize` | `GridPdfExportPaperSize` enum
(`A4`) | The size of the paper for the exported file. | | `PageOrientation` | `GridPdfExportPageOrientation` enum
(`Portrait`)| The orientation of the page—portrait or landscape. | -> Before enabling the export feature, ensure you are familiar with [its specifics](slug:grid-export-overview#how-it-works). +> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). >caption Export the Grid to PDF @@ -109,16 +109,22 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp ## How the Export Works -* For performance reasons, the PDF export mechanism draws each cell value on a single line. Any content that does not fit in the available space will be clipped. Text wrapping and PDF column resizing is not supported. +The PDF export has the following specifics: + * The UI for Blazor PDF export will export the Grid to a table and will not export the full HTML. This behavior is different from when exporting in Kendo UI for jQuery. [To export to PDF as HTML, you can use a custom approach](#custom-export). ## Requirements +The PDF export has the following requirements: + * PDF export requires pixel widths for all columns. Widths in other units such as `%` or `em` cannot be translated correctly and the respective columns will collapse in the exported PDF file. The column widths for the PDF export can differ from the ones in the Grid configuration for the web browser. To set column widths for the PDF file only, use the `Width` property of the [`OnBeforeExportEventArgs.Columns`](slug:grid-export-events#for-pdf-export) members. * Provide appropriate `PaperSize` and `PageOrientation` properties. For example, if you want to render 20 columns (100px each) in an A4 sheet, then this will yield unexpected results. The column dimensions in a PDF file are fixed, thus they cannot be resized as in Excel, which requires the developer to ensure proper export dimensions. ## Limitations +The PDF export has the following limitations: + +* For performance reasons, the PDF export mechanism draws each cell value on a single line. Any content that does not fit in the available space will be clipped. Text wrapping and PDF column resizing is not supported. * Some PDF fonts do not include Cyrillic or other non-Latin characters. In such cases, [load a compatible font explicitly](slug:grid-kb-load-cyrillic-fonts-in-pdf-export). ## Programmatic Export diff --git a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md index d1472881c7..8fe72ff8c0 100644 --- a/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md +++ b/knowledge-base/grid-load-cyrillic-fonts-in-pdf-export.md @@ -23,7 +23,6 @@ res_type: kb ## Description My Grid uses a Cyrillic font but when I export it to PDF the text is missing. How to ensure the text will be properly included in the exported PDF file when using a Cyrillic font? -How to load data on demand when you have Hierarchy Grid? ## Solution @@ -144,4 +143,9 @@ The snippet below shows how to load an example Cyrillic font, so the Grid can pr public string Discontinued { get; set; } } } -```` \ No newline at end of file +```` + +## See Also section + +* [Grid Export Overview](slug:grid-export-overview). +* [Grid Export to PDF](slug:grid-export-pdf) diff --git a/knowledge-base/grid-show-loader-while-exporting.md b/knowledge-base/grid-show-loader-while-exporting.md index c9b5d3ac67..e127630c44 100644 --- a/knowledge-base/grid-show-loader-while-exporting.md +++ b/knowledge-base/grid-show-loader-while-exporting.md @@ -30,7 +30,7 @@ To display a loader over the Grid during the Excel, CSV or PDF export, follow th 1. Choose the deired UI for the Loader (this article shows the first two options): 1. A [LoaderContainer](slug: loadercontainer-overview). Place the LoaderContainer component in a container together with the Grid and add `position:relative` style on this container to ensure the LoaderContainer covers only the Grid. - 1. A modal [Window](slug:) with a [Loader](slug: loader-overview) component inside. + 1. A modal [Window](slug: window-overview) with a [Loader](slug: loader-overview) component inside. 1. Your custom loader. 1. Handle the [`OnBeforeExport` event](slug: grid-export-events#onbeforeexport) of the Grid to show the loader (set the loader's visibility to `true`). 1. Handle the [`OnAfterExport` event](slug: grid-export-events#onafterexport) of the Grid to hide the loader (set the loader's visibility to `false`). From b20461719aaba36c4c224a1502a903758262c523 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 13:40:32 +0200 Subject: [PATCH 18/28] Update components/grid/export/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index a4a83617da..6c8b1fa0ec 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -15,7 +15,7 @@ The Grid for Blazor provides a built-in functionality to export the data to: * [Excel](slug:grid-export-excel) * [PDF](slug:grid-export-pdf) -Before proceeding to the dedicated export articles, ensure you are familiar with the following specifics: +Before proceeding to the dedicated export articles, ensure you are familiar with the following information: ## How the Export Works From af028c9a78945c23c980aa7e08b29b37c78c98a6 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 18:29:28 +0200 Subject: [PATCH 19/28] Update components/grid/export/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 6c8b1fa0ec..ade0ca0245 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -23,7 +23,7 @@ The Grid export feature has the following specifics: * If the Grid is using `OnRead` and is exporting all pages, it will fire an additional `OnRead` event at the time of exporting, with a request `PageSize` of `0`. This will enable the component to obtain all data. * The time for export will be longer if: - * The Grid has a lot of records and/or + * The Grid has a lot of records. * The Grid is in a Client-side Blazor (WebAssembly) where all the code runs in the browser. At the time of writing, it is considerably slower than server-side Blazor, and it only has one actual thread. >tip While the file is being generated, the UI will be unresponsive, so you may want to [show a loading sign to the user during the export process](slug:grid-kb-show-loader-while-exporting). From f44bf8afacd94fea31d6a31a8c1e6ba5171d3b79 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 18:29:51 +0200 Subject: [PATCH 20/28] Update components/grid/export/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index ade0ca0245..a35d07c218 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -24,7 +24,7 @@ The Grid export feature has the following specifics: * If the Grid is using `OnRead` and is exporting all pages, it will fire an additional `OnRead` event at the time of exporting, with a request `PageSize` of `0`. This will enable the component to obtain all data. * The time for export will be longer if: * The Grid has a lot of records. - * The Grid is in a Client-side Blazor (WebAssembly) where all the code runs in the browser. At the time of writing, it is considerably slower than server-side Blazor, and it only has one actual thread. + * The Grid is in a WebAssembly app where all the code runs in the browser and in one thread. >tip While the file is being generated, the UI will be unresponsive, so you may want to [show a loading sign to the user during the export process](slug:grid-kb-show-loader-while-exporting). From e76966832e82b1ff00f4a6206dee026af08e8cc6 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 18:30:10 +0200 Subject: [PATCH 21/28] Update components/grid/export/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/overview.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index a35d07c218..ef9846d1bb 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -30,9 +30,7 @@ The Grid export feature has the following specifics: ## Requirements -The Grid export feature has the following requirements: - -* With Server-side Blazor, the file may become larger than the default SignalR connection limit, and this can disconnect the client and result in an error. Generally, this requires quite a lot of data to happen, but you may need to increase the size limit of the connection in the `ConfigureServices` method of your `Startup.cs` file, for example: +In server-side Blazor apps, the file may become larger than the default SignalR message size limit. This can disconnect the client and result in an error. You may need to [increase the maximum SignalR message size](slug:common-kb-increase-signalr-max-message-size). ````C#.skip-repl services.AddServerSideBlazor().AddHubOptions(o => From 338ab8e86a458bc0d0dde773143b8205bbe2c3f2 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 18:30:24 +0200 Subject: [PATCH 22/28] Update components/grid/export/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index ef9846d1bb..bc0e2e387f 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -43,7 +43,7 @@ services.AddServerSideBlazor().AddHubOptions(o => The Grid export feature has the following limitations: -* Templates are not exported, because there is no provision in the framework for getting them at runtime. If a column, header or group header/footer has a template or aggregates, it is be ignored. The headers are the `Title` of the column, the data is the data from the `Field`. If you need additional information, see if you can add it in a Field in the model, or create your own file. Find a project example on how to generate your own exported file. Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). +* Templates are not exported, because there is no provision in the framework for getting `RenderFragment` content at runtime. Thus, column, header or group header/footer templates are ignored. The headers in the exported file match the `Title` of the column. The exported values match the data from the column `Field`. If you need additional information, see if you can add it to a property in the model, or create your own file. Find a [project example on how to generate your own exported file](https://feedback.telerik.com/blazor/1485764-customize-the-Pdf-file-before-it-gets-to-the-client). Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). * `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in the exported formats and these string values are the most common ones used in data and macros. * Date and number formats are exported in the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). * The Grid exports only `` instances. Other types of columns are not exported (for example: command, checkbox, hierarchy, group and row-drag columns). From 83306140e969ddbe57e8d597dd78d0b162518f0a Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 18:30:38 +0200 Subject: [PATCH 23/28] Update components/grid/export/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/overview.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index bc0e2e387f..540f024755 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -50,7 +50,7 @@ The Grid export feature has the following limitations: ## Customization -The Grid allows customization of the exported files - determine the desired data to be exported, changing the number/date formats and more. For such customizations, [handle the export events](slug:grid-export-events). +The Grid allows customization of the exported files. You can determine the desired data to be exported, change the number and date formats, and more. For such customizations, [handle the export events](slug:grid-export-events). ## See Also From 20d9e24420b1f3f82e1062128d8e0fe4648e738f Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 18:31:05 +0200 Subject: [PATCH 24/28] Update components/grid/export/pdf.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/pdf.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index 671d76aaf0..aa121fb9a0 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -109,9 +109,7 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp ## How the Export Works -The PDF export has the following specifics: - -* The UI for Blazor PDF export will export the Grid to a table and will not export the full HTML. This behavior is different from when exporting in Kendo UI for jQuery. [To export to PDF as HTML, you can use a custom approach](#custom-export). +The Grid exports its raw data to PDF and does not export the full HTML. This behavior is different from the PDF exporting in Kendo UI for jQuery. [To export to PDF as HTML, you can use a custom approach](#custom-export). ## Requirements From 35de851276782ffa60145ac7a20fe92ef1be83b5 Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva <73842592+ntacheva@users.noreply.github.com> Date: Tue, 25 Mar 2025 18:31:56 +0200 Subject: [PATCH 25/28] Update components/grid/export/overview.md Co-authored-by: Dimo Dimov <961014+dimodi@users.noreply.github.com> --- components/grid/export/overview.md | 7 ------- 1 file changed, 7 deletions(-) diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index 540f024755..a18bbab5d7 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -32,13 +32,6 @@ The Grid export feature has the following specifics: In server-side Blazor apps, the file may become larger than the default SignalR message size limit. This can disconnect the client and result in an error. You may need to [increase the maximum SignalR message size](slug:common-kb-increase-signalr-max-message-size). -````C#.skip-repl -services.AddServerSideBlazor().AddHubOptions(o => -{ - o.MaximumReceiveMessageSize = 1024 * 1024; // 1MB -}); -```` - ## Limitations The Grid export feature has the following limitations: From b493cc75ababfe268a2d45914dd3654d6a7d2d6e Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Tue, 25 Mar 2025 19:06:12 +0200 Subject: [PATCH 26/28] chore(grid): address feedback --- components/grid/export/csv.md | 25 ++++++++++++++----------- components/grid/export/excel.md | 16 ++++++++++++++-- components/grid/export/overview.md | 3 ++- components/grid/export/pdf.md | 16 ++++++++++++++-- 4 files changed, 44 insertions(+), 16 deletions(-) diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md index 4624fb316a..ab5584385d 100644 --- a/components/grid/export/csv.md +++ b/components/grid/export/csv.md @@ -17,14 +17,25 @@ When you click the Export button, your browser will receive the resulting file. #### In This Article - [Basics](#basics) - - [Limitations](#limitations) - [Programmatic Export](#programmatic-export) - [Customization](#customization) - [See Also](#see-also) ## Basics -To enable the grid CSV Export, add a [command button](slug:components/grid/columns/command) with the `CsvExport` command name to the [Grid toolbar](slug:components/grid/features/toolbar). +To enable the grid CSV Export, you can choose one of the following options: + +* Add the `GridToolBarCsvExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): + +````RAZOR.skip-repl + + + Export to CSV + + +```` + +* Add a [command button](slug:components/grid/columns/command) with the `CsvExport` command name inside a templated [Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``): ````RAZOR.skip-repl @@ -101,12 +112,6 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp } ```` -## Limitations - -The CSV export has the following limitation: - -* Column widths are not applied because a CSV document does not have such a concept. You can use any units in the grid itself, they will not be reflected in the exported document.
If you need to export columns with specific widths, consider [exporting to an Excel file](slug:grid-export-excel). - ## Programmatic Export You can programmatically invoke the export feature of the Grid, by using the following methods exposed on the `@ref` of the Grid: @@ -202,7 +207,7 @@ To customize the exported file, handle the `OnBeforeExport` or `OnAfterExport` e The component allows you to control the data set that will be exported. It also provides built-in customization options for the columns, such as `Width`, `Title`, and more. -For more advanced customizations (such as coloring the headers, bolding the titles, or even changing cell values) the Grid lets you get the `MemoryStream` of the file. Thus, you can customize it using the [`SpreadProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview) or the [`SpreadStreamProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview) libraries that are available with your license. +For more advanced customizations (such as formatting the numbers and dates, or changing the default comma delimiter) the Grid lets you get the `MemoryStream` of the file. Thus, you can customize it using the [`SpreadProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/overview) or the [`SpreadStreamProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radspreadstreamprocessing/overview) libraries that are available with your license. [Read more about how to customize the exported file...](slug:grid-export-events) @@ -210,8 +215,6 @@ For more advanced customizations (such as coloring the headers, bolding the titl ## See Also * [Live Demo: Grid Export](https://demos.telerik.com/blazor-ui/grid/export) -* [Custom cell formatting of the exported file with RadSpreadProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadprocessing) -* [Custom cell formatting of the exported file with RadSpreadStreamProcessing](slug:grid-kb-custom-cell-formatting-with-radspreadstreamprocessing) * [Format numbers and dates in the exported CSV file from the Grid](slug:grid-kb-number-formatting-of-the-csv-export) * [Change the default CSV delimiter (comma) during Grid export](slug:grid-kb-csv-export-change-field-delimiter) * [Sowing a Loader While Exporting the Grid](slug:grid-kb-show-loader-while-exporting) diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index 84e4065096..2eb262c869 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -24,7 +24,19 @@ When you click the Export button, your browser will receive the resulting file. ## Basics -To enable the Grid Excel Export, add a [command button](slug:components/grid/columns/command) with the `ExcelExport` command name to the [Grid toolbar](slug:components/grid/features/toolbar). +To enable the Grid Excel Export, you can choose one of the following options: + +* Add the `GridToolBarExcelExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): + +````RAZOR.skip-repl + + + Export to Excel + + +```` + +* Add a [command button](slug:components/grid/columns/command) with the `ExcelExport` command name inside a templated [Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``): ````RAZOR.skip-repl @@ -106,7 +118,7 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE The Excel export has the following requirement: -* When setting column `Width`, use only `px`. Excel cannot parse units different than `px` (e.g., `rem` or `%`) and renders a collapsed (hidden) column with zero width. This is an Excel limitation. +* When setting column `Width`, use only `px`. Excel cannot parse units different than `px` (e.g., `rem` or `%`) and renders a collapsed (hidden) column with zero width. This is an Excel limitation. If you prefer to use different than `px` units in the UI, handle the [`OnBeforeExport` event to provide the column width in pixels for the proper export](slug:grid-export-events#for-excel-export). ## Programmatic Export diff --git a/components/grid/export/overview.md b/components/grid/export/overview.md index a18bbab5d7..3d01973fb5 100644 --- a/components/grid/export/overview.md +++ b/components/grid/export/overview.md @@ -38,7 +38,8 @@ The Grid export feature has the following limitations: * Templates are not exported, because there is no provision in the framework for getting `RenderFragment` content at runtime. Thus, column, header or group header/footer templates are ignored. The headers in the exported file match the `Title` of the column. The exported values match the data from the column `Field`. If you need additional information, see if you can add it to a property in the model, or create your own file. Find a [project example on how to generate your own exported file](https://feedback.telerik.com/blazor/1485764-customize-the-Pdf-file-before-it-gets-to-the-client). Find additional information on how to [export an image that is rendered in a Grid column template](slug:grid-export-image-column-excel). * `bool` fields are exported as `TRUE` or `FALSE` strings, because there is no native boolean data type in the exported formats and these string values are the most common ones used in data and macros. -* Date and number formats are exported in the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier for dates, and `Convert.ToDouble(value)` for numbers (which uses the current thread culture). The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date and number formats, use the [Export Events](slug: grid-export-events). +* Dates are exported in the following format: `mm/dd/yyyy hh:mm:ss` plus the current app culture AM/PM specifier. The Excel date formats are different than .NET date formats and Excel may not always recognize the column as dates, for example, if the entire date format from the .NET culture is used. To customize the date formats, use the [Export Events](slug: grid-export-events). +* Numbers are exported in the following format which uses the current thread culture: `Convert.ToDouble(value)`. To customize the number formats use the [Export Events](slug: grid-export-events). * The Grid exports only `` instances. Other types of columns are not exported (for example: command, checkbox, hierarchy, group and row-drag columns). ## Customization diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index aa121fb9a0..4288683bea 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -26,7 +26,19 @@ When you click the Export button, your browser will receive the resulting file. ## Basics -To enable users to export the Grid to PDF, add a [command button](slug:components/grid/columns/command) with the `PdfExport` command name to the [Grid toolbar](slug:components/grid/features/toolbar). +To enable users to export the Grid to PDF, you can choose one of the following options: + +* Add the `GridToolBarPdfExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): + +````RAZOR.skip-repl + + + Export to PDF + + +```` + +* Add a [command button](slug:components/grid/columns/command) with the `PdfExport` command name inside a templated [Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``): ````RAZOR.skip-repl @@ -216,7 +228,7 @@ You can programmatically invoke the export feature of the Grid, by using the fol To customize the exported file, handle the `OnBeforeExport` or `OnAfterExport` events the Grid exposes. -The component allows you to control the data set that will be exported. It also provides built-in customization options for the columns such as `Width`, `Title`, and more. The [column widths in the exported PDF file must be large enough, so that the cell content fits](#notes). Text wrapping is not supported. +The component allows you to control the data set that will be exported. It also provides built-in customization options for the columns such as `Width`, `Title`, and more. The [column widths in the exported PDF file must be large enough, so that the cell content fits](#limitations). Text wrapping is not supported. For more advanced customization the Grid lets you get the `MemoryStream` of the file. Thus, you can customize it using the [`PdfProcessing`](https://docs.telerik.com/devtools/document-processing/libraries/radpdfprocessing/overview) library that is available with your license. From 525a02d6826991af746c38c68321cc7c74b0f5af Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 28 Mar 2025 18:02:52 +0200 Subject: [PATCH 27/28] chore(grid): final updates --- components/grid/export/csv.md | 63 ++++++++++++++------------ components/grid/export/excel.md | 79 ++++++++++++++++++--------------- components/grid/export/pdf.md | 69 ++++++++++++++-------------- components/grid/toolbar.md | 34 +++++++++----- 4 files changed, 134 insertions(+), 111 deletions(-) diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md index ab5584385d..5b113a3657 100644 --- a/components/grid/export/csv.md +++ b/components/grid/export/csv.md @@ -19,13 +19,19 @@ When you click the Export button, your browser will receive the resulting file. - [Basics](#basics) - [Programmatic Export](#programmatic-export) - [Customization](#customization) - - [See Also](#see-also) ## Basics -To enable the grid CSV Export, you can choose one of the following options: +To enable the CSV export in the Grid: -* Add the `GridToolBarCsvExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): +1. [Add the Export Tool](#add-the-export-tool) +1. [Configure the Export Settings](#configure-the-export-settings) + +> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). + +### Add the Export Tool + +Add the `GridToolBarCsvExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): ````RAZOR.skip-repl @@ -35,15 +41,11 @@ To enable the grid CSV Export, you can choose one of the following options: ```` -* Add a [command button](slug:components/grid/columns/command) with the `CsvExport` command name inside a templated [Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``): +If you have a custom Toolbar, add a command button with the `CsvExport` command name inside a [templated Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``). -````RAZOR.skip-repl - - Export to CSV - -```` +### Configure the Export Settings -Optionally, you can also set the `GridCsvExport` tag settings under the `GridExport` tag to subscribe to the [Grid export events](slug:grid-export-events) that allow further customization of the exported columns/data or configure the CSV export options: +To configure the CSV export settings, add the `GridCsvExport` tag under the `GridExport` tag. You may set the following options: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) @@ -52,24 +54,29 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp | `FileName` | `string` | The name of the file. The grid will add the `.csv` extension for you. | | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. | -> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). +For further customizations, use the `GridExcelExport` tag to subscribe to the [Grid export events](slug:grid-export-events). ->caption Export the Grid to CSV - Example +>caption Export the Grid to CSV ````RAZOR @* You can sort, group, filter, page the grid, reorder its columns, and you can click the Export button to save the current data *@ - + - - Export to CSV - - + + + Export to CSV + + - + @@ -85,19 +92,17 @@ Optionally, you can also set the `GridCsvExport` tag settings under the `GridExp @code { private List GridData { get; set; } - private bool ExportAllPages { get; set; } - protected override void OnInitialized() { GridData = Enumerable.Range(1, 100).Select(x => new SampleData - { - ProductId = x, - ProductName = $"Product {x}", - UnitsInStock = x * 2, - Price = 3.14159m * x, - Discontinued = x % 4 == 0, - FirstReleaseDate = DateTime.Now.AddDays(-x) - }).ToList(); + { + ProductId = x, + ProductName = $"Product {x}", + UnitsInStock = x * 2, + Price = 3.14159m * x, + Discontinued = x % 4 == 0, + FirstReleaseDate = DateTime.Now.AddDays(-x) + }).ToList(); } public class SampleData diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index 2eb262c869..b7ba672526 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -18,15 +18,22 @@ When you click the Export button, your browser will receive the resulting file. #### In This Article - [Basics](#basics) - - [Requirements](#requirements) - [Programmatic Export](#programmatic-export) - [Customization](#customization) ## Basics -To enable the Grid Excel Export, you can choose one of the following options: +To enable the Excel export in the Grid: -* Add the `GridToolBarExcelExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): +1. [Add the Export Tool](#add-the-export-tool) +1. [Configure the Export Settings](#configure-the-export-settings) +1. [Set the Columns Width in Pixels](#set-the-columns-width-in-pixels) + +> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). + +### Add the Export Tool + +Add the `GridToolBarExcelExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): ````RAZOR.skip-repl @@ -36,15 +43,11 @@ To enable the Grid Excel Export, you can choose one of the following options: ```` -* Add a [command button](slug:components/grid/columns/command) with the `ExcelExport` command name inside a templated [Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``): +If you have a custom Toolbar, add a command button with the `ExcelExport` command name inside a [templated Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``). -````RAZOR.skip-repl - - Export to Excel - -```` +### Configure the Export Settings -Optionally, you can also set the `GridExcelExport` tag settings under the `GridExport` tag to subscribe to the [Grid export events](slug:grid-export-events) that allow further customization of the exported columns/data or configure the Excel export options: +To configure the Excel export settings, add the `GridExcelExport` tag under the `GridExport` tag. You may set the following options: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) @@ -53,24 +56,37 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE | `FileName` | `string` | The name of the file. The grid will add the `.xslx` extension for you. | | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. | -> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). +For further customizations, use the `GridExcelExport` tag to subscribe to the [Grid export events](slug:grid-export-events). + +### Set the Columns Width in Pixels + +The export to Excel does not require that all columns have explicit widths set. However, if you do set the column widths, ensure you use only `px`. ->caption Export the Grid to Excel - Example +Excel cannot parse units different than `px` (e.g., `rem` or `%`) and renders a collapsed (hidden) column with zero width. This is an Excel limitation. If you prefer to use different than `px` units in the UI, handle the [`OnBeforeExport` event to provide the column width in pixels for the proper export](slug:grid-export-events#for-excel-export). + +>caption Export the Grid to Excel ````RAZOR @* You can sort, group, filter, page the grid, resize and reodrder its columns, and you can click the Export button to save the current data *@ - + - - Export to Excel - - + + + Export to Excel + + - + @@ -86,19 +102,17 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE @code { private List GridData { get; set; } - private bool ExportAllPages { get; set; } - protected override void OnInitialized() { GridData = Enumerable.Range(1, 100).Select(x => new SampleData - { - ProductId = x, - ProductName = $"Product {x}", - UnitsInStock = x * 2, - Price = 3.14159m * x, - Discontinued = x % 4 == 0, - FirstReleaseDate = DateTime.Now.AddDays(-x) - }).ToList(); + { + ProductId = x, + ProductName = $"Product {x}", + UnitsInStock = x * 2, + Price = 3.14159m * x, + Discontinued = x % 4 == 0, + FirstReleaseDate = DateTime.Now.AddDays(-x) + }).ToList(); } public class SampleData @@ -113,13 +127,6 @@ Optionally, you can also set the `GridExcelExport` tag settings under the `GridE } ```` - -## Requirements - -The Excel export has the following requirement: - -* When setting column `Width`, use only `px`. Excel cannot parse units different than `px` (e.g., `rem` or `%`) and renders a collapsed (hidden) column with zero width. This is an Excel limitation. If you prefer to use different than `px` units in the UI, handle the [`OnBeforeExport` event to provide the column width in pixels for the proper export](slug:grid-export-events#for-excel-export). - ## Programmatic Export You can programmatically invoke the export feature of the Grid, by using the following methods exposed on the `@ref` of the Grid: diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index 4288683bea..fd1de027ec 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -10,15 +10,13 @@ position: 7 # Grid PDF Export -You can export the Grid to PDF with the click of a button. The current filter, sort, page, grouping, column order, and column size are applied to the exported PDF document. +You can export the Grid to PDF with the click of a button. The current filter, sort, page, grouping, column order, and column size are applied to the exported PDF document. When you click the Export button, your browser will receive the resulting file. -When you click the Export button, your browser will receive the resulting file. +The Grid exports its raw data to PDF and does not export the full HTML. This behavior is different from the PDF exporting in Kendo UI for jQuery. [To export to PDF as HTML, you can use a custom approach](#custom-export). #### In This Article - [Basics](#basics) - - [How the Export Works](#how-the-export-works) - - [Requirements](#requirements) - [Limitations](#limitations) - [Programmatic Export](#programmatic-export) - [Customization](#customization) @@ -26,9 +24,17 @@ When you click the Export button, your browser will receive the resulting file. ## Basics -To enable users to export the Grid to PDF, you can choose one of the following options: +To enable the PDF export in the Grid: + +1. [Add the Export Tool](#add-the-export-tool) +1. [Configure the Export Settings](#configure-the-export-settings) +1. [Set the Columns Width in Pixels](#set-the-columns-width-in-pixels) + +> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). + +### Add the Export Tool -* Add the `GridToolBarPdfExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): +Add the `GridToolBarPdfExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools) ````RAZOR.skip-repl @@ -38,26 +44,29 @@ To enable users to export the Grid to PDF, you can choose one of the following o ```` -* Add a [command button](slug:components/grid/columns/command) with the `PdfExport` command name inside a templated [Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``): +If you have a custom Toolbar, add a command button with the `PdfExport` command name inside a [templated Grid Toolbar](slug:components/grid/features/toolbar#custom-toolbar-configuration)(``): -````RAZOR.skip-repl - - Export to Pdf - -```` +### Configure the Export Settings -Optionally, you can also set the `GridPdfExport` tag settings under the `GridExport` tag to subscribe to the [Grid export events](slug:grid-export-events) that allow further customization of the exported columns/data or configure the PDF export options: +To configure the PDF export settings, add the `GridPdfExport` tag under the `GridExport` tag. You may set the following options: @[template](/_contentTemplates/common/parameters-table-styles.md#table-layout) - | Parameter | Type and Default Value | Description | | --- | --- | --- | | `FileName` | `string` | The name of the file. The Grid will add the `.pdf` extension for you. | | `AllPages` | `bool` | Whether to export the current page only, or the entire data from the data source. | | `PaperSize` | `GridPdfExportPaperSize` enum
(`A4`) | The size of the paper for the exported file. | | `PageOrientation` | `GridPdfExportPageOrientation` enum
(`Portrait`)| The orientation of the page—portrait or landscape. | - -> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). + +Provide appropriate `PaperSize` and `PageOrientation` properties. For example, if you want to render 20 columns (100px each) in an A4 sheet, then this will yield unexpected results. The column dimensions in a PDF file are fixed, thus they cannot be resized as in Excel, which requires the developer to ensure proper export dimensions. + +For further customizations, use the `GridPdfExport` tag to subscribe to the [Grid export events](slug:grid-export-events). + +### Set the Columns Width in Pixels + +Provide pixel widths for all columns - PDF export requires pixel widths for all columns. Widths in other units such as `%` or `em` cannot be translated correctly and the respective columns will collapse in the exported PDF file. + +The column widths for the PDF export can differ from the ones in the Grid configuration for the web browser. To set column widths for the PDF file only, use the `Width` property of the [`OnBeforeExportEventArgs.Columns`](slug:grid-export-events#for-pdf-export) members. >caption Export the Grid to PDF @@ -70,16 +79,17 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp Groupable="true" Pageable="true" Reorderable="true" - Resizable="true" + Resizable="true" Sortable="true" - Width="650px"> - - Export to PDF - - + Width="700px"> + + + Export to PDF + + - + @@ -94,8 +104,6 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp @code { private List GridData { get; set; } - private bool ExportAllPages { get; set; } - protected override void OnInitialized() { GridData = Enumerable.Range(1, 100).Select(x => new SampleData @@ -119,17 +127,6 @@ Optionally, you can also set the `GridPdfExport` tag settings under the `GridExp } ```` -## How the Export Works - -The Grid exports its raw data to PDF and does not export the full HTML. This behavior is different from the PDF exporting in Kendo UI for jQuery. [To export to PDF as HTML, you can use a custom approach](#custom-export). - -## Requirements - -The PDF export has the following requirements: - -* PDF export requires pixel widths for all columns. Widths in other units such as `%` or `em` cannot be translated correctly and the respective columns will collapse in the exported PDF file. The column widths for the PDF export can differ from the ones in the Grid configuration for the web browser. To set column widths for the PDF file only, use the `Width` property of the [`OnBeforeExportEventArgs.Columns`](slug:grid-export-events#for-pdf-export) members. -* Provide appropriate `PaperSize` and `PageOrientation` properties. For example, if you want to render 20 columns (100px each) in an A4 sheet, then this will yield unexpected results. The column dimensions in a PDF file are fixed, thus they cannot be resized as in Excel, which requires the developer to ensure proper export dimensions. - ## Limitations The PDF export has the following limitations: diff --git a/components/grid/toolbar.md b/components/grid/toolbar.md index e550ff93dc..90a0cc24ea 100644 --- a/components/grid/toolbar.md +++ b/components/grid/toolbar.md @@ -164,9 +164,14 @@ When using a ``, you need to use the `Tab` key to navigate
- - Add Employee - + Add Employee + +
+ Export to CSV + Export to Excel + Export to Pdf + +
+ + + + + + @@ -188,6 +199,8 @@ When using a ``, you need to use the `Tab` key to navigate @code { private string result; + private bool ExportAllPages { get; set; } + private void CreateHandler(GridCommandEventArgs args) { SampleData newItem = args.Item as SampleData; @@ -196,6 +209,14 @@ When using a ``, you need to use the `Tab` key to navigate result = string.Format("On {2} you added the employee {0} who was hired on {1}.", newItem.Name, newItem.HireDate, DateTime.Now); StateHasChanged(); } + + private List MyData = Enumerable.Range(1, 50).Select( + x => new SampleData + { + ID = x, + Name = "name " + x, + HireDate = DateTime.Now.AddDays(-x) + }).ToList(); //in a real case, keep the models in dedicated locations, this is just an easy to copy and see example public class SampleData @@ -205,13 +226,6 @@ When using a ``, you need to use the `Tab` key to navigate public DateTime HireDate { get; set; } } - public List MyData = Enumerable.Range(1, 50).Select( - x => new SampleData - { - ID = x, - Name = "name " + x, - HireDate = DateTime.Now.AddDays(-x) - }).ToList(); } ```` From cd47e06d43409fc6406be87f0ed185be56936ffe Mon Sep 17 00:00:00 2001 From: Nadezhda Tacheva Date: Fri, 28 Mar 2025 18:16:28 +0200 Subject: [PATCH 28/28] chore(grid): update note --- components/grid/export/csv.md | 4 ++-- components/grid/export/excel.md | 3 +-- components/grid/export/pdf.md | 4 ++-- 3 files changed, 5 insertions(+), 6 deletions(-) diff --git a/components/grid/export/csv.md b/components/grid/export/csv.md index 5b113a3657..29ce754e89 100644 --- a/components/grid/export/csv.md +++ b/components/grid/export/csv.md @@ -14,6 +14,8 @@ You can export the grid to CSV with a click of a button. The current filter, sor When you click the Export button, your browser will receive the resulting file. +>tip Make sure to get familiar with all the [general export documentation first](slug:grid-export-overview). + #### In This Article - [Basics](#basics) @@ -27,8 +29,6 @@ To enable the CSV export in the Grid: 1. [Add the Export Tool](#add-the-export-tool) 1. [Configure the Export Settings](#configure-the-export-settings) -> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). - ### Add the Export Tool Add the `GridToolBarCsvExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): diff --git a/components/grid/export/excel.md b/components/grid/export/excel.md index b7ba672526..f626101027 100644 --- a/components/grid/export/excel.md +++ b/components/grid/export/excel.md @@ -14,6 +14,7 @@ You can export the grid to Excel with a click of a button. The current filter, s When you click the Export button, your browser will receive the resulting file. +>tip Make sure to get familiar with all the [general export documentation first](slug:grid-export-overview). #### In This Article @@ -29,8 +30,6 @@ To enable the Excel export in the Grid: 1. [Configure the Export Settings](#configure-the-export-settings) 1. [Set the Columns Width in Pixels](#set-the-columns-width-in-pixels) -> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). - ### Add the Export Tool Add the `GridToolBarExcelExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools): diff --git a/components/grid/export/pdf.md b/components/grid/export/pdf.md index fd1de027ec..e7ef3a5515 100644 --- a/components/grid/export/pdf.md +++ b/components/grid/export/pdf.md @@ -14,6 +14,8 @@ You can export the Grid to PDF with the click of a button. The current filter, s The Grid exports its raw data to PDF and does not export the full HTML. This behavior is different from the PDF exporting in Kendo UI for jQuery. [To export to PDF as HTML, you can use a custom approach](#custom-export). +>tip Make sure to get familiar with all the [general export documentation first](slug:grid-export-overview). + #### In This Article - [Basics](#basics) @@ -30,8 +32,6 @@ To enable the PDF export in the Grid: 1. [Configure the Export Settings](#configure-the-export-settings) 1. [Set the Columns Width in Pixels](#set-the-columns-width-in-pixels) -> Before enabling the export feature, ensure that you are familiar with [its specifics](slug:grid-export-overview#how-the-export-works). - ### Add the Export Tool Add the `GridToolBarPdfExportTool` inside the [``](slug:components/grid/features/toolbar#command-tools)