Printing All Pages With Client-side Binding

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

    Posted 22 Jul 2016 Link to this post


    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


    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();
            $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 =;
                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>";
            } 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) {
          , '', false);

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


    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.
  2. konnyaku
    konnyaku avatar
    7 posts
    Member since:
    Jul 2018

    Posted 03 Sep 2018 in reply to Telerik Admin Link to this post

    Isn't this Kendo solutions?
  3. PrimePay
    PrimePay avatar
    25 posts
    Member since:
    Feb 2015

    Posted 28 Sep 2018 Link to this post

    Is there a non-kendo solution?  We're using Telerik with AJAX and
Back to Top

This Code Library is part of the product documentation and subject to the respective product license agreement.