ClientExportManager - Export RadOrgChart

  • CEOs
    • John Bravo
      • Don Marko
        Team Leader
        • Marianna Weissova
      • Sara Darkman
        Team Leader
        • Lin-Sheng Fen
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <%-- Apply fix for most browsers for missing lines and icons in the exported PDF file --%>
    <style>
        .kendo-pdf-hide-pseudo-elements:after,
        .kendo-pdf-hide-pseudo-elements:before {
            display: none !important;
        }


        .k-pdf-export .rocNode:before {
            display: normal;
            height: 1px;
            max-width: 100%;
            background: black;
        }

        .k-pdf-export .rocGroup:before,
        .k-pdf-export .rocGroup:after,
        .k-pdf-export .rocNode:after,
        .k-pdf-export .rocItem:after {
            display: normal;
            max-height: 100%;
            width: 1px;
            background: black;
        }
    </style> 

    <!-- 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

Help Us Improve

Was this example helpful?