RadGrid and exporting just the NestedViewTemplate to a PDF

[SSirica]

I have a RadGrid with like 40 columns, so the grid has a NestedViewTemplate that I use to display the selected row in sort of a form/table view.  That all works fine.  What I'm looking to do is to incorporate the ability for the user to export the NestedViewTemplate view to a PDF.  I guess in a way, it's a quick way to generate a single item report.  I've been thru all the articles with the hierarchical stuff, but that's not my scenario, so they were no help.  

[Attila Antal]

Hi SSirica,

You can use the RadClientExportManager component and export only the elements that you specify.

Here is a full example:

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">
    <MasterTableView DataKeyNames="OrderID">
        <NestedViewTemplate>
            <div class="export-me">
                <telerik:RadCard ID="RadCard1" runat="server" Width="200px">
                    <telerik:CardTitleComponent runat="server">
                        OrderID #<%#  Eval("OrderID") %>
                    </telerik:CardTitleComponent>
                    <telerik:CardSubtitleComponent runat="server">
                        Ordered on <%#  Eval("OrderDate") %>
                    </telerik:CardSubtitleComponent>
                    <telerik:CardBodyComponent runat="server">
                        <p><strong>ShipName:</strong> <%#  Eval("ShipName") %></p>
                        <p><strong>ShipName:</strong> <%#  Eval("ShipCountry") %></p>
                    </telerik:CardBodyComponent>
                    <telerik:CardActionsContainerComponent runat="server" CardActionsAlignment="Stretched">
                        <span class="k-button k-flat k-primary exportToPdf">Export to PDF</span>
                    </telerik:CardActionsContainerComponent>
                </telerik:RadCard>
            </div>
        </NestedViewTemplate>
    </MasterTableView>
</telerik:RadGrid>

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

 

C# code for data binding

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)
{
    (sender as RadGrid).DataSource = Enumerable.Range(1, 10).Select(x => new
    {
        OrderID = x,
        OrderDate = DateTime.Now.Date.AddDays(x),
        Freight = x * .1,
        ShipName = "Name " + x,
        ShipCountry = "Country " + x
    });
}

 

RadGrid Figure

 

JavaScript to attach the click event handler to the action buttons and to call the ClientExportManager's Export method for a specific element

function pageLoadHandler() {

    $telerik.$('.RadGrid .rgMasterTable .export-me .k-button.exportToPdf').on('click', function (e) {

        var $elementToExport = $telerik.$(this).closest('.export-me');

        var exp = $find("<%= RadClientExportManager1.ClientID %>");
        exp.exportPDF($elementToExport);
    });

    // Sys.Application.remove_load(pageLoadHandler);  
}
Sys.Application.add_load(pageLoadHandler);

 

Some cosmetics to make the Expanded container look better

.RadGrid .rgMasterTable .export-me {
    padding: 10px;
}

 

Export Results

 

 

References:

• Overview Demo - RadClientExportManager
• Export a Dom element to a PDF document - RadClientExportManager
• Components - RadCard
• Actions - Kendo UI Card

 

I hope this will help achieve the desired scenario.

 

Regards,
Attila Antal
Progress Telerik