diff --git a/blazor/datagrid/print.md b/blazor/datagrid/print.md index bb9f616794..3c1596ddf5 100644 --- a/blazor/datagrid/print.md +++ b/blazor/datagrid/print.md @@ -1,7 +1,7 @@ --- layout: post title: Print in Blazor DataGrid Component | Syncfusion -description: Checkout and learn here all about Print in Syncfusion Blazor DataGrid component and much more details. +description: Learn to print the Syncfusion Blazor DataGrid using the toolbar Print command or PrintAsync method, configure browser page setup, and handle large columns. platform: Blazor control: DataGrid documentation: ug @@ -11,15 +11,17 @@ documentation: ug # Print in Blazor DataGrid -The printing feature in Syncfusion® Blazor DataGrid 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](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. +The **Print** feature in the Syncfusion® Blazor DataGrid generates a print-ready view of DataGrid content for offline access and documentation. Initiate printing through the built-in toolbar option or programmatically using the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. The output reflects the DataGrid’s current state, including visible columns, sorting, and filtering, and opens the browser’s print dialog. -To add the printing option to the Grid’s Toolbar, simply include the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_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 +To enable printing from the toolbar, add the `"Print"` item to the [Toolbar](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_Toolbar) property. + +**Example: Enabling Print Functionality** {% tabs %} {% highlight razor tabtitle="Index.razor" %} @using Syncfusion.Blazor.Grids - + @@ -29,75 +31,73 @@ To add the printing option to the Grid’s Toolbar, simply include the [Toolbar] @code { - - public List Orders { get; set; } + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData + +internal sealed class OrderData +{ + private static readonly List Data = new(); + + public OrderData(int orderID, string customerID, string shipCity, string shipName) { - public static List Orders = new List(); - public OrderData() - { + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; + } - } - public OrderData(int? OrderID,string CustomerID,string ShipCity,string ShipName) + internal static List GetAllRecords() + { + if (Data.Count == 0) { - this.OrderID = OrderID; - this.CustomerID = CustomerID; - this.ShipCity = ShipCity; - this.ShipName = ShipName; + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Cheval")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importado")); } + return Data; + } - public static List 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; } +} - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } - } {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVACDDzLCOPwlKE?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLoiXMfUGltKtYZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} -## Page setup +## Page Setup for Printing -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 layout options such as `paper size`, `margins`, `headers` and `footers`, and `scaling` are controlled by the browser’s print dialog. These settings cannot be configured through **application code**. Refer to browser-specific setup guides: -* [Chrome](https://support.google.com/chrome/answer/1069693?hl=en&visit_id=1-636335333734668335-3165046395&rd=1) +* [Chrome](https://support.google.com/chrome/answer/1069693?hl=en) * [Firefox](https://support.mozilla.org/en-US/kb/how-print-web-pages-firefox) * [Safari](https://www.mintprintables.com/print-tips/adjust-margins-osx/) -* [IE](https://www.helpteaching.com/blog/) +* [Internet Explorer](https://www.helpteaching.com/blog/) (legacy) -## Print by external button +## Printing with an External Button -You can print the Syncfusion® Blazor DataGrid’s content using an external button by utilizing the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. This method allows you to trigger the printing process programmatically. +Printing can be triggered from external UI elements by calling the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method programmatically. This opens the browser’s print dialog and reflects the current state of the DataGrid, including visible columns, sorting, and filtering. + +This approach provides flexibility to integrate printing into custom workflows or toolbar actions beyond the built-in options. + +#### Example: Programmatic Printing with External Button {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -105,7 +105,7 @@ You can print the Syncfusion® Blazor DataGr @using Syncfusion.Blazor.Buttons - + @@ -113,70 +113,75 @@ You can print the Syncfusion® Blazor DataGr -@code -{ + +@code { private SfGrid DefaultGrid; - public List Orders{ get; set; } + private List Orders { get; set; } protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public void PrintContent() + + private async Task PrintContent() { - this.DefaultGrid.PrintAsync(); + await DefaultGrid.PrintAsync(); } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} - public class OrderData + +internal sealed class OrderData +{ + private static readonly List Data = new(); + + public OrderData(int orderID, string customerID, string shipCity, string shipName) { - public static List Orders = new List(); - public OrderData() - { + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName = shipName; + } - } - 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 GetAllRecords() + internal static List GetAllRecords() + { + if (Data.Count == 0) { - 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; + Data.Add(new OrderData(10248, "VINET", "Reims", "Vins et alcools Cheval")); + Data.Add(new OrderData(10249, "TOMSP", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "VICTE", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "SUPRD", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "HANAR", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10254, "CHOPS", "Bern", "Chop-suey Chinese")); + Data.Add(new OrderData(10255, "RICSU", "Genève", "Richter Supermarkt")); + Data.Add(new OrderData(10256, "WELLI", "Resende", "Wellington Importado")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Data; } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/rXrgWXZTryODdbNo?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BZVyCZsJTDndUnwJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +## Print Only the Visible Page + +The Syncfusion® Blazor DataGrid prints all pages in the dataset by default. To print only the currently visible page, set the [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.PrintMode.html) property to `CurrentPage`.This configuration applies when printing is triggered using the built-in toolbar or programmatically through the [PrintAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_PrintAsync) method. + +#### Available Print Modes -## Print visible Page +- **PrintMode.AllPages**: Prints the entire dataset across all pages. This is the default behavior. +- **PrintMode.CurrentPage**: Prints only the data displayed on the current page. -By default, the Syncfusion® Blazor DataGrid prints all the pages of the Grid. The [PrintMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Charts.ChartSeries.html#Syncfusion_Blazor_Charts_ChartSeries_DashArray) 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**. +#### Example: Printing the Current Page {% tabs %} {% highlight razor tabtitle="Index.razor" %} @@ -189,7 +194,7 @@ By default, the Syncfusion® Blazor DataGrid - + @@ -198,74 +203,74 @@ By default, the Syncfusion® Blazor DataGrid + @code { private SfGrid Grid; - public List Orders { get; set; } - public PrintMode PrintMode { get; set; } = PrintMode.AllPages; + private List Orders { get; set; } + private PrintMode PrintMode { get; set; } = PrintMode.AllPages; protected override void OnInitialized() { Orders = OrderData.GetAllRecords(); } - public class DropDownOrder + + private sealed class DropDownOrder { public string Text { get; set; } public PrintMode Value { get; set; } } - List DropDownValue = new List - { - new DropDownOrder() { Text = "All Pages", Value = PrintMode.AllPages }, - new DropDownOrder() { Text = "Current Page", Value = PrintMode.CurrentPage }, + private List DropDownValue = new() + { + new DropDownOrder { Text = "All Pages", Value = PrintMode.AllPages }, + new DropDownOrder { Text = "Current Page", Value = PrintMode.CurrentPage }, }; - public void OnValueChange(ChangeEventArgs Args) + + private void OnValueChange(ChangeEventArgs Args) { PrintMode = Args.Value; Grid.Refresh(); } } + {% endhighlight %} {% highlight c# tabtitle="OrderData.cs" %} -public class OrderData + +internal sealed class OrderData +{ + private static readonly List Data = new(); + + public OrderData(int orderID, string customerID, string shipCity, string shipName) { - public static List Orders = new List(); - public OrderData() - { + OrderID = orderID; + CustomerID = customerID; + ShipCity = shipCity; + ShipName= shipName; + } - } - 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 GetAllRecords() + internal static List GetAllRecords() + { + if (Data.Count == 0) { - 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; + Data.Add(new OrderData(10248, "ALFKI", "Reims", "Vins et alcools Chev")); + Data.Add(new OrderData(10249, "ANANTR", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10250, "ANTON", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10251, "BLONP", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10252, "BOLID", "Charleroi", "Suprêmes délices")); + Data.Add(new OrderData(10253, "ANTON", "Lyon", "Victuailles en stock")); + Data.Add(new OrderData(10254, "BLONP", "Rio de Janeiro", "Hanari Carnes")); + Data.Add(new OrderData(10255, "BOLID", "Münster", "Toms Spezialitäten")); + Data.Add(new OrderData(10256, "ALFKI", "Reims", "Vins et alcools Chev")); } - public int? OrderID { get; set; } - public string CustomerID { get; set; } - public string ShipCity { get; set; } - public string ShipName { get; set; } + return Data; } + + public int OrderID { get; set; } + public string CustomerID { get; set; } + public string ShipCity { get; set; } + public string ShipName { get; set; } +} + {% endhighlight %} {% endtabs %} @@ -355,11 +360,15 @@ This is demonstrated in the below sample code, The following image represents Hierarchial Grid with print toolbar item, ![Print Hierarchial Grid Content](./images/grid-hierarchial-print.png) --> -## Print large number of columns +## Printing a Large Number of Columns -When printing a Syncfusion® Blazor DataGrid 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. +When printing a Syncfusion® Blazor DataGrid that contains a large number of columns, the default page size used by the browser (such as A4) may not have enough space to display all columns. As a result, some columns may be hidden in the print preview or printed output. +To include more columns in the printable area: -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. +- Switch to `landscape orientation` in the browser’s print dialog. +- Adjust the `scale setting` to reduce content size, fitting more columns on the page. + +These adjustments ensure visibility of all columns for wide grids. ![Printing large number of columns in Syncfusion Blazor DataGrid.](./images/blazor-datagrid-print-large-columns.png) @@ -429,10 +438,20 @@ In the below example, we have **CustomerID** as a hidden column in the datagrid. } ``` --> -## Limitations of printing large data +## Limitations of Printing Large Data + +Printing a large volume of data in a single page may cause performance issues in the browser. Rendering many rows and columns at once can slow down the page or make it unresponsive. + +The DataGrid uses `virtualization` to improve performance during on-screen rendering. However, virtualization for rows and columns is `not feasible` during printing. All data is rendered at once, which increases the load on the browser. + +To avoid performance issues when printing large datasets, consider exporting the data to a supported format: -Printing a large volume of data all at once in the Syncfusion® Blazor DataGrid 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. +- [Excel](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) +- [CSV](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) +- [PDF](https://blazor.syncfusion.com/documentation/datagrid/pdf-export) + +These formats can be printed using desktop applications, which offer better control over layout and performance. -If printing all the data remains a requirement, an alternative approach is recommended. Exporting the Grid data to formats like [Excel](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) or [CSV](https://blazor.syncfusion.com/documentation/datagrid/excel-exporting) or [Pdf](https://blazor.syncfusion.com/documentation/datagrid/pdf-export) 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. +> The printed output reflects the current state of the DataGrid, including visible columns, sorting, and filtering at the time printing is initiated. -> You can refer to our [Syncfusion® Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour page for its groundbreaking feature representations. You can also explore our [Syncfusion® Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand how to present and manipulate data. \ No newline at end of file +N> Refer to the [Blazor DataGrid](https://www.syncfusion.com/blazor-components/blazor-datagrid) feature tour for a broad overview. Explore the [Blazor DataGrid example](https://blazor.syncfusion.com/demos/datagrid/overview?theme=bootstrap5) to understand data presentation and manipulation. \ No newline at end of file