Print in Blazor DataGrid Component
3 Nov 202324 minutes to read
The printing feature in Syncfusion Grid allows you to easily generate and print a representation of the grid’s content for better offline accessibility and documentation. You can enable this feature using either the grid’s Toolbar or the programmatically available PrintAsync method.
To add the printing option to the grid’s Toolbar, simply include the Toolbar property in your grid configuration and add the Print as Toolbar item. This will allow you to directly initiate the printing process while click on the Print item from the toolbar
@using Syncfusion.Blazor.Grids
@using BlazorApp1.Data
<SfGrid DataSource="@Orders" Height="315" oolbar="@(new List<object>() { "Print" })">
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="140"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer ID" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="100"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="100"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<OrderData> Orders { get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity,string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Cheval"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importado"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Page setup
When printing a webpage, some print options, such as layout, paper size, and margin settings, cannot be configured through code. Instead, you need to customize these settings using the browser’s page setup dialog. Below are links to the page setup guides for popular web browsers:
Print by external button
You can print the grid’s content using an external button by utilizing the PrintAsync method. This method allows you to trigger the printing process programmatically.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Buttons
@using BlazorApp1.Data
<SfButton Content="Print" OnClick="PrintContent"></SfButton>
<SfGrid @ref="DefaultGrid" DataSource="@Orders" >
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" Width="130"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code
{
private SfGrid<OrderData> DefaultGrid;
public List<OrderData> Orders{ get; set; }
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public void PrintContent()
{
this.DefaultGrid.PrintAsync();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID,string CustomerID,string ShipCity,string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName = ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 2; i++)
{
Orders.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Cheval"));
Orders.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese"));
Orders.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt"));
Orders.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importado"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Print visible Page
By default, the Syncfusion Blazor Grid prints all the pages of the grid. The PrintMode property within the grid grants you control over the printing process. However, if you want to print only the current visible page, you can achieve this by setting the PrintMode property to CurrentPage.
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using BlazorApp1.Data
<label>Select Print Mode: </label>
<SfDropDownList TValue="PrintMode" TItem="DropDownOrder" @bind-Value="@PrintMode" DataSource="@DropDownValue" Width="130px">
<DropDownListFieldSettings Text="Text" Value="Value"></DropDownListFieldSettings>
<DropDownListEvents ValueChange="OnValueChange" TValue="PrintMode" TItem="DropDownOrder"></DropDownListEvents>
</SfDropDownList>
<SfGrid @ref="Grid" DataSource="@Orders" Toolbar="@(new List<object>() { "Print" })" PrintMode="@PrintMode" AllowPaging="true">
<GridPageSettings PageSize="6"></GridPageSettings>
<GridColumns>
<GridColumn Field=@nameof(OrderData.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.CustomerID) HeaderText="Customer Name" Width="120"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipCity) HeaderText="Ship City" TextAlign="TextAlign.Right" Width="130" Type="ColumnType.Date"></GridColumn>
<GridColumn Field=@nameof(OrderData.ShipName) HeaderText="Ship Name" TextAlign="TextAlign.Right" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code {
private SfGrid<OrderData> Grid;
public List<OrderData> Orders { get; set; }
public PrintMode PrintMode { get; set; } = PrintMode.AllPages;
protected override void OnInitialized()
{
Orders = OrderData.GetAllRecords();
}
public class DropDownOrder
{
public string Text { get; set; }
public PrintMode Value { get; set; }
}
List<DropDownOrder> DropDownValue = new List<DropDownOrder>
{
new DropDownOrder() { Text = "All Pages", Value = PrintMode.AllPages },
new DropDownOrder() { Text = "Current Page", Value = PrintMode.CurrentPage },
};
public void OnValueChange(ChangeEventArgs<PrintMode, DropDownOrder> Args)
{
PrintMode = Args.Value;
Grid.Refresh();
}
}public class OrderData
{
public static List<OrderData> Orders = new List<OrderData>();
public OrderData()
{
}
public OrderData(int? OrderID, string CustomerID, string ShipCity,string ShipName)
{
this.OrderID = OrderID;
this.CustomerID = CustomerID;
this.ShipCity = ShipCity;
this.ShipName= ShipName;
}
public static List<OrderData> GetAllRecords()
{
if (Orders.Count() == 0)
{
int code = 10;
for (int i = 1; i < 3; i++)
{
Orders.Add(new OrderData(10248, "ALFKI", "Reims", "Vins et alcools Chev"));
Orders.Add(new OrderData(10249, "ANANTR", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10250, "ANTON", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10251, "BLONP", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10252, "BOLID", "Charleroi", "Suprêmes délices"));
Orders.Add(new OrderData(10253, "ANTON", "Lyon", "Victuailles en stock"));
Orders.Add(new OrderData(10254, "BLONP", "Rio de Janeiro", "Hanari Carnes"));
Orders.Add(new OrderData(10255, "BOLID", "Münster", "Toms Spezialitäten"));
Orders.Add(new OrderData(10256, "ALFKI", "Reims", "Vins et alcools Chev"));
code += 5;
}
}
return Orders;
}
public int? OrderID { get; set; }
public string CustomerID { get; set; }
public string ShipCity { get; set; }
public string ShipName { get; set; }
}Print large number of columns
When printing a grid with a large number of columns, the browser’s default page size (usually A4) might not be sufficient to display all the columns properly. As a result, the browser’s print preview may automatically hide the overflowed content, leading to a cut-off appearance.
To show a large number of columns when printing, you can adjust the scale option from the print option panel based on your content size. This will allow you to fit the entire grid content within the printable area.
Limitations of printing large data
Printing a large volume of data all at once in the grid can have certain limitations due to potential browser performance issues. Rendering numerous DOM elements on a single page can lead to browser slowdowns or even hang the browser. The grid offers a solution to manage extensive datasets through virtualization. However, it’s important to note that virtualization for both rows and columns is not feasible during the printing process.
If printing all the data remains a requirement, an alternative approach is recommended. Exporting the grid data to formats like Excel or CSV or Pdf is advised. This exported data can then be printed using non-web-based applications, mitigating the potential performance challenges associated with printing large datasets directly from the browser.
You can refer to our Blazor DataGrid feature tour page for its groundbreaking feature representations. You can also explore our Blazor DataGrid example to understand how to present and manipulate data.