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

Export RadOrgChart

You could easily export the RadOrgChart control with the RadClientExportManager to PDF (as in this demo) and to an image. You can also use the skin chooser to change the appearance of the component and export the new appearance.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.ApplicationScenarios.OrgChart.DefaultCS"Language="c#"  %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <!-- Load Pako ZLIB library to enable PDF compression -->
    <script src="../../../Common/Scripts/pako.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container size-medium">
        <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportRadOrgChart" Text="Export RadOrgChart to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>
        <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
        </telerik:RadClientExportManager>
        <telerik:RadOrgChart RenderMode="Lightweight" runat="server" ID="RadOrgChart1"
            EnableCollapsing="true" EnableDrillDown="true" EnableGroupCollapsing="true">
            <nodes>
                <telerik:OrgChartNode>
                    <RenderedFields>
                        <telerik:OrgChartRenderedField Text="CEOs" />
                    </RenderedFields>
                    <GroupItems>
                        <telerik:OrgChartGroupItem Text="John Bravo" />
                    </GroupItems>
                    <Nodes>
                        <telerik:OrgChartNode>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Don Marko">
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Team Leader" />
                                    </RenderedFields>
                                </telerik:OrgChartGroupItem>
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode ColumnCount="2">
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="Marianna Weissova" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                        <telerik:OrgChartNode>
                            <GroupItems>
                                <telerik:OrgChartGroupItem Text="Sara Darkman">
                                    <RenderedFields>
                                        <telerik:OrgChartRenderedField Text="Team Leader" />
                                    </RenderedFields>
                                </telerik:OrgChartGroupItem>
                            </GroupItems>
                            <Nodes>
                                <telerik:OrgChartNode ColumnCount="2">
                                    <GroupItems>
                                        <telerik:OrgChartGroupItem Text="Lin-Sheng Fen" />
                                    </GroupItems>
                                </telerik:OrgChartNode>
                            </Nodes>
                        </telerik:OrgChartNode>
                    </Nodes>
                </telerik:OrgChartNode>
            </nodes>
        </telerik:RadOrgChart>
    </div>
    <script>
        var $ = $telerik.$;

        function exportRadOrgChart() {
            $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(".RadOrgChart"));
        }

    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance