Print all pages in kendo grid

Question

I'm trying to print all pages of kendo grid I search alot I used this link http://docs.telerik.com/KENDO-UI/controls/data-management/grid/walkthrough#printing

to print grid ,but it print the current page. like this

note linked name still appear as linked and user can press it in print page.

I tried to use this code to load all pages , but it is not work since it show print page then load grid with all page items

 var dataSource = gridElement.data("kendoGrid").dataSource;
    dataSource.pageSize(dataSource.total());

I want to print all pages of grid in friendly layout , like one export grid to pdf it export friendly grid to print

Edit 1

here is my script to print all grid pages but it not work

$('#printGrid').click(function () {
    printGrid();
});
function printGrid() {
    var gridElement = $('#PageGrid'),
        printableContent = '',
        win = window.open('', '', 'width=800, height=500');
    var dataSource = gridElement.data("kendoGrid").dataSource;
    dataSource.pageSize(dataSource.total());

    var htmlStart =
       '<!DOCTYPE html>' +
       '<html>' +
       '<head>' +
       '<link href="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
       '<meta charset="utf-8" />' +
       '<title>@GlobalResources.Print</title>' +
       '<style>' +
       'html { font: 11pt sans-serif; }' +
       '.k-grid { border-top-width: 0; }' +
       '.k-grid, .k-grid-content { height: auto !important; }' +
       '.k-grid-content { overflow: visible !important; }' +
       'div.k-grid table { table-layout: auto; width: 100% !important; }' +
       '.k-grid .k-grid-header th { border-top: 1px solid; }' +
       '.k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
       '</style>' +
       '</head>' +
       '<body>';

    var htmlEnd =
            '</body>' +
            '</html>';

    var gridHeader = gridElement.children('.k-grid-header');
    if (gridHeader[0]) {
        var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
        printableContent = gridElement
            .clone()
                .children('.k-grid-header').remove()
            .end()
                .children('.k-grid-content')
                    .find('table')
                        .first()
                            .children('tbody').before(thead)
                        .end()
                    .end()
                .end()
            .end()[0].outerHTML;
    } else {
        printableContent = gridElement.clone()[0].outerHTML;
    }

    doc = win.document.open();
    doc.write(htmlStart + printableContent + htmlEnd);
    doc.close();
    win.print();

}

vipin joshi vipin joshi · Accepted Answer · 2018-02-26T08:20:31

var gridElement = $('#PopUpGrid'),
             printableContent = '',
             win = window.open('', '', 'width=800, height=500, resizable=1, scrollbars=1'),
             doc = win.document.open();

         var htmlStart =
             '<!DOCTYPE html>' +
             '<html>' +
             '<head>' +
             '<meta charset="utf-8" />' +
             '<title>Kendo UI Grid</title>' +
             '<link href="http://kendo.cdn.telerik.com/' + kendo.version + '/styles/kendo.common.min.css" rel="stylesheet" /> ' +
             '</head>' +
             '<body>';

         var htmlEnd =
             '</body>' +
             '</html>';

         var gridHeader = gridElement.children('.k-grid-header');
         if (gridHeader[0]) {
             var thead = gridHeader.find('thead').clone().addClass('k-grid-header');
             printableContent = gridElement
                 .clone()
                 .children('.k-grid-header').remove()
                 .end()
                 .children('.k-grid-content')
                 .find('table')
                 .first()
                 .children('tbody').before(thead)
                 .end()
                 .end()
                 .end()
                 .end()[0].innerHTML;
         } else {
             printableContent = gridElement.clone()[0].innerHTML;
         }

         doc.write(htmlStart + printableContent + htmlEnd);
         doc.close();
         win.print();
     }

I hope you find it usefull. feel free to comment my errors thanks.

Print all pages in kendo grid

1 Answers