New to Telerik UI for ASP.NET Core? Download free 30-day trial

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:

More ASP.NET Core ListView Resources

See Also

In this article