0

I am trying to change the orientation of my RadHtmlChart when printing. Here is the code I am using which, basically, takes an image of the chart and puts it in another window to print. It is working, but I need to change the orientation to landscape without the user needing to change their settings. I read that this is not possible anymore using JavaScript and CSS, and the alternative is to export to PDF.

<script type="text/javascript">
    function PrintPage() {
        var printContent = document.getElementById("divChart");
        var WinPrint = window.open('', '', 'left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0);
        WinPrint.document.write(printContent.innerHTML);
        WinPrint.document.close();
        WinPrint.focus();
        WinPrint.print();
        WinPrint.close();
    };
</script>

I have followed the demo for how to do this in Telerik, but I receive a JavaScript error:

$Telerik' not defined

I looked up this error on Telerik and found a document on general troubleshooting. I followed the directions (inputting my version of Telerik's DLL into the Telerik.Web.UI.axd handler) and this caused my program's components (RadGrid, etc.) to not be found.

Is there an alternative way to export RadHtmlChart to PDF? In all actuality, the chart doesn't even have to be exported to PDF, I just need a way to print the form in landscape orientation without the user having to choose the orientation.

Can anyone help me?

EDIT

I was able to correct the $telerik error and exported a PDF file but it was corrupted and none of the data was showing. I was unable to find a solution to this particular problem, but I found another way to export the RadHtmlChart that suited my needs. I will post my code below for anyone who is experiencing these issues. Note: this solution uses Telerik components and must be wrapped inside the RadCodeBlock. I wanted to export all of the contents inside "divChart" and had to use "#divChart" instead of ".divChart".

<telerik:RadCodeBlock runat="server">
    <script type="text/javascript">
        var $ = $telerik.$;

        function exportChartImage() {
            $find('<%=RadClientExportManager1.ClientID %>').exportImage($("#divChart"));
        };
    </script>
</telerik:RadCodeBlock>

This next part goes inside your main content. I put this directly below the div tag containing my content. Note: The image will be distorted and small if you do not set the height/width!

<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
    <ImageSettings Height="900px" Width="950px" FileName="Chart.png" />
</telerik:RadClientExportManager>

This will go in your code behind inside the page load event.

Dim relativePath = "~/api/export/file"
RadClientExportManager1.ImageSettings.ProxyUrl = ResolveUrl(relativePath)

Now the chart, or any other Telerik component I believe, will be exported as an image as well as being in landscape orientation when printing!

EDIT 2

This solution only works in modern browsers! I tested this on IE10 and it also outputs the correct formatted image.

PhoenixFly
  • 89
  • 2
  • 2
  • 13

0 Answers0