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. 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.

Make sure to get familiar with all the general export documentation first.

In This Article

• Basics
• Limitations
• Programmatic Export
• Customization
• Custom Export

Basics

To enable the PDF export in the Grid:

1. Add the Export Tool
2. Configure the Export Settings
3. Set the Columns Width in Pixels

Add the Export Tool

Add the GridToolBarPdfExportTool inside the <GridToolBar>

RAZOR

<GridToolBar>        
    <GridToolBarPdfExportTool>
        Export to PDF
    </GridToolBarPdfExportTool>
</GridToolBar>

If you have a custom Toolbar, add a command button with the PdfExport command name inside a templated Grid Toolbar(<GridToolBarTemplate>):

Configure the Export Settings

To configure the PDF export settings, add the GridPdfExport tag under the GridExport tag. You may set the following options:

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.

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.

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 members.

Export the Grid to PDF

@* You can sort, group, filter, page the grid, resize and reorder its columns, and you can click the
    Export button to save the current data *@

<TelerikGrid Data="@GridData"
             FilterMode="@GridFilterMode.FilterMenu"
             Groupable="true"
             Pageable="true"
             Reorderable="true"
             Resizable="true"
             Sortable="true"
             Width="700px">
    <GridToolBar>
        <GridToolBarPdfExportTool>
            Export to PDF
        </GridToolBarPdfExportTool>
    </GridToolBar>

    <GridExport>
        <GridPdfExport FileName="telerik-grid-export"/>
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="200px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="150px" />
    </GridColumns>
</TelerikGrid>

@code {
    private List<SampleData> GridData { 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.15m * 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; }
    }
}

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.

Programmatic Export

You can programmatically invoke the export feature of the Grid, by using the following methods exposed on the @ref of the Grid:

Method	Type	Description
ExportToPdfAsync	Task<MemoryStream>	Returns the exported data as a MemoryStream. The stream itself is finalized, so that the resource does not leak. To read and work with the stream, clone its available binary data to a new MemoryStream instance.
SaveAsPdfFileAsync	ValueTask	Sends the exported PDF file to the browser for download.

Invoke the PDF export function from code

@* Send the exported file for download and get the exported data as a memory stream *@

@using System.IO

<TelerikButton OnClick="@(async () => await GridRef.SaveAsPdfFileAsync())">Download the PDF file</TelerikButton>
<TelerikButton OnClick="@GetTheDataAsAStream">Get the Exported Data as a MemoryStream</TelerikButton>

<TelerikGrid @ref="@GridRef"
             Data="@GridData"
             FilterMode="@GridFilterMode.FilterMenu"
             Groupable="true"
             Pageable="true"
             Reorderable="true"
             Resizable="true"
             Sortable="true"            
             Width="650px">
    <GridToolBarTemplate>
        <GridCommandButton Command="PdfExport" Icon="@SvgIcon.FilePdf">Export to PDF</GridCommandButton>
        <label class="k-checkbox-label"><TelerikCheckBox @bind-Value="@ExportAllPages" />Export All Pages</label>
    </GridToolBarTemplate>

    <GridExport>
        <GridPdfExport FileName="telerik-grid-export" AllPages="@ExportAllPages" />
    </GridExport>

    <GridColumns>
        <GridColumn Field="@nameof(SampleData.ProductId)" Title="ID" Width="100px" />
        <GridColumn Field="@nameof(SampleData.ProductName)" Title="Product Name" Width="200px" />
        <GridColumn Field="@nameof(SampleData.UnitsInStock)" Title="In stock" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Price)" Title="Unit Price" Width="100px" />
        <GridColumn Field="@nameof(SampleData.Discontinued)" Title="Discontinued" Width="150px" />
    </GridColumns>
</TelerikGrid>

@code {
    private TelerikGrid<SampleData> GridRef { get; set; }

    private MemoryStream ExportedPdfStream { get; set; }

    private List<SampleData> GridData { get; set; }

    private bool ExportAllPages { get; set; }

    private async Task GetTheDataAsAStream()
    {
        MemoryStream finalizedStream = await GridRef.ExportToPdfAsync();

        ExportedPdfStream = new MemoryStream(finalizedStream.ToArray());
    }

    protected override void OnInitialized()
    {
        GridData = Enumerable.Range(1, 100).Select(x => new SampleData
            {
                ProductId = x,
                ProductName = $"Product {x}",
                UnitsInStock = x * 2,
                Price = 3.15m * 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; }
    }
}

Customization

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. 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 library that is available with your license.

Read more about how to customize the exported file.

Custom Export

If you want to have full control over the PDF export, you can perform it with a custom approach.

The following sample projects show two ways to implement a PDF export

• Export Grid to PDF on the Server - This export is achieved through the Telerik Document Processing tools that come with your Blazor license. The example shows how to get the DataSourceRequest from the Grid and send it to the server service for processing. Thus, you can fetch the same data that the Grid has (including paging, filtering, sorting) so you can generate the PDF. For WebAssembly apps, this improves the performance by not generating the file in the browser, which is, at the time of writing, too slow for a real-life scenario.

• PDF and JPG Export in the Browser with JS - This sample uses Kendo JS libraries to generate the PDF file from the current DOM in the browser.

See Also

• Blazor Grid
• Live Demo: Grid Export
• Sowing a Loader While Exporting the Grid
• Loading Cyrillic Fonts When Exporting the Grid to PDF