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

Save Exported Files


Product IdProduct NameQuantity Per UnitUnit Price
1Chai10 boxes x 20 bags18.00
2Chang24 - 12 oz bottles19.00
3Aniseed Syrup12 - 550 ml bottles10.00
4Chef Anton's Cajun Seasoning48 - 6 oz jars22.00
6Grandma's Boysenberry Spread12 - 8 oz jars25.00
7Uncle Bob's Organic Dried Pears12 - 1 lb pkgs.30.00
8Northwoods Cranberry Sauce12 - 12 oz jars40.00
10Ikura12 - 200 ml jars31.00
11Queso Cabrales1 kg pkg.21.00
12Queso Manchego La Pastora10 - 500 g pkgs.38.00

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