Export All ListView Pages to PDF

Environment

Product	Progress® Kendo UI® ListView for jQuery
Product Version	Created with the 2017.3.1026 version

Description

How can I export all ListView pages to a PDF file?

Solution

1. Select the Pager of the ListView.
2. Save the dataSource pageSize in a variable.
3. Change the pageSize to display all the items.
4. Use the Kendo UI Drawing API to export the desired content.
5. When the export promise is done, set the old pageSize to the dataSource of the Pager.
   

<div id="example">
    <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": "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold": "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic": "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic": "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "WebComponentsIcons": "https://kendo.cdn.telerik.com/2023.1.117/styles/fonts/glyphs/WebComponentsIcons.ttf"
        });
    </script>

    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="https://unpkg.com/pako/dist/pako_deflate.min.js"></script>

    <script src="https://demos.telerik.com/kendo-ui/content/shared/js/products.js"></script>

    <div class="demo-section k-content wide">
        <div id="listView"></div>
        <div id="pager" class="k-pager"></div>
    </div>

    <script type="text/x-kendo-template" id="template">
        <div class="product">
            <img src="https://demos.telerik.com/kendo-ui/content/web/foods/#= ProductID #.jpg" alt="#: ProductName # image" />
            <h3>#:ProductName#</h3>
            <p>#:kendo.toString(UnitPrice, "c")#</p>
        </div>
    </script>

    <script>
        $(function() {
            var dataSource = new kendo.data.DataSource({
                data: products,
                pageSize: 21
            });

            $("#pager").kendoPager({
                dataSource: dataSource
            });

            $("#listView").kendoListView({
                dataSource: dataSource,
                template: kendo.template($("#template").html())
            });
        });
        setTimeout(function(e) {
            var pager = $("#pager").data("kendoPager");
            var oldPageSize = pager.dataSource.pageSize();
            var total = oldPageSize * pager.dataSource.totalPages();

            pager.dataSource.pageSize(total);

            kendo.drawing.drawDOM($("#example"))
                .then(function(group) {
                    kendo.drawing.pdf.saveAs(group, "ListView.pdf");
                })
                .done(function(data) {
                    pager.dataSource.pageSize(oldPageSize);
                });
        }, 1500);
    </script>

    <style>
        #listView {
            padding: 10px 5px;
            margin-bottom: -1px;
            min-height: 510px;
            /* Avoid cutout if font or line is bigger */
            font: inherit;
        }

        .product {
            float: left;
            position: relative;
            width: 111px;
            height: 170px;
            margin: 0 5px;
            padding: 0;
        }

        .product img {
            width: 110px;
            height: 110px;
        }

        .product h3 {
            margin: 0;
            padding: 3px 5px 0 0;
            max-width: 96px;
            overflow: hidden;
            line-height: 1.1em;
            font-size: .9em;
            font-weight: normal;
            text-transform: uppercase;
            color: #999;
        }

        .product p {
            visibility: hidden;
        }

        .product:hover p {
            visibility: visible;
            position: absolute;
            width: 110px;
            height: 110px;
            top: 0;
            margin: 0;
            padding: 0;
            line-height: 110px;
            vertical-align: middle;
            text-align: center;
            color: #fff;
            background-color: rgba(0, 0, 0, 0.75);
            transition: background .2s linear, color .2s linear;
            -moz-transition: background .2s linear, color .2s linear;
            -webkit-transition: background .2s linear, color .2s linear;
            -o-transition: background .2s linear, color .2s linear;
        }

        .k-listview:after {
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
    </style>
</div>