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

Client-side-API

  • Demo Configurator
  • ReadOnly
  • Enabled
  • Line Smoothing
  • Dotted Line

Telerik RadSignature introduces a comprehensive client-side API, which allows you to utilize some of the built-in functions, such as enabling and disabling the component and toggling its readonly mode.

Since the control is a wrapper of the Kendo UI for jQuery Sigature, you can get the client-side Kendo widget object and use the supported API calls in the jQuery Signature API reference documentation.

  • DefaultCS.aspx
  • scripts.js
<%@ 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>
</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-wide">
        <telerik:RadSignature runat="server" ID="RadSignature1" Height="270" Width="100%">
            <ClientEvents OnLoad="signatureLoad" />
        </telerik:RadSignature>
    </div>

    <qsf:ConfiguratorPanel runat="server" ID="ConfiguratorPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn9" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <qsf:Button runat="server" ID="OpenPopupButton" Text="Open PopUp" AutoPostBack="false" OnClientClicked="openPopup"></qsf:Button>
                        </li>
                        <li>
                            <qsf:Button runat="server" ID="ClearValueButton" Text="Clear value" AutoPostBack="false" OnClientClicked="clearValue"></qsf:Button>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="label">ReadOnly</span>
                            <telerik:RadSwitch runat="server" ID="RadSwitch1" AutoPostBack="false" Checked="false" OnClientCheckedChanged="readOnlyChanged">
                            </telerik:RadSwitch>
                        </li>
                        <li>
                            <span class="label">Enabled</span>
                            <telerik:RadSwitch runat="server" ID="RadSwitch2" AutoPostBack="false" Checked="true" OnClientCheckedChanged="enabledChanged">
                            </telerik:RadSwitch>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>

                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="label">Line Smoothing</span>
                            <telerik:RadSwitch runat="server" ID="RadSwitch3" AutoPostBack="false" Checked="false" OnClientCheckedChanged="lineSmoothinigChanged">
                            </telerik:RadSwitch>
                        </li>
                        <li>
                            <span class="label">Dotted Line</span>
                            <telerik:RadSwitch runat="server" ID="RadSwitch4" AutoPostBack="false" Checked="true" OnClientCheckedChanged="dottedLineChanged">
                            </telerik:RadSwitch>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance