Page for client-side export

1 posts, 0 answers
  1. Marin
    Marin  avatar
    21 posts
    Member since:
    Jul 2012

    Posted 11 Sep Link to this post

    Requirements

    Telerik Product and Version used

    Telerik Web UI for ASP.NET AJAX 2018.2.710.45

    Supported Browsers and Platforms

    All browsers supported by Telerik UI for ASP .NET AJAX

    Components/Widgets used (JS frameworks, etc.)

    ASP.NET, C#, JavaScript

    PROJECT DESCRIPTION 

    When exporting to PDF by using RadClientExportManager you may sometimes need to add hard page-breaks in the current grid so that a certain number of rows are displayed on different pages in the exported file. 

    Left picture shows an example of RadGrid with 20 items across 2 pages, right picture show the result of the exported file when exporting all records across all pages and applying page-break.
    Exmple Grid Exported Results with Page-Break

     

    To do this, you need to traverse the rows and add the page break selector to the desired rows.

    The attached sample project demonstrates one way to do this. It also shows how you can export all the grid data across all pages to a PDF through the client-side export by disabling paging at the server level, which can be useful for generating small reports.

    You could simply loop through the items and add the ',pageBreak' classname to the rows. In case, however, you would like to display the grid headers on each page, you can clone the header for each page.


    Export to PDF with page-break

    Here is an example of client-side method to apply page-break after specified amount of rows as well clones the Grid header.
    function addPageBreakSelectorsToGrid(itemsPerPage) {
        var grid = $find("<%=RadGrid1.ClientID%>");
        var items = grid.get_masterTableView().get_dataItems();
        for (var i = 0; i < items.length; i++) {
            if (i > 0 && i % itemsPerPage == 0) { //add a page break every nth item, you can use the original page size here if you like
                var breakRow = '<tr class="pageBreak">';
                //clone the header so the subsequent pages show a header to the consumer
                for (var j = 0; j < grid.get_masterTableView().get_columns().length; j++) {
                    breakRow += '<td class="rgHeader">' + grid.get_masterTableView().get_columns()[j].get_uniqueName() + '</td>';
                }
                breakRow += '</tr>';
                $telerik.$(breakRow).insertAfter(items[i-1].get_element());
            }
        }
    }

    Create a function that will call the exportPDF method of the ClientExportManager.
    function callExport() {
        var exportManager = $find("<%=rcem1.ClientID%>");
        exportManager.exportPDF($telerik.$("#forExport"));
    }

    With a Button click, you can then apply page-break and export, like so:
    function buttonClickHandler() {
        addPageBreakSelectorsToGrid(5); // apply page break with header after every 5th row
        callExport(); // export to PDF
    }


    Export with disabled Paging

    To disable paging for the grid, a postback needs to be done. Since the ClientExportManager only operates on the client, you can send an AJAX request to the server through the RadAjaxManager.
    //used only for when paging will be disabled so all data will be rendered
    //NOTE: this can deteriorate performance significantly, use such an approach only if you don't have a lot of data
    function disablePagingAndExport(sender, args) {
        $find("<%=RadAjaxManager.GetCurrent(Page).ClientID%>").ajaxRequest("disablePaging");
    }

    Subscribe the AjaxManager to its AjaxRequest server-side event
    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
    </telerik:RadAjaxManager>

    AjaxRequest  event handler
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "disablePaging")
        {
            RadGrid1.AllowPaging = false;
            RadGrid1.Rebind();
            ScriptManager.RegisterStartupScript(Page, Page.GetType(), "someKey", "Sys.Application.add_load(performExport);", true); // register a startup script that will be executed once the page finished loading
        }
    }

    When the response is returned, the following method will be executed.
    function performExport() {
        Sys.Application.remove_load(performExport); // unbind the method from the page load event.
     
        addPageBreakSelectorsToGrid(5); // apply pagebreak on every 5th row
        callExport(); // call the ExportPDF
    }

    The above code will disable Paging and export the grid accordingly, but there is one more thing that needs to be done. Once the export has finished, return the paging so that the grid will display all the data in one page. To achieve that, you can subscribe the RadClientExportManager to its OnClientPdfExported client-side event.

    <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1" OnClientPdfExported="enablePaging">
    </telerik:RadClientExportManager>

    In the event handler, send an AjaxRequest to the server and enable the paging.
    function enablePaging() {
        $find("<%=RadAjaxManager.GetCurrent(Page).ClientID%>").ajaxRequest("enablePaging");
    }

    RadAjaxManager's AjaxRequest event handler:
    protected void RadAjaxManager1_AjaxRequest(object sender, AjaxRequestEventArgs e)
    {
        if (e.Argument == "enablePaging")
        {
            RadGrid1.AllowPaging = true;
            RadGrid1.Rebind();
        }
    }

    Well done!

    I trust you have a better understanding on applying page-breaks to certain rows, export all records across all pages in the grid using RadClientExportManager.

    Attached you can find the exported PDF file generated by the application as well the sample project resembling the above described scenario.
Back to Top