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