Printing All Pages With Client-side Binding

1 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 22 Jul Link to this post

    Requirements

    Telerik Product and Version

    2016.2 607 or above

    Supported Browsers and Platforms


    Components/Widgets used (JS frameworks, etc.)



    Project description

    This Code Library demonstrates how to print all pages in RadGrid with client-side binding through external button or a custom button within the CommandItemTemplate.

    Print all pages

    Implementation

    For achieving the desired functionality we will need an external button or a custom button in the CommandItemTemplate. Within the client-side click event of that button we will then have to change the page size of the control, so it could display all items on a single page. We can also hide some elements that we do not need in the final layout (like the command, filter or pager item).

    Here is the JavaScript that you need for printing all pages within the click event handler of the custom button:
    <telerik:RadButton runat="server" ID="RadButton1" AutoPostBack="false" Text="Print all pages" OnClientClicked="printGrid"></telerik:RadButton>
    <script type="text/javascript">
        function printGrid() {
            var grid = $find("<%=RadGrid1.ClientID%>"); //getting reference to the RadGrid object
     
            var that = grid;
            var kendo = window.kendo;
            var $printingContainer;
            var originalSize = grid.MasterTableView.get_pageSize();
            var itemsCount = grid.MasterTableView.get_virtualItemCount();
            grid.MasterTableView.set_pageSize(itemsCount);
            $telerik.$(grid.get_element()).find(".rgCommandTable").hide();//hiding the command item
            $telerik.$(grid.get_element()).find(".rgPager").hide();//hiding the pager
            if ($telerik.isIE || Telerik.Web.Browser.edge) {
                var printWindow = window.open();
     
                if (!printWindow) return false;
     
                $printingContainer = $telerik.$("<div>");
     
                kendo.drawing.drawDOM(that.get_element()).then(function (group) {
                    return kendo.drawing.Surface.create($printingContainer, { type: "svg" }).draw(group);
                }).done(function (data) {
                    var html = "<html><head>" + that._getHeadLinksForPrint() + "</head><body><form style='height:" + that.get_element().scrollHeight + "px;'>" +
                        $printingContainer.get(0).innerHTML + "</form></body></html>";
                    printWindow.document.open();
                    printWindow.document.write(html);
                    printWindow.document.close();
                    printWindow.print();
                    $printingContainer.remove();
                });
            } else {
                kendo.drawing.drawDOM(that.get_element(), {
                    margin: "2cm",
                    scale: 0.7,
                    paperSize: "A4"
                })
                .then(function (root) {
                    return kendo.drawing.exportPDF(root);
                })
                .done(function (data) {
                    window.open(data, '', false);
                    grid.MasterTableView.set_pageSize(originalSize);
                    $telerik.$(grid.get_element()).find(".rgCommandTable").show();
                    $telerik.$(grid.get_element()).find(".rgPager").show();
                });
            }
        }
    </script>


    Attached you can find a runnable sample with the same implementation.


    Note

    If you have too many records, rendering all items on a single page could prove to be a slow operation and it you could consider (for better user experience) to manually display an overlay or loading panel that will inform the user that there is pending operation.
Back to Top