New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Save Exported Files


Product IdProduct NameQuantity Per UnitUnit Price
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
76Lakkalikööri500 ml18.00
15Genen Shouyu24 - 250 ml bottles15.50

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
  
  
  
  
  
  
  
  
  
  
  

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