ClientExportManager - Save Exported Files


Product IdProduct NameQuantity Per UnitUnit Price
1Chai10 boxes x 20 bags18.00
2Chang24 - 12 oz bottles19.00
34Sasquatch Ale24 - 12 oz bottles14.00
35Steeleye Stout24 - 12 oz bottles18.00
38Côte de Blaye12 - 75 cl bottles263.50
39Chartreuse verte750 cc per bottle18.00
43Ipoh Coffee16 - 500 g tins46.00
67Laughing Lumberjack Lager24 - 12 oz bottles14.00
70Outback Lager24 - 355 ml bottles15.00
75Rhönbräu Klosterbier24 - 0.5 l bottles7.75

View the exported Images

  • Open
  • Delete
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  Files
  • Delete
Table that lists the contents of the current directory
FilenameSize
Table that lists the contents of the current directory
  
  
  
  
  
  
  
  
  
  
  
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The example demonstrates how you can export and save RadGrid’s contents to an image and load the file in RadFileExplorer. Double click on the image file in the file explorer to preview it.

With the Client-side OnClientPdfExporting, OnClientImageExporting and OnClientSvgExporting events of RadClientExportManager, you can obtain the file content and save it to the desired location.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
    • DefaultCS.aspx.cs
    • ExportController.cs
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ClientExportManager.ApplicationScenarios.Save.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>
    <style type="text/css">
        .exportLabel {
            padding-top:20px;
        }
    </style>
</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">
        <div class="demo-containers">
            <div class="demo-container">
                <telerik:RadButton RenderMode="Lightweight" runat="server" OnClientClicked="exportImage" Text="Export Grid to Image" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>

                <telerik:RadClientExportManager runat="server" OnClientImageExporting="onClientImageExporting" ID="RadClientExportManager1">
                </telerik:RadClientExportManager>
                <br />
                <telerik:RadGrid RenderMode="Lightweight" runat="server" ID="GridView1" CssClass="MyGrid" DataSourceID="SqlDataSource1">
                </telerik:RadGrid>
            </div>
            <div class="demo-container">
             <h2 class="exportLabel">View the exported Images</h2>
                <telerik:RadFileExplorer RenderMode="Lightweight" ID="FileExplorer1"  Configuration-DeletePaths="~/Client-Export-Manager/ApplicationScenarios/Save-Exported-Files/Files"
                    Width="400px" Height="319px" runat="server" Configuration-ViewPaths="~/Client-Export-Manager/ApplicationScenarios/Save-Exported-Files/Files">
                </telerik:RadFileExplorer>
            </div>
        </div>
        <asp:SqlDataSource runat="server" ID="SqlDataSource1" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT TOP 10 ProductId, ProductName, QuantityPerUnit, UnitPrice FROM [Alphabetical list of products]"></asp:SqlDataSource>
    </div>
    <script>
        var $ = $telerik.$;

        function exportImage() {
            $find('<%=RadClientExportManager1.ClientID%>').exportImage($(".MyGrid"));
        }

        function onClientImageExporting(sender, args) {
            var dataRaw = args.get_dataURI().split(',');

            var data = { contentType: dataRaw[0].split(';')[0].split(':')[1], fileName: "Default.png", base64: dataRaw[1] };

            $.ajax({
                type: "POST",
                data: data,
                url: controllerURL,
                success: success
            });

            args.set_cancel(true);
        }

        function success() {
            $find('<%=FileExplorer1.ClientID%>').refresh();
        }
    </script>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?