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

Export as Image

Sign and export/save



View the exported signatures

  • Open
  • Delete
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  RadSignatureEntries
  • Delete
Table that lists the contents of the current directory
FilenameSize
Table that lists the contents of the current directory
  
  
  
  
  
  
  
  
  
  
  

This demo about the Telerik UI for ASP.NET AJAX RadSignature component demonstrates how to save the Signature as a PNG file and send it to the browser or pass and store it on the server.

The signatures stored on the server are displayed with another component called Telerik UI for ASP.NET AJAX RadFileExplorer. This component also provides a the ability to delete or display the content of the stored PNG files.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.Web.Examples.Signature.ExportAsImage.DefaultCS"  %>

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


    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" OnAjaxRequest="RadAjaxManager1_AjaxRequest">
        <ClientEvents OnResponseEnd="responseEnd" />
    </telerik:RadAjaxManager>

    <div class="demo-container">
        <div class="demo-containers">
            <div class="demo-container">

                <h2 class="exportLabel">Sign and export/save</h2>
                <telerik:RadButton runat="server" ID="RadButton1" Text="Export as PNG" AutoPostBack="false" OnClientClicked="exportAsPngClicked" />
                <telerik:RadButton runat="server" ID="RadButton2" Text="Store on Server as PNG" AutoPostBack="false" OnClientClicked="sendToServer" />

                <br /><br />

                <telerik:RadSignature runat="server" ID="RadSignature1" Height="270" Width="400">
                    <ClientEvents OnLoad="signatureLoad" />
                </telerik:RadSignature>

            </div>
            <div class="demo-container">

                <h2 class="exportLabel">View the exported signatures</h2>
                <telerik:RadFileExplorer RenderMode="Lightweight" ID="FileExplorer1" Configuration-DeletePaths="~/Editor/images/RadSignatureEntries"
                    Width="400px" Height="319px" runat="server" Configuration-ViewPaths="~/Editor/images/RadSignatureEntries">
                </telerik:RadFileExplorer>

            </div>
        </div>
    </div>

    <telerik:RadScriptBlock runat="server" ID="RadScriptBlock1">
        <script>
            var signature;
            function signatureLoad(sender, args) {
                signature = sender;
            }

            function exportAsPngClicked(sender, args) {
                if(!signature.get_value()) return;

                kendo.saveAs({
                    dataURI: signature.get_value(),
                    fileName: "signature.png"
                })
            }

            function sendToServer(sender, args) {
                if(!signature.get_value()) return;

                var ajaxManager = $find("<%= RadAjaxManager1.ClientID %>");
                var fileName = "signature.png";
                ajaxManager.ajaxRequest(fileName + ";" + signature.get_value());
            }

            function responseEnd(sender, args) {
                var fileExplorer = $find("<%= FileExplorer1.ClientID %>");
                fileExplorer.refresh();
                signature.set_value('');
            }
        </script>
    </telerik:RadScriptBlock>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance