Exclude Toolbar and Pager from Grid PDF Export
Environment
| Product | Progress® Kendo UI® Grid for jQuery |
| Operating System | All |
| Browser | All |
| Browser Version | All |
Description
When I export a Kendo UI Grid to PDF, the custom toolbar and pager are included.
How can I prevent the custom toolbar and pager from appearing in the exported PDF file?
How can I prevent the column menu icon and filter from appearing in the exported PDF file?
Solution
Use the following CSS rules.
- Toolbar and Pager
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager
{
display: none;
}
- Filter Menu icon
.k-pdf-export .k-grid-filter-menu {
display:none;
}
- Column Menu icon
.k-pdf-export .k-grid-column-menu {
display:none;
}
The following example demonstrates the outcome of the suggested approach.
<div id="example">
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="toolbar">
<label class="category-label" for="category">Test input:</label>
<input type="search" id="category" style="width: 150px"/>
<a class="k-button k-button-icontext k-grid-pdf" href="\\#">Export to Pdf</a>
</div>
</script>
<script id="rowTemplate" type="text/x-kendo-tmpl">
<tr data-uid="#: uid #">
<td class="photo">
<img src="../content/web/Employees/#: EmployeeID #.jpg" alt="#: EmployeeID #" />
</td>
<td class="details">
<span class="name">#: FirstName# #: LastName# </span>
<span class="title">Title: #: Title #</span>
</td>
<td class="country">
#: Country #
</td>
<td class="employeeID">
#: EmployeeID #
</td>
</tr>
</script>
<script id="altRowTemplate" type="text/x-kendo-tmpl">
<tr class="k-alt" data-uid="#: uid #">
<td class="photo">
<img src="../content/web/Employees/#: data.EmployeeID #.jpg" alt="#: EmployeeID #" />
</td>
<td class="details">
<span class="name">#: FirstName# #: LastName# </span>
<span class="title">Title: #: Title #</span>
</td>
<td class="country">
#: Country #
</td>
<td class="employeeID">
#: EmployeeID #
</td>
</tr>
</script>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
/* Hide the Grid header and pager during export */
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager
{
display: none;
}
</style>
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans" : "//kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",
"DejaVu Sans|Bold" : "//kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
"DejaVu Sans|Bold|Italic" : "//kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
"DejaVu Sans|Italic" : "//kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>
<script>
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true,
fileName: "Kendo UI Grid Export.pdf",
proxyURL: "//demos.telerik.com/kendo-ui/service/export"
},
toolbar: kendo.template($("#template").html()),
dataSource: {
type: "odata",
transport: {
read: {
url: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Employees",
}
},
pageSize: 5
},
columns: [
{ title: "Photo", width: 140 },
{ title: "Details", width: 350 },
{ title: "Country" },
{ title: "EmployeeID" }
],
rowTemplate: kendo.template($("#rowTemplate").html()),
altRowTemplate: kendo.template($("#altRowTemplate").html()),
height: 500,
scrollable: true,
pageable: true
});
</script>
<style>
.employeeID,
.country {
font-size: 50px;
font-weight: bold;
color: #898989;
}
.name {
display: block;
font-size: 1.6em;
}
.title {
display: block;
padding-top: 1.6em;
}
td.photo, .employeeID {
text-align: center;
}
.k-grid-header .k-header {
padding: 10px 20px;
}
.k-grid tr {
background: -moz-linear-gradient(top, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.15) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.15)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.05) 0%,rgba(0,0,0,0.15) 100%);
padding: 20px;
}
.k-grid tr.k-alt {
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(100%,rgba(0,0,0,0.1)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.1) 100%);
}
</style>
</div>