Add HTML before exporting element

3 posts, 1 answers
  1. Matt
    Matt avatar
    32 posts
    Member since:
    May 2013

    Posted 16 Jun 2015 Link to this post

    I would like to add a header (logo) to the top of the HTML element that I am exporting.  I only want to export a portion of my page, but would like to add a header to the top of it.  Is this possible with the Client Export Manager?
  2. Matt
    Matt avatar
    32 posts
    Member since:
    May 2013

    Posted 16 Jun 2015 Link to this post

    If this is not possible, is it possible to export more than one element on the page into the same document?
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    837 posts

    Posted 19 Jun 2015 Link to this post

    Hello,

    Exporting different elements of the page and appending them to a document is not supported out-of-the-box by RadClientExportManager. This can be achieved by hiding elements of your page prior to exporting the desired content. Consider the following example:

    <h2>Header</h2>
    <div id="doNotExport" style="width:600px; height:200px; background-color:red;">
       <%-- content not to be exported--%>
    </div>
    <div style="width:600px; height:200px; background-color:blue;">
       <%-- content to be exported --%>
    </div>
     
    <input type="button" onclick="exportElement()" value="export" />
     
    <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        <PdfSettings FileName="MyFile.pdf" />
    </telerik:RadClientExportManager>

    If we do not want to export div "doNotExport" and its content we can hide it before calling the export method and then show it after the export is done as shown below:
    function exportElement() {
        var exp = $find("RadClientExportManager1");
        $telerik.$("#doNotExport").hide();
        exp.exportPDF($telerik.$("html"));
        setTimeout(function () {
            $telerik.$("#doNotExport").show();
        }, 1000);
    }

    In this example we are exporting the whole page but this approach applies to cases involving export of specific DOM elements as well. In these cases you will have to export an element (a div for instance) which wraps the content you want exported and the content that you want to exclude and you have to hide the latter before the export as shown in the code snippet above.

    Regards,
    Ivan Danchev
    Telerik
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Back to Top