Add HTML before exporting element

[Matt]

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?

[Matt]

If this is not possible, is it possible to export more than one element on the page into the same document?

[Ivan Danchev]

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