Edit this page

Export All ListView Pages to PDF


Product Progress Kendo UI ListView
Progress Kendo UI version Created with the 2017.3.1026 version


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


  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">
        // 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
            "DejaVu Sans": "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold": "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic": "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic": "https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "WebComponentsIcons": "https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"

    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="https://kendo.cdn.telerik.com/2017.3.913/js/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-wrap"></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" />
            <p>#:kendo.toString(UnitPrice, "c")#</p>

        $(function() {
            var dataSource = new kendo.data.DataSource({
                data: products,
                pageSize: 21

                dataSource: dataSource

                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();


                .then(function(group) {
                    kendo.drawing.pdf.saveAs(group, "ListView.pdf");
                .done(function(data) {
        }, 1500);

        #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;
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article