Export All ListView Pages to PDF

Environment

Product	Telerik UI for ASP.NET Core ListView
Progress Telerik UI for ASP.NET Core 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

1. 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")))
   

       @addTagHelper *, Kendo.Mvc
       <kendo-button name="pdfExportBtn" on-click="onClick">
           Export to PDF
       </kendo-button>
   

2. Within the button click event handler, get a reference to the ListView, store its page size into a global variable, and calculate the total records.

3. 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.
4. Subscribe only once to the DataBound event of the ListView to ensure that all records are loaded.
5. Use the Kendo UI Drawing API to export the ListView content.
6. 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 following REPL samples:

• Sample code with the ListView HtmlHelper
• Sample code with the ListView TagHelper

More ASP.NET Core ListView Resources

• ASP.NET Core ListView Documentation

• ASP.NET Core ListView Demos

• ASP.NET Core ListView Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the ListView for ASP.NET Core

• Server-Side API Reference of the ListView for ASP.NET Core

• Server-Side TagHelper API Reference of the ListView for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base