Export All ListView Pages to PDF
Environment
| Product | Telerik UI for ASP.NET MVC ListView |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2023.2.829 version |
Description
How can I use the Kendo UI Drawing library to export all ListView pages to PDF?
Solution
-
Add a button above the ListView that will be used for the PDF export.
@(Html.Kendo().Button() .Name("pdfExportBtn") .Content("Export to PDF") .HtmlAttributes(new { type = "button" }) .Events(ev => ev.Click("onClick"))) Within the button
clickevent handler, get a reference to the ListView, store its page size into a global variable, and calculate the total records.- Call the
pageSize()method of the DataSource to update the current page size with all available records to export them into the PDF file. Otherwise, the exported file will contain only the current page records. - Subscribe only once to the
DataBoundevent of the ListView to ensure that all records are loaded. - Use the Kendo UI Drawing API to export the ListView content.
- Change back the page size of the ListView.
<script>
function onClick() {
var listView = $("#listView").data("kendoListView"); // Get a reference to the ListView.
var currentPageSize = listView.dataSource.pageSize(); // Get the page size of the DataSource.
var total = currentPageSize * listView.dataSource.totalPages(); // Calculate the total ListView records.
listView.dataSource.pageSize(total); // Update the page size to display all records in a single page.
listView.one("dataBound", function(){ // Subscribe once to the "dataBound" event of the ListView.
kendo.drawing.drawDOM($(".listview-container"), { // Initialize the PDF export.
paperSize: "A4",
multiPage: true,
margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
})
.then(function (group) {
return kendo.drawing.exportPDF(group);
})
.done(function (data) {
kendo.saveAs({
dataURI: data,
fileName: "TestPrint.pdf"
});
});
});
listView.dataSource.pageSize(currentPageSize); // Change back the page size.
}
</script>
For a runnable example based on the code above, refer to the REPL example on exporting all ListView pages to PDF.