Edit this page

Printing

In most cases, the Grid is not the only content on a page. Yet, you might want to print only the Grid.

To achieve that, use either of these options:

  • Print the existing page and hide the irrelevant content with print CSS.
  • Print a separate web page with only the Grid on it.

To print only the Grid as part of an existing web page, use a print stylesheet to hide the parts of the page that you do not need. The exact print CSS code will depend on the existing page content.

The following example demonstrates how to retrieve the HTML of the Grid, inject it in a new browser window, and print the new page. This approach also addresses some other important things you need to consider:

  • If the Grid is scrollable, some rows or columns may not be visible on the printed paper. So, the Grid height and scrollability are disabled on the print-friendly page.
  • Depending on the column width, some of the cell content may be clipped and not fully visible. This issue is resolved by forcing an automatic table-layout to the Grid table, which disables the ellipsis (...).
  • If scrolling is enabled (which is set by default except for the MVC wrapper of the Grid), the Grid renders a separate table for the header area. Because the browser is not able to understand the relationship between the two Grid tables, it will not repeat the header row on top of every printed page. The following example shows how to address this issue by cloning the header table row into the data table.
  • On a side note, when printing a Grid with locked (frozen) columns, it is possible for the resulting columns or rows to get misaligned, or for the overall layout to get broken. In such cases, it is advisable to use a separate print-friendly Grid instance with no frozen columns.
Example

    <div id="grid"></div>

    <script type="text/x-kendo-template" id="toolbar-template">
        <button type="button" class="k-button" id="printGrid">Print Grid</button>
    </script>

     function printGrid() {
        var gridElement = $('#grid'),
            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" /> ' +
                '<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-grouping-header, .k-grid-toolbar, .k-grid-pager > .k-link { display: none; }' +
                // '.k-grid-pager { display: none; }' + // optional: hide the whole pager
                '</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.write(htmlStart + printableContent + htmlEnd);
        doc.close();
        win.print();
    }

    $(function () {
        var grid = $('#grid').kendoGrid({
            dataSource: {
                type: 'odata',
                transport: {
                    read: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products"
                },
                pageSize: 20,
                serverPaging: true,
                serverSorting: true,
                serverFiltering: true
            },
            toolbar: kendo.template($('#toolbar-template').html()),
            height: 400,
            pageable: true,
            columns: [
                { field: 'ProductID', title: 'Product ID', width: 100 },
                { field: 'ProductName', title: 'Product Name' },
                { field: 'UnitPrice', title: 'Unit Price', width: 100 },
                { field: 'QuantityPerUnit', title: 'Quantity Per Unit' }
            ]
        });

        $('#printGrid').click(function () {
            printGrid();
        });

    });

See Also

For how-to examples on the Kendo UI Grid widget, browse its How To documentation folder.

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy