Edit this page

Client-Side Programming Overview

The RadClientExportManager client-side object exposes the following client-side methods to control its behavior:

RadClientExportManager Client-Side Methods

Name Parameters Return Type Description
exportPDF DOM element, pdfSettings object Export the passed DOM element to PDF. If the pdfSettings parameter is not passed, the control's default settings are used. (See Example 1)
exportImage DOM element, imageSettings object Export the passed DOM element to an image file. If the imageSettings parameter is not passed, the control's default settings are used. The value set to the "width" and "height" properties should not be an empty string, otherwise an exception will be thrown.
exportSVG DOM element, svgSettings object Export the passed DOM element to SVG. If the svgSettings parameter is not passed, the control's default settings are used. (See Example 1)
get_pdfSettings pdfSettings object Get the PDF settings.
get_imageSettings imageSettings object Get the image settings.
get_svgSettings svgSettings object Get the SVG settings.
set_pdfSettings pdfSettings object Set the PDF settings.
set_imageSettings imageSettings object Set the image settings.
set_svgSettings svgSettings object Set the SVG settings.

The pdfSettings, imageSettings and svgSettings are JavaScript objects that contain the properties you want to change. You can find an example for each object below in Example 1.

important

It is not required to change all available properties. For example in your pdfSettings object you can set only the filename. However, setting an empty string value for the "width" and "height" properties in imageSettings will throw an exception.

Example 1: A sample definition of pdfSettings, imageSettings and svgSettings objects.

<script type="text/javascript">
    var pdfSettings = {
        fileName: "PDF-Export",
        proxyURL: "http://www.proxy.com",
        margin: { top: 25, left: 15, bottom: 10, right: 5 },
        paperSize: "A4",
        landscape: "Portrait",
        title: "PDF",
        author: "UserName",
        subject: "Export to PDF",
        keywords: "a keyword",
        creator: "John",
        date: new Date(2015, 10, 25)
    };


    var imageSettings = {
        fileName: "Image-Export",
        proxyURL: "http://www.proxy.com",
        width: 200,
        heigh: 400,
    };

    var svgSettings = {
        fileName: "SVG-Export",
        proxyURL: "http://www.proxy.com",
        raw: false
    };

        function exportImage() {
            //get reference to the ClientExportManager object
            var exportManager = $find('<%=RadClientExportManager1.ClientID%>');
            //specify the image settings fileName, proxy, width, height
            var imageSettings = {
                fileName: "test.png",
                width: "1900px",
                height: "1000px"
             }
            //set the image settings
            exportManager.set_imageSettings(imageSettings);
            //export the element/container
            exportManager.exportImage($(".MyGrid"));
        }
</script>
<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1"></telerik:RadClientExportManager>
<telerik:RadGrid RenderMode="Lightweight" runat="server" ID="GridView1" CssClass="MyGrid" DataSourceID="SqlDataSource1"></telerik:RadGrid>
<telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportImage" Text="Export RadGrid to Image" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>

See Also