• Stroke Width
      • Thin Line
      • Thick Line
    • Background:
      Pick Color(Current Color is #FFFFFF)

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

    WebForms Signature Overview

    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