New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Export Multiple Elements from the Page at Once


Product Telerik WebForms ClientExportManager for ASP.NET AJAX


When exporting parts of the page to PDF through RadClientExportManager, you can pass a single selector. In some cases you may want to export several elements at once. These multiple elements may not even be adjacent or in the same container.

You can export them by using the Kendo Drawing API, Kendo Drawing Group and the jQuery when() method to utilize the deferreds that the drawDOM() method from the Kendo Drawing API provides.


Here is the gist, and a full example with comments and explanations is attached below (based on the Page for client-side export knowledge-basae article):

function exportMultipleElements() {
    var exportSettings = {
        forcePageBreak: ".pageBreak",
        paperSize: "A3",
        landscape: true

    var draw = kendo.drawing;
    var $ = $telerik.$;
    //use a few deferreds at once
        draw.drawDOM($("#first"), exportSettings),
        draw.drawDOM($("#second"), exportSettings),
        draw.drawDOM($("#third"), exportSettings),
        draw.drawDOM($("#fourth"), exportSettings)
    ).then(function (group1, group2, group3, group4) {//the number of arguments matches the number of deferreds

        var group = new kendo.drawing.Group({
            pdf: {
                multiPage: true

        //append the first three pages with the more static content, including the chart
        group.append(group1, group2, group3);
        //append the pages from the grid in the fourth element, see the rest of the functions in the full example to see how the page break selector is appended in the DOM
        group.append.apply(group, group4.children);

        return draw.exportPDF(group, exportSettings);
    }).done(function (data) {
            dataURI: data,
            fileName: "multi-element-export.pdf"

You can find attached here a basic example.

In this article