Printing the Kendo UI for Vue Grid
This article shows how to print the Grid in multiple use-case scenarios using the browser's print window.
The scenarios discussed below are:
To ensure the Grid is ready for printing, you may need to manipulate its dimensions using the approaches discussed in this article or by applying custom CSS. The printing requires the retrieving of the correct dataset in advance. Due to various use cases, such adjustments should be implemented by the developer.
Printing a Scrollable Grid
The following example shows how to print a scrollable Grid by:
- Changing Grid's dimensions before the printing
- Setting component's scrollable property to
nonefor the time of printing - Restoring the original Grid configuration after printing
Printing a Pageable Grid
The example shows how to prepare the pagable Grid for printing by:
- Changing Grid's dimensions before the printing
- Passing to the component all the data that needs to be printed
- Setting the scrollable property to
nonefor the time of printing - Restoring the original configuration after printing
Control the Print Output
The scenarios where we have multiple columns rendered inside the Grid or the column's length is big are not uncommon. In these cases, we still need to print our data. Below you will find how to handle such scenarios by:
- Controlling the list of printable columns
- Dynamically change the width of Grid's columns in a way they fit the printing size
Control the List of Printable Columns
This approach is useful for scenarios when you have that many columns that all of them cannot be visualized inside the print window. Another option you can use the following implementation for is when only essential data should be printed. To test the example, deselect some of the checkboxes and print the Grid.
The following example demonstrates how to control which Grid columns will be printed.
Change the Width of the Printable Columns
This approach is useful for scenarios when the Grid has many columns and all of them should be printed. In this case, we can dynamically change the width of the columns in a way they fit the printing size. To test the example, click on the "Print" button and check the print preview.
The following example demonstrates how to dynamically change the width of the Grid's columns in a way they fit the printing size.
Known Limitations
It is recommended to use the above printing techniques with smaller sets of data. While it is possible to print larger data sets, doing so will result in the generation of many DOM elements that could slow the browser down or make it unresponsive.