Export Custom Legend with Chart Export

[Jerry]

I had to use a custom chart legend but can't seem to figure out how to export the custom legend when exporting to pdf.

html:
<telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportChart1" Text="Export to PDF" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>

Javascript:
function exportChart1() {
var $ = $telerik.$;
var ddlValue = $find("<%= ddlChart1.ClientID %>").get_selectedItem().get_value();
var selectedChart = "." + ddlValue;

/*The selectedChart is found by the CssClass of the chart*/
$find('<%=RadClientExportManager1.ClientID%>').exportPDF($(selectedChart));
}

The custom legend :

<div class="customLegendWrapper">
<div class="customLegend">
<div class="series1">
<div></div>
Series 1
</div>
<div class="series2">
<div></div>
Series 2
</div>
<div class="series3">
<div></div>
Series 3
</div>
</div>
</div>

[Vessy]

Hi Jerry,

The easiest way to export two elements from a web page (the chart and the legend) is to wrap them inside a common wrapper and pass its class/id to the ClientExportManager.

For example:

        <telerik:RadClientExportManager ID="RadClientExportManager1" runat="server"></telerik:RadClientExportManager>
        <telerik:RadComboBox ID="ddlChart1" runat="server">
            <Items>
                <telerik:RadComboBoxItem Text="chart1" Value="firstChartWrapper" />
                <telerik:RadComboBoxItem Text="chart2" Value="secondChartWrapper" />
            </Items>
        </telerik:RadComboBox>
        <telerik:RadButton ID="RadButton1" runat="server" AutoPostBack="false" Text="Export" OnClientClicked="exportChart1"></telerik:RadButton>


        <div class="firstChartWrapper">
            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart2" Height="300px" Width="100%" CssClass="chart1">
                ...
            </telerik:RadHtmlChart>
            <div class="customLegendWrapper">
                <div class="customLegend">
                    <div class="series1">
                        <div></div>
                        Series 1
                    </div>
                    <div class="series2">
                        <div></div>
                        Series 2
                    </div>
                    <div class="series3">
                        <div></div>
                        Series 3
                    </div>
                </div>
            </div>
        </div>

        <script>
            var $ = $telerik.$;
            function exportChart1() {

                var ddlValue = $find("<%= ddlChart1.ClientID %>").get_selectedItem().get_value();
                        var selectedChart = "." + ddlValue;
                            /*The selectedChart is found by the CssClass of the chart*/
                            $find('<%=RadClientExportManager1.ClientID%>').exportPDF($(selectedChart));
            }
        </script>

Regards,
Vessy
Progress Telerik