Show hidden columns during PDF Export
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Product Version | Created with the 2019.1.115 version |
Description
After showing and hiding of the hidden column it leaves a empty space in the grid when I use the showColumn() and hideColumn() methods. How can I avoid this?
Solution
The usage of the showColumn() and hideColumn() methods is known for causing this behaviour. Another option to show the desired columns is to only using CSS rules just for the PDF Export and remove the JavaScript handler:
.k-pdf-export td:nth-child(1),.k-pdf-export thead th:nth-child(1)
{
display: table-cell !important;
}
<style>
.page-template {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.page-template .header {
position: absolute;
top: 30px;
left: 30px;
right: 30px;
border-bottom: 1px solid #888;
text-align: center;
font-size: 18px;
}
.page-template .footer {
position: absolute;
bottom: 30px;
left: 30px;
right: 30px;
}
.k-pdf-export td:nth-child(1),.k-pdf-export thead th:nth-child(1)
{
display: table-cell !important;
}
.k-pdf-export .k-grid-column-menu{
display: none;
}
</style>
</head>
<body>
<!-- Load Pako Deflate library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<div id="grid"></div>
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
Kendo UI Grid Export
</div>
<div class="footer">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
</div>
</div>
</script>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
fileName: "Kendo UI Grid Export.pdf",
paperSize: "A4",
allPages: true,
avoidLinks: true,
margin: { top: "1.5cm", right: "0.5cm", bottom: "1cm", left: "0.5cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.6
},
dataSource: {
type: "odata",
transport: {
read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
},
pageSize: 10
},
sortable: true,
scrollable: true,
pageable: true,
filterable: true,
columnMenu: true,
columns: [
{ field: "Discontinued", hidden:true, width:200 },
{ field: "UnitsOnOrder", title: "Units On Order1", width: 300 },
{ field: "UnitsInStock", title: "Units In Stock1", width: 300 },
{ field: "ProductName", title: "Product Name2", width: 300 },
]
});
</script>