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

WebForms Signature Overview

  • Brush:
    Pick Color(Current Color is #000000)
  • Stroke Width
    • Thin Line
    • Thick Line
  • Background:
    Pick Color(Current Color is #FFFFFF)
By using the ASP.NET AJAX RadSignature component, you can enable your end-users to draw handwritten signatures using touch or pointer devices.

This demo illustrates the RadSignature for ASP.NET AJAX control.

About RadSignature for ASP.NET AJAX

RadSignature is a server-side ASP.NET Web Forms wrapper over the Signature for Kendo UI for jQuery. It is an intuitive UI component that enables the user to create handwritten signatures.

RadSignature and 120+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • Flexible Appearance
  • Form integration
  • Image export
  • Flexible client-side API
  • Visual Appeal - shipped with a rich set of skins for easy and consistent styling

More about Signature for ASP.NET AJAX
  • DefaultCS.aspx
  • scripts.js
  • styles.css
<%@ Page Language="c#" AutoEventWireup="true"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>

<script runat="server">
    protected void Page_PreRender(object sender, EventArgs e)
    {
        RadSkinManager.GetCurrent(Page).Skin = "Silk";
    }
</script>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <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" />

    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript" src="scripts.js"></script>
    </telerik:RadCodeBlock>

        <div class="demo-container size-medium no-bg" runat="server">
            <div class="signature-container">
                <telerik:RadToolBar runat="server" ID="RadToolBar1" AutoPostBack="false" OnClientButtonClicked="clientToolBarButtonClicked">
                    <Items>
                        <telerik:RadToolBarButton>
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <asp:Label Text="Brush:" Height="100%" runat="server" /></td>
                                        <td>
                                            <telerik:RadColorPicker RenderMode="Lightweight" AutoPostBack="false" OnClientColorChange="clientBrushColorChange" runat="server"
                                                SelectedColor="#000" ID="RadColorPicker1" ShowIcon="true" Preset="Standard">
                                            </telerik:RadColorPicker>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                        <telerik:RadToolBarDropDown Text="Stroke Width">
                            <Buttons>
                                <telerik:RadToolBarButton Text="Thin Line" Value="thin"></telerik:RadToolBarButton>
                                <telerik:RadToolBarButton Text="Thick Line" Value="thick"></telerik:RadToolBarButton>
                            </Buttons>
                        </telerik:RadToolBarDropDown>
                        <telerik:RadToolBarButton>
                            <ItemTemplate>
                                <table>
                                    <tr>
                                        <td>
                                            <asp:Label Text="Background:" Height="100%" runat="server" /></td>
                                        <td>
                                            <telerik:RadColorPicker RenderMode="Lightweight" AutoPostBack="false" OnClientColorChange="clientBackGroundColorChange" runat="server"
                                                SelectedColor="#FFFFFF" ID="RadColorPicker2" ShowIcon="true" Preset="Standard">
                                            </telerik:RadColorPicker>
                                        </td>
                                    </tr>
                                </table>
                            </ItemTemplate>
                        </telerik:RadToolBarButton>
                    </Items>
                </telerik:RadToolBar>

                <div class="signature-wrapper">
                    <telerik:RadSignature runat="server" ID="RadSignature1" Maximizable="false" Height="270" Width="100%" Rounded="None"></telerik:RadSignature>
                </div>
                <div class="notes">
                    By using the ASP.NET AJAX RadSignature component,
            you can enable your end-users to draw handwritten signatures
            using touch or pointer devices.
                </div>
            </div>
        </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance