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

Signature Dialog

  • Show/Hide Border
  • Table Properties
  • Delete Table
  • Row
    • Insert Row Above
    • Insert Row Below
    • Delete Row
  • Column
    • Insert Column to the Left
    • Insert Column to the Right
    • Delete Column
  • Cell
    • Merge Cells Horizontally
    • Merge Cells Vertically
    • Split Cell Horizontally
    • Split Cell Vertically
    • Delete Cell
  • Cell Properties
  • Table Properties
  • Properties...
  • Image Map Editor
  • Properties...
  • OpenLink
  • Remove Link
  • Insert Select
  • Cut
  • Copy
  • Paste
  • Paste from Word
  • Paste Plain Text
  • Paste As Html
  • Paste Html

The demo represents a WYSIWYG HTML editor with a Signature Dialog that allows users to insert a handwritten signature into a text editor. The dialog is opened by clicking on a custom button called "Insert Handwritten Signature" in the Telerik RadEditor. The dialog displays a signature pad that allows the user to draw their signature. Once the user is done, they can click on the "Store on Server as PNG and Insert" button to store the signature on the server as a PNG file and insert the signature image into the editor.

The Default page contains the RadEditor control with the custom button defined inside the tool groups. The InsertSignature.aspx page contains a RadSignature control that provides the signature pad functionality. The codebehind file of the InsertSignature page handles the AJAX request and saves the signature as a PNG file on the server.

You can find more information of how to build your own RadEditor dialogs in the Custom Dialogs demo.

  • DefaultVB.aspx
    • DefaultVB.aspx
    • InsertSignature.aspx
    • InsertSignatureVB.aspx
  • InsertSignatureVB.aspx.vb
  • styles.css
<%@ Page Theme="Default" Language="vb" AutoEventWireup="true"  %>

<%@ 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>
    <link href="../Common/styles.css" rel="stylesheet" type="text/css" />
    <link href="styles.css" rel="stylesheet" />
</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 size-wide">
        <telerik:RadEditor RenderMode="Lightweight" runat="server" ID="RadEditor1" Width="800px">
            <Tools>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="InsertSignatureVB" Text="Insert Handwritten Signature"></telerik:EditorTool>
                </telerik:EditorToolGroup>
                <telerik:EditorToolGroup>
                    <telerik:EditorTool Name="Bold"></telerik:EditorTool>
                    <telerik:EditorTool Name="Italic"></telerik:EditorTool>
                    <telerik:EditorTool Name="Underline"></telerik:EditorTool>
                </telerik:EditorToolGroup>
            </Tools>
            <Content>
                To sign up, simply click on the pencil icon above and use your mouse to handwrite your signature and insert it here.
            </Content>
        </telerik:RadEditor>
        <asp:HiddenField ID="hiddenField1" runat="server" />
        <script>
            // Add custom command to the RadEditor command list
            Telerik.Web.UI.Editor.CommandList['InsertSignatureVB'] = function (commandName, editor, args) {

                // Callback function to handle signature insertion after the dialog is closed
                var myCallbackFunction = function (sender, args) {
                    // Insert signature image HTML into the editor
                    editor.pasteHtml(String.format('<img src=\'{0}\' border=\'0\' style=\'width:50%;height:50%;\'  /> ', args.src));
                };

                // Show signature dialog as an external dialog
                editor.showExternalDialog(
                    'InsertSignatureVB.aspx',
                    null,
                    540,
                    450,
                    myCallbackFunction,
                    null,
                    'Draw and Insert Signature',
                    true,
                    Telerik.Web.UI.WindowBehaviors.Close + Telerik.Web.UI.WindowBehaviors.Move,
                    false,
                    true);
            };
        </script>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance